jQuery代码节选(筛选)

筛选
...
8.not()
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>

console.log($("p").not($('.p1')));
从获取的p元素集合中除去拥有 class='p1'

9.slice()
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>

console.log($("p").slice(0,1));
console.log($("p").slice(0,-2));

10.children()
<div>
<p class="p1">1</p>
</div>
<div>
<p class="p2">2</p>
</div>
<p class="p3">3</p>

console.log($("div").children('.p1'));
console.log($("div").children());

11.closest()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>
<p>我是兄弟p</p>

console.log($(".father p").closest("div"));
由自身开始,向上级检索,最终获得div.father and div.children 的集合

12.find()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>
<p>我是兄弟p</p>

console.log($("div").find("p"));
此行代码的功能与$("div p")相同

13.next()
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>

console.log($(".p1").next());
选择 p.p1 后面的一个同级元素
14.nextAll()
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>

console.log($(".p1").nextAll());
选择 p.p1 后面的所有的同级元素

15.nextUntil()
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>
<p class="p4">4</p>
<p class="p5">5</p>
<p class="p6">6</p>

console.log($(".p1").nextUntil('.p4'));
选择p.p1到p.p4中间的p.2、p.3
从自身起(不包含自身)向下同级检索,直到满足条件停下(不包含条件元素),最终将检索过得元素合成一个集合

16.parent()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>
<p>我是兄弟p</p>

console.log($("p").parent('.father'));
查找拥有类.father并包含p的元素

17.parents()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>
<p>我是兄弟p</p>

console.log($("p").parents());
p元素的所有上级元素,包括body、html

18.parentsUntil()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>

console.log($("p").parentsUntil('.father'));
功能与nextUntil()相似,向上查找所有上级元素,直到满足条件停下。

19.prev()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>
<p>我是兄弟p</p>

console.log($("p").prev());
选择p元素前面的一个同级元素

20.prevAll()
<ul>
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>

console.log($(".li2").prevAll());
选择p元素前面的所有的同级元素

21.prevUntil()
<ul>
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>

console.log($(".li2").prevUntil());
与nextUntil()相似,向上查找所有同级元素,直到满足条件停下。

22.siblings()
<ul>
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>

console.log($(".li2").siblings());
选择li.li2所有同级元素,但自己排外

23.add()
<ul class="ul1">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
<ul class="ul2">
<li class="li4">4</li>
<li class="li5">5</li>
<li class="li6">6</li>
</ul>

console.log($(".ul1").add('ul2'));
连接两个集合

24.addBack()
<ul class="ul1">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>

console.log($(".li1").next().addBack());
选择li.li1后一个同级元素并用addBack()将其与原本的li.li1合在一个形成一个集合

25.contents()
<ul class="ul1">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>

console.log($(".ul1").contents());
获取ul.ul1中的所有节点(包括文本节点)

26.end()
<ul class="ul1">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>

$(".ul1").find(".li2").css('color','red').end().css('backgroundColor','blue');
通过ul.ul1找到li.li2改变其字体颜色,然后通过end()返回原先的集合改变其背景色

 

posted @ 2016-09-22 21:43  &amp;nbsp  阅读(241)  评论(0编辑  收藏  举报