jQuery筛选&文档处理器

目录

一、筛选

过滤

1.first()：获取匹配的第一个元素

2.last()：获得匹配的最后一个元素

3.eq(N)：获取匹配的第N或-N个元素

4.filter(selector)：筛选出与指定表达式匹配的元素集合

5.has(selector)：筛选出包含特定特点的元素的集合

6.not(selector)：筛选出不包含特定特点的元素的集合

查找

1.children()：子标签中找

2.find()：后代标签中找

3.parent()：父标签

4.prevAll()：前面所有的兄弟标签

5.nextAll()：后面所有的兄弟标签

6.siblings()：前后所有的兄弟标签

二、文档处理

1.增

内部插入

append()：将内容添加到指定的元素后面

appendTo()：和append()颠倒

prepend()：将内容添加到指定元素前面

prependTo():和prepend()颠倒

1.2-外部插入

after()：在匹配元素之后插入内容

before()：在匹配元素之前插入内容

2.删

empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）

remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）

3.改

replaceWith()：将所有匹配的元素替换成指定的内容

---

一、筛选

过滤

1.first()：获取匹配的第一个元素

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul

$('li').first()

//执行结果:
<li>list item 1</li>

2.last()：获得匹配的最后一个元素

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul

$('li').first()

//执行结果:
<li>list item 5</li>

3.eq(N)：获取匹配的第N或-N个元素

<p> 因你太美ikun1</p>
<p> love  me</p>
<p> 因你太美ikun2</p>

$("p").eq(1)

//执行结果:
 <p> love  me</p>

4.filter(selector)：筛选出与指定表达式匹配的元素集合

<p>Hello</p>
<p>Hello Again</p>
<p class="selected">And Again</p>

$("p").filter(".selected")

//执行结果:
<p class="selected">And Again</p>

5.has(selector)：筛选出包含特定特点的元素的集合

<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

$('li').has('ul');
//执行结果:
 <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
 </ul>

6.not(selector)：筛选出不包含特定特点的元素的集合

<p>小黑子</p>
<p id="selected">ikun</p>

$("p").not( $("#selected")[0] )

//执行结果:
<p>ikun</p>

查找

1.children()：子标签中找

• 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

<p>Hello</p>
<div>
<span>Hello Again</span>
<p>Hello</p>
</div>
<p>And Again</p>

$("div").children()

//执行结果:
<span>Hello Again</span>
<p>Hello</p>

2.find()：后代标签中找

• 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
• 所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

<p><span>Hello</span>, how are you?</p>

$("p").find("span")

//执行结果:
<span>Hello</span>

3.parent()：父标签

• 取得一个包含着所有匹配元素的唯一父元素的元素集合。

<div>
<p>Hello1</p>
<p>Hello2</p>
<p>Hello3</p>
</div>

$("p").parent()

//执行结果:
<div>
<p>Hello1</p>
<p>Hello2</p>
<p>Hello3</p>
</div>

4.prevAll()：前面所有的兄弟标签

• 查找当前元素之前所有的同辈元素

<div></div>
<div></div>
<div></div>
<div></div>

$("div:last").prevAll().addClass("before");

//执行结果:
<div class="before"></div>
<div class="before"></div>
<div class="before"></div>

5.nextAll()：后面所有的兄弟标签

• 查找当前元素之后所有的同辈元素。

<div></div>
<div></div>
<div></div>
<div></div>

$("div:first").nextAll().addClass("after");

//执行结果:
<div class="after"></div>
<div class="after"></div>
<div class="after"></div> 

6.siblings()：前后所有的兄弟标签

• 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

<p>Hello</p>
<div>
<span>Hello Again</span>
</div>
<p>And Again</p>

$("div").siblings()；

//执行结果:
<p>Hello</p>
<p>And Again</p>

二、文档处理

1.增

内部插入

append()：将内容添加到指定的元素后面

<p>I would like to say: </p>

$("p").append("<b>Hello</b>");

//执行结果:
 <p>I would like to say: <b>Hello</b></p>

appendTo()：和append()颠倒

<p>I would like to say: </p>
<div></div><div></div>

$("p").appendTo("div");

//执行结果:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

prepend()：将内容添加到指定元素前面

<p>I would like to say: </p>

$("p").prepend("<b>Hello</b>");

//执行结果:
 <p><b>Hello</b>I would like to say: </p>

prependTo():和prepend()颠倒

<p>I would like to say: </p><div id="foo"></div>

$("p").prependTo("#foo");

//执行结果:
<div id="foo"><p>I would like to say: </p></div>

1.2-外部插入

after()：在匹配元素之后插入内容

<p>I would like to say: </p>

$("p").after("<b>Hello</b>");

//执行结果:
<p>I would like to say: </p><b>Hello</b>

before()：在匹配元素之前插入内容

<p>I would like to say: </p>

$("p").before("<b>Hello</b>");

//执行结果:
<b>Hello</b><p>I would like to say: </p>

2.删

empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

$("p").empty();

//执行结果:
<p></p>

remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）

<p>Hello</p> how are <p>you?</p>

$("p").remove();

//执行结果:
how are

3.改

replaceWith()：将所有匹配的元素替换成指定的内容

<p>Hello</p><p>cruel</p><p>World</p>

$("p").replaceWith("<b>Paragraph. </b>");

//执行结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>