微信扫一扫打赏支持

js进阶 11-18 jquery中操作选择器的方法有哪些

js进阶 11-18 jquery中操作选择器的方法有哪些

一、总结

一句话总结：add()、addBack()、end()

 

1、add()方法是干嘛的，举一例？

将add()方法后选择器选择的jquery对象加到add()方法之前选择器之中

43                 $("p").css("background","#ccc").add('li').css("color","red")

 

2、addBack()方法是干嘛的，举一例？

将上一个选择器选择的jquery对象插入到当前选择器中

46                 $(".red").nextAll().addBack().css("background-color", "red");

 

 

3、end()方法是干嘛的，举一例？

结束当前选择器，返回到上一个选择器

51                 $('li').filter(':even').css("background-color", "red").end().filter(':odd').css("background-color", "orange");

 

 

 

二、jquery中操作选择器的方法有哪些

1、相关知识

  • add() 方法将元素添加到匹配元素的集合中。
  • addBack()添加堆栈中元素集合到当前集合，一个选择性的过滤选择器。
  • end() 结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。
  • map() 把当前匹配集合中的每个元素传递给函数，返回值是 jQuery 封装的数组。
  • closest()方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

    closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤。

  • offsetParent()获得用于定位的第一个父元素。即：返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。

 

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style>
10         li{
11             margin-top: 5px;width: 150px;
12         }    
13     </style>
14 </style>
15 </head>
16 <body>
17     <div>
18         <p>段落1</p>
19         <p>段落2</p>
20         <p>段落3</p>
21     </div>
22     <ol>
23         <li>列表项0</li>
24         <li>列表项1</li>
25         <li>列表项2</li>
26         <li class="red">列表项3</li>
27         <li>列表项4</li>
28         <li>列表项5</li>
29     </ol>
30     <input id="btn1" type="button" value='add'>
31     <input id="btn2" type="button" value='addBack'>
32     <input id="btn3" type="button" value='end'>
33     <input id="btn4" type="button" value='map'>
34     <input id="btn5" type="button" value='closest'>
35     <input id="btn6" type="button" value='offsetParent'>
36     <script type="text/javascript">
37         $(function(){
38             $('#btn1').click(function(){
39                 //这里的add()相当于和的意思
40                 // $("p").css("color","red")
41                 // $("li").css("color","red")
42                 // $("p,li").css("color","red")
43                 $("p").css("background","#ccc").add('li').css("color","red")
44             })
45             $('#btn2').click(function(){
46                 $(".red").nextAll().addBack().css("background-color", "red");
47             })
48             $('#btn3').click(function(){
49                 // $('li').filter(':even').css("background-color", "red");
50                 // $('li').filter(':odd').css("background-color", "orange");
51                 $('li').filter(':even').css("background-color", "red").end().filter(':odd').css("background-color", "orange");
52             })
53         })
54     </script>
55 </body>
56 </html>

 

 

 

 

 

 

 
posted @ 2018-06-28 09:37  范仁义  阅读(331)  评论(0)  编辑  收藏  举报