jQuery中的DOM操作总结

[Liudongge]

一、 查找节点

1. 查找元素节点：

   var $li = $("ul li:equal(1)");//获取ul中第二个li节点
   var li_txt = $li.text();//获取第二个li元素节点的问本内容

2. 查找属性节点：

   var $para = $("p");//获取p节点
   var p_txt = $para.attr("title");//获取p元素节点属性title

   attr()方法的两个参数，第一个是属性名称，第二个是赋值内容。

[Liudongge]

二、创建节点

1. 创建元素节点： 使用$(html)和append()方法。

   var $li = $("<li></li>");//创建li元素
   $("ul").append($li);//将li元素添加到ul节点中

2. 创建文本节点： var $li = $("<li>文本内容</li>");//创建li元素时加入文本内容

3. 创建属性节点： var $li = $("<li title="标题">文本内容</li>);//创建元素并且创建属性title

[Liudongge]

三、插入节点

元素内部:

1. append(): 向每个匹配的元素内部追加内容。$(a).append(b),向a中加入b
2. appendTo(): 将内容追加到指定的元素中。$(a).appendTo(b),将a加入到b
3. prepend(): 向每个匹配的元素内部追加前置内容。
4. prependTo(): 将内容追加到指定的元素中的前置部位。

元素外部：

5. after(): 在每个匹配的元素之后追加内容。
6. insertAfter(): 将内容追加到指定的元素之后。
7. before(): 在每个匹配的元素之前插入内容。
8. insertBefore(): 将内容追加到指定的元素之前。

[Liudongge]

四、删除节点

1. remove() 可传参，选择性删除。 节点使用remove()方法删除，同时包含的后代节点也会被删除。 该方法的返回值是一个指向已被删除的节点的引用。因此还可以继续使用被删的节点。 可以使用appendTo()方法进行节点移动。即删除后再追加。

2. empty() 清空节点。清除元素内部所有子节点。

[Liudongge]

五、复制节点

clone()方法，配合appendTo()使用。可以传参，如下例：

// 点击li节点，复制该节点到ul中并使其也具有点击事件
$("ul li").click(function(){
    $(this).clone(true).appendTo("ul");
})

[Liudongge]

六、替换节点

1. replaceWith() $("p").replaceWith("<strong>xxxx</strong>");
2. replaceAll() $("<strong>xxxx</strong>").replaceAll("p");

[Liudongge]

七、包裹节点 wrap()方法可以用其他标记将匹配到的节点包裹起来。 另外两个方法：

1. wrapAll(): 会将所有匹配的元素用一个节点包裹起来。 区别于wrap()。
2. wrapInner(): 会将匹配的到的元素的子内容（包括文本内容）用其他标记包裹起来。

[Liudongge]

八、属性操作

1. attr()方法获取和设置元素属性。 一个参数时，获取对应属性。两个元素时，设置元素属性。 一次性为同一元素设置多个属性时，可以使用下面代码： $("p").attr({"title": "your title", "name": "test"}); //使用键值对形式为元素设置属性

2. removeAttr()方法来删除元素属性。一个参数，即属性名称。

[Liudongge]

九、样式操作

1. 获取样式和设置样式：attr()方法来对class属性修改
2. 追加样式：addClass() css中两条规定：一个元素多个class值，相当于合并；不同clss设定统一样式属性，后者覆盖前者。
3. 移除样式：removeClass() 参数名即样式名称，多个样式可以用空格隔开，如果不传参则删除所有。
4. 切换样式：toggleClass() 如果类名存在则删除它，如果不存在则添加它。
5. 判断是否含有某个样式： hasClass() 返回值是boolean，实现方式是is函数： $("p").is(".another");// is("." + class);

[Liudongge]

十、获取和设置HTML、文本和值

1. html()方法： 类似于js中的innerHtml()方法。 不带参数是获取，带参数是设置。
2. text()方法： 类似于js中的innerText()方法，读去或者设置某个元素的文本内容。
3. val()方法： 类似于js中的value属性，可以读取或设置元素的值。如果元素为多选，则返回值的数组。

   $("address").focus(function(){ //focus()相当于js中的onfocus()方法，处理获取焦点时的事件
   var txt_value = $(this).val(); //获取地址文本框的值
   if(txt_value == this.defaultValue) { // defaultValue属性是表单元素的初始值
       $(this).val(""); //设空
   }
   })
   $("address").blur(function(){ //blur()方法相当于js中的onblur()方法，处理失去焦点时的事件
   var txt_value = $(this).val();
   if(txt_value == "") {
       $(this).val(this.defaultValue);
   }
   })

   可以使用val()方法给select,checkbox,radio中相应项设置选中。如：

   
   $("#single").val("选择2号");
   $("#multiple").val(["选择2号","选择3号"]); //以数组形式赋值

// 使用attr()也可以实现这个效果 $("#single option:eq(1)").attr("selected", true); // 设置属性selected $("[value=redio2]:radio").attr("checked",true); // 设置属性checked

另，读取方法是从后向前

[Liudongge]

十一、遍历节点

1. children()方法：取得匹配元素的子元素集合。 只考虑子元素而不考虑任何后代元素。

2. next()方法：取得匹配元素后面紧邻的同辈元素。

3. prev()方法：取得匹配元素前面紧邻的同辈元素。

4. sibling()方法：取得匹配元素前后所有的同辈元素。

5. closest()方法：取得最近的匹配元素。向上查找。

其他：find(),filter(),nextAll(),prevAll(),parent(),parents()等。

[Liudongge]

十二、CSS-DOM操作 css()方法类似attr()方法。可以对css样式查询，修改。注意书写规范。

1. offset()方法：获取元素在当前视窗的相对偏移，返回对象有两个属性，top和left。

2. position()方法：获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回对象的两个属性也是top和left。

3. scrollTop()方法和scrollLeft()方法：获取元素的滚动条距顶端的距离和距左端的距离。 可以给方法内指定参数，来控制滚动条移动。

其它：width(),height()等