jQuery基础篇（二）DOM

节点的创建和属性处理

我们可以通过以下语句来创建一个新的标签。

$("<div class='myClass'></div>")

节点的插入

动态创建元素后还需要将节点放入到文本中。

先看第一组节点插入方法：append()、appendTo()、prepend()、prependTo()。

A.append(B)，将B添加到A中，并设置为最后一个A的子元素；

A.appendTo(B)，将A添加到B中，并设置为最后一个B的子元素；

A.prepend(B)，将B添加到A中，并设置为第一个A的子元素；

A.prependTo(B)，将A添加到B中，并设置为第一个B的子元素；

另一组节点插入方法：after()、before()、insertAfter()、insertBefore()。

A.after(B)，将B插入到A的后面；

A.before(B)，将B插入到A的前面；

A.insertAfter(B)，将A插入到B的后面；

A.insertBefore(B)，将A插入到B的前面；

after()、before()支持多参数，可以同时插入n个节点；

节点的删除

empty()，是清空节点内容，会删除内部所有后代节点，但保留本身的节点；

remove()，删除节点，彻底删除节点极其后代节点，和此节点相关的东西都不存在了；

detach()，只是让该节点在视图上消失，其在内存上仍然存在可进行任何操作，append()后可重新看见；

节点的复制和替换

clone()，克隆一个节点(包括它的下级所有元素)，只复制其节点结构；

clone(true)，复制节点结构、事件；

replaceWith()，A.replaceWith(B)，用B替换A，返回被删除的元素集合；

replaceAll()，A.replaceWith(B)，用A替换B；

wrap()，A.wrap(B)，给所有的A添加一个父级节点B；

unwrap()，A.wrap(B)，给所有符合A的节点最外层添加一个B节点；

wrapInner()，A.wrapInner(B)，给A节点的内容添加B节点；

wrap()、unwrap()、wrapInner()区别：

<ul>
<li title="apple”>apple</li>
<li title="banner">banner</li>
</ul>

$("li").wrap("<div></div>");
<ul>
<div><li title="apple”>apple</li></div>
<div><li title="banner">banner</li></div>
</ul>

$("li").unwrap("<div></div>");
<ul>
<div>
<li title="apple”>apple</li>
<li title="banner">banner</li>
</div>
</ul>

$("li").wrapInner("<div></div>");
<ul>
<li title="apple”><div>apple</div></li>
<li title="banner"><div>banner</div></li>
</ul>

节点的遍历

children()，查找下一级节点（即子元素）；

children(“:last”)，查找子元素中的第一个；

find()，查找后代节点；

find(“li:first”)，查找所有li后代节点中的第一个；

parent()，查找节点的父节点集合，$(“p”).parent(“:first”).css(“border”, “1px solid red”);返回所有节点p的父节点的集合，并找到第一个父节点加边框；

parents()，查找节点的所有祖先节点集合，parent()只查找父节点，parents()查找所有祖先节点；

clostst()，向上查找，$(“p”).closest(“div”)，从节点p开始往上查找节点div，找到第一个时就停止且将其返回；

next()，同级兄弟节点之间查找，返回节点集合，$(“p”).next(“:first”)，节点p之后的同级第一个节点；

prev()，和next()查找方向相反，往前查找，用法等一致；

siblings()，查找所有同辈节点；

add()，比如我们通过某个选择器获取了一个节点集合，又想再加一个任意的节点到此集合中去并返回最新集合；

$(“p”).add(“#mySpan”).css(“border”, “1px solid red”);为所有的p节点，和id为mySpan的节点加边框；

$(“p”).add(‘#mySpan”).appendTo(“#myDiv”)；将所有p节点和id为mySpan的节点添加到id位myDiv的节点中去，如果这些节点之前在其它位置则将会被移动到目标位置；

each()，循环遍历节点集合；

//给每个p节点加边框
$("p").each(function(index element){
$element.css("border", "1px solid red");
});