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>