本系列适合作为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" 选择器）
网友评论