jQuery粗略源码解析7 DOM遍历和操作

1 DOM遍历

• .parent() :匹配元素中每个元素的父元素，可以传入选择器过滤。
• parents()：匹配元素的祖父元素，可以传入选择器过滤。
• parentsUntil() 匹配元素的祖父元素直到为止，可以传入选择器过滤。

<div>
    <p>HAHA
        <a>连接</a>
    </p>
    <span>bolala</span>
</div>
<div>
    <span>hashiqi</span>
</div>
<script>
    console.log($("span,p").parent());//两个DIV
    console.log($("a").parents());//p div body html
    console.log($("a").parentsUntil("body"));//p div
</script>

• next() 之后紧邻的元素
• nextAll() 之后的所有兄弟元素
• nextUntil() 之后的所有兄弟元素直到为止
• prev() 之前紧邻的元素
• prevAll() 之前的所有兄弟元素
• prevUntil() 之前的所有兄弟元素直到为止
• sibling() 其他的兄弟元素

<ul>
    <li id="1"></li>
    <li id="2"></li>
    <li id="3"></li>
    <li id="4"></li>
    <li id="5"></li>
</ul>
<script>
    console.log($("#2").next());//#2
    console.log($("#2").nextAll());//#3 #4 #5
    console.log($("#2").nextUntil("#4"));//#3
    console.log($("#5").prev());//#4
    console.log($("#5").prevAll());//#4 #3 #2 #1
    console.log($("#5").prevUntil("#1"));//#4 #3 #2
    console.log($("#2").siblings())//#1 #3 #4 #5
</script>

• children() 匹配元素的子元素，可以传入选择器过滤。
• contents() 匹配元素的子元素，包括文本节点和注释节点，可以传入选择器过滤。

<div>
    <ul>
        <li>链接1<a href="">haha</a></li>
        <li>链接2<a href="">bolala</a></li>
    </ul>
</div>
<script>
    console.log($("li:first").children());//链接
    console.log($("li:first").contents());//文本和链接
</script>

---

2 DOM操作

2.1 插入

• append() appendTo() 内部末尾添加
• prepend() prependTo() 内部前置添加
• after() insertAfter() 末尾添加
• before insertBefore() 前置添加
• html() 获取或插入html
• text() 获取或插入文本内容

<ul>
    <li></li>
    <li></li>
    <li>选项三</li>
    <li>选项四</li>
</ul>
<script src="../jquery-1.7.1.js"></script>
<script>
    $("li:first").append("第一项");
    $("<a>连接2</a>").appendTo($("li:eq(1)"));
    $("li:eq(2)").prepend("新添：");
    $("><p>新添加：</p>").prependTo($("li:eq(3)"));
    $("ul").after("<h3>haha</h3>").before("hashiqi");
    console.log($("h3").html("<p>帅哥</p>").text());
</script>

2.2 删除

• remove() 删除匹配元素，数据，事件
• empty() 移除后代元素，数据，事件
• detach() 移除匹配元素，保留数据和事件

2.3 克隆

• clone() 复制 DOM元素

<div><p>bolala</p></div>
<div></div>
<script src="../jquery-1.7.1.js"></script>
<script>
   $("p").clone().prependTo("div:eq(1)");
</script>

2.4 替换

• replaceWith() replaceAll() 替换

<ul>
    <li id="1">选项1</li>
    <li id="2">选项2</li>
    <li id="3">选项3</li>
    <li id="4">选项4</li>
</ul>
<script src="../jquery-1.7.1.js"></script>
<script>
    $("#4").replaceWith($("#1"));//用1替换4
    $("#2").replaceAll($("#3"));//2替换3
</script>

2.5 包裹元素

• wrap() 包裹每个匹配的元素
• wrapAll() 用单个元素包裹所有匹配的元素
• wrapInner() 包裹每个匹配元素的内容
• unwrap() 移除父元素

<div>
    <a href="">连接1</a>
    <a href="">连接2</a>
    <a href="">连接3</a>
    <a href="">连接4</a>
</div>
<script>
    $("a").wrapInner("<b></b>").wrap("<li></li>");
    $("li").wrapAll("<ul></ul>");
    $("ul").unwrap()
</script>