传智播客 2010-01-18 JavaScript基础加强

传智播客 2010-01-18 JavaScript基础加强

  今天AJAX必须用JS,做前端必须用JS,由于课程紧,只安排了一天时间,只讲了Dom

DOM 可在J2SEAPIDocument,便可以查看方法

DOM:节点node)的层次。

  节点分为三种类型:

  节点(node):来源于网络理论,代表网络中的一个连接点。网络是由节点构成的集合

1.节点分为三种类型
  element node    attribute node    text node

2.使用 Aptana 编辑器 :

3.查找节点:

  1)在哪儿写代码:

    不能直接写在<body> 元素的前面 :因为此时 DOM没有被完全解析

    可以把 js 写在 </html> 的后面

    按惯例应该把 js 代码写在 <head>中,<title>节点后,此时需要使用 js 函数window.onload = function(){

              //alert("window.onload...");

              var cityElement = document.getElementById("city");

              alert(cityElement.nodeName);

          };

  2Dom属性:nodeName   nodeType   nodeValue

nodeName:一个字符串,其内容是给定节点的名字。

   var name = node.nodeName;

如果给定节点是一个元素节点或属性节点,nodeName 属性将返回这个元素的名字。

如果给定节点是一个文本节点,nodeName 属性将返回内容为 #text 的字符串。

nodeName 是一个只读属性。

 

nodeType返回一个整数,这个数值代表着给定节点的类型。

nodeType 属性返回的整数值对应着 12 种节点类型:

Node.ELEMENT_NODE (1)      -- 元素节点

Node.ATTRIBUTE_NODE (2)    -- 属性节点

Node.TEXT_NODE (3)         -- 文本节点

nodeType 是个只读属性 

nodeValue返回给定节点的当前值(字符串)

          如果给定节点是一个属性节点,返回值是这个属性的值

          如果给定节点是一个文本节点,返回值是这个文本节点的

   内容。

          如果给定节点是一个元素节点,返回值是 null

          nodeValue 是一个 / 属性,但不能对元素节点的    

   nodeValue 属性设置值,但可以为文本节点的 nodeValue

   属性设置一个值

 

 4. 关于子节点:

       1). 获取方法:

              元素节点的 childNodes 属性可以获取指定元素节点的所有子节点.

       2). 火狐 ie 的实现方式不一样: 火狐包含空格的文本节点    

       3). 提前判断当前节点是否有子节点:

              通过元素节点的 hasChildNodes() 方法. 文本节点和属性节点都没有子节点, 所以他们的 hasChildNodes() 方法总返回 false     

       4). 可以通过元素节点的 firstChild(lastChild) 来获取元素节点的第一个子节点(最后一个子节点)  

可以通过元素节点的 firstChild/lastChild 来获取元素节点的第一个子节点(最后一个节点)            

5. 正则表达式

   用途:

1.        数据有效性验证

2.        查找和替换 

文本格式: /pattern/flags

参数说明:

pattern :一个正则表达式文本

flags : 如果存在,将是以下值:

g global match(全局匹配)

i ignore case(忽略大小写)

gi both global match and ignore case(匹配所有可能的值,也忽略大小写)

 

java中相当重要,可谓必备知识,可惜我这方面没看过,就列

一些常用的正则表达式示例:

 

1、匹配所有的正数:^[0-9]+$

2、匹配所有的小数:^\-?[0-9]*\.?[0-9]*$

3匹配所有的整数:^\-?[0-9]+$

4、提取信息中的中文字符串: [\u4e00-\u9fa5]* ; 

5、提取信息中的邮件地址:\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
6
、提取信息中的中国手机号码:(86)*0*13\d{9}
7
、提取信息中的中国固定电话号码:(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}
8
、提取信息中的中国邮政编码:[1-9]{1}(\d+){5}
9
、提取信息中的中国身份证号码:\d{18}|\d{15}
10
、提取信息中的任何数字:(-?\d*)(\.\d+)?
11
匹配HTML标记的正则表达式:/<(.*)>.*<\/\1>|<(.*) \/>/

 

6. 创建节点:

       1). 创建元素节点: document.createElement

       2). 创建文本节点: document.createTextNode

       3).创建属性节点: 可以直接为其添加属性节点:

              liNode.onclick = function(){

                     alert(this.firstChild.nodeValue);

              };

       4). 插入节点:

              appendChild

              insertBefore

              可以自定义 insertAfter

7. 其它:

       1). 替换节点: replaceChild. **注意: 该方法除了可以替换还可以移动, 一般的, 直接单独使用该方法时并不多.

       2). 删除节点: removeChild

       3). innerHTML属性:   

      

8. 关于 value nodeValue:

       1). value: html 表单元素的某个节点的 value 属性值. <input type="text" value=""> -- value 值可通过 .value 获取; <p value=""></p> 中的 value 属性值无法通过 .value 干获取

       2). nodeValue: 文档(html xml) 中节点的一个属性, 该属性和 nodeType, nodeName 并列. 该属性通常用来获取文本节点的文本值

      

9. 关于 if() 中可以放置的表达式: if 中的表达式为 false, undefined, null, "", 0 时表示不满足条件, 此外都满足条件.     

      

10. 作业: dom-8.html 中的: "为所有的 li 添加 click 事件, 实现 game city 对应位置的 li 子节点的互换"   

 

 

你可能感兴趣的:(传智播客 2010-01-18 JavaScript基础加强)