jQuery筛选&文档处理器

简介: jQuery筛选&文档处理器

一、筛选

过滤

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>
目录
相关文章
|
JavaScript 前端开发 开发者
jQuery文档对象模型DOM的实际应用
jQuery文档对象模型DOM的实际应用
58 0
|
前端开发 JavaScript 容器
jQuery03(筛选&文档处理&CSS位置)
jQuery03(筛选&文档处理&CSS位置)
|
JavaScript
jQuery筛选&文档处理
jQuery筛选&文档处理
42 0
|
JavaScript
jQuery筛选&文档处理
jQuery筛选&文档处理
|
JavaScript
jQuery 筛选选择器
jQuery 筛选选择器
53 0
|
JavaScript 前端开发 Java
JQuery的使用(工具方法、CSS属性及方法、筛选、文档处理、事件、动画)后续
元素 . animate({属性:属性值 } , time);缩放:width height移动:top left移动本元素,距离:top = "+=" left = "-="上一章:JQuery(入门~选择器)
jquery文档就绪事件简单写法
jquery文档就绪事件简单写法
|
JavaScript
js基础笔记学习309筛选jquery对象1
js基础笔记学习309筛选jquery对象1
62 0
js基础笔记学习309筛选jquery对象1
|
JavaScript
js基础笔记学习312筛选jquery对象4
js基础笔记学习312筛选jquery对象4
69 0
js基础笔记学习312筛选jquery对象4
|
JavaScript
js基础笔记学习311筛选jquery对象3
js基础笔记学习311筛选jquery对象3
78 0
js基础笔记学习311筛选jquery对象3