jQuery学习笔记（二）DOM操作

本系列适合作为JQ的复习文档。

本章主要参考来源：绿叶学习网 - jQuery入门教程

3 DOM操作

DOM，“Document Object Model（文档对象模型）”。

3.1 创建节点

var e = $(HTML标签字符串);
$().append(e); //append()方法表示向所选元素内部的“末尾”插入内容

PS:对于jQuery创建的节点，变量命名习惯用“$”开头，以表示这是一个jQuery对象。

对比；JS的语法：
var e = document.createElement("元素名"); //创建元素节点
var t = document.createTextNode("元素内容"); //创建文本节点
e.appendChild(t); //把元素内容插入元素中去

3.2 插入节点

两组的效果是相同的，记一组就好，推荐第2组。
//第1组
append()、prepend()、before()、after()
//第2组
appendTo()、prependTo()、insertBefore()、insertAfter()

3.2.1 内部插入节点

• append()和appendTo()
  $(A).append(B) //表示在A内部的“末尾”插入B。
  $(A).appendTo(B) //表示将A插入B内部的“末尾”。
• prepend()和prependTo()；
  $(A).prepend(B) //表示在A内部的“开始”插入B。
  $(A).prependTo(B) //表示将A插入B内部的“开始”。

3.2.2 外部插入节点

• before()和insertBefore()
  $(A).before(B) //表示在A“之前”插入B。
  $(A).insertBefore(B) //表示将A插入B“之前”。
• after()和insertAfter()
  $(selector).after(content) //表示在content之后插入selector。
  $(content).insertAfter(selector) //表示在content之后插入selector。

3.3 删除节点

$(A).remove(expression)表示删除符合expression条件的A元素。当expression省略，即$(A).remove()时，表示删除所有的A元素。
一般情况下，建议使用无参数的remove()方法，直接把筛选条件放在$()选择器里面，没必要多此一举把筛选条件放在方法后面。

3.3.1 remove()

$(A).remove() // 彻底删除，删除元素和事件；将自身节点以及后代节点一并删除

remove()方法可以返回一个值，返回值类型为删除的jQuery节点对象。
使用变种：来进行两个元素的互换
$("#btn").click(function () {
//将内容为“CSS”这一个li删除并赋值给$li1
var $li1 = $("ul li:eq(1)").remove();
$($li1).insertAfter("ul li:eq(1)");
//将内容为“jQuery”这一个li删除并赋值给$li2
var $li2 = $("ul li:eq(3)").remove();
$($li2).insertBefore("ul li:eq(1)");
})

3.3.2 detach()

$(A).detach() //半删除，删除元素，不删除事件；将自身节点以及后代节点一并删除

总结：
当我们删除节点后，如果希望重新使用该节点，并且希望被删除的节点在重新使用后还能保留原来绑定的事件，应该使用detach()而不是remove()。

3.3.3 empty()

$(A).empty() //清空A，仅删除后代节点，而保留自身节点。

3.4 复制节点

$(A).clone() //将A节点复制，但不复制A节点所绑定的事件。
$(A).clone(true) //将A节点复制，并且复制A节点所绑定的事件。

clone()方法的布尔参数默认为false。

3.5 替换节点

如果在替换节点之前，已经为元素绑定了事件；那么，使用replaceWith()或replaceAll()之后，该元素所绑定的事件会消失。因此，如果想要保留事件，则需要在新元素上重新绑定事件。

3.5.1 replaceWith()

$(A).replaceWith(B) //表示用B来替换A。

3.5.2 replaceAll()

$(A).replaceAll(B) //表示用A来替换B。

3.6 包裹节点

3.6.1 wrap()

 $(A).wrap(B) //表示用B元素将A元素包裹起来。

3.6.2 wrapAll()

 $(A).wrapAll(B) //表示用1个B来包裹所有匹配的元素A。与wrap()不等价

3.6.3 wrapInner()

$(A).wrapInner(B) //表示将A元素“所有内部子元素”使用B元素包裹起来（不包括A本身）。

3.7 遍历节点

$(selector).each(function(index,element)) //each() 方法规定为每个匹配元素规定运行的函数。
 // index - 选择器的 index 位置
// element - 当前的元素（也可使用 "this" 选择器）