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");
});

---