js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素
一、总结
一句话总结：closest()方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。offsetParent()获得用于定位的第一个父元素。
1、closest()和parents()的主要区别是什么？
1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤。
2、jquery中如何取出jquery对象中的dom对象？
get()方法，参数可有可无，有的话为索引
67 //通过get()方法来获取jQuery对象中封装的整个数组或数组的某个元素
68 // alert(arr.get())
69 //alert(arr.get(1))
70 //alert(arr.get().join('-'))
71 alert(arr.get().reverse())
3、map()方法是干什么的？
map() 把当前匹配集合中的每个元素传递给函数，返回值是 jQuery 封装的数组。
59 var arr=$('input').map(function(){
60 return $(this).val()
61 })
62
63 //alert(arr.length)
4、jquery中用什么表示定位？
offset
比如：offsetParent()获得用于定位的第一个父元素。即：返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。
77 $('#btn6').click(function(){
78 $('span').offsetParent().css("border", "solid green 1px");
79 })
二、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 style="position: relative;"> 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 29 <ol> 30 <li>列表项1.1</li> 31 <li><span>列表项1.2</span></li> 32 </ol> 33 </li> 34 </ol> 35 <input id="btn1" type="button" value='add'> 36 <input id="btn2" type="button" value='addBack'> 37 <input id="btn3" type="button" value='end'> 38 <input id="btn4" type="button" value='map'> 39 <input id="btn5" type="button" value='closest'> 40 <input id="btn6" type="button" value='offsetParent'> 41 <script type="text/javascript"> 42 $(function(){ 43 $('#btn1').click(function(){ 44 //这里的add()相当于和的意思 45 // $("p").css("color","red") 46 // $("li").css("color","red") 47 // $("p,li").css("color","red") 48 $("p").css("background","#ccc").add('li').css("color","red") 49 }) 50 $('#btn2').click(function(){ 51 $(".red").nextAll().addBack().css("background-color", "red"); 52 }) 53 $('#btn3').click(function(){ 54 // $('li').filter(':even').css("background-color", "red"); 55 // $('li').filter(':odd').css("background-color", "orange"); 56 $('li').filter(':even').css("background-color", "red").end().filter(':odd').css("background-color", "orange"); 57 }) 58 $('#btn4').click(function(){ 59 var arr=$('input').map(function(){ 60 return $(this).val() 61 }) 62 63 //alert(arr.length) 64 // var arr2=[1,2,3,'A','B','C'] 65 // alert(arr) 66 //map()函数的返回值为jQuery类型 67 //通过get()方法来获取jQuery对象中封装的整个数组或数组的某个元素 68 // alert(arr.get()) 69 //alert(arr.get(1)) 70 //alert(arr.get().join('-')) 71 alert(arr.get().reverse()) 72 }) 73 $('#btn5').click(function(){ 74 // $('span').parents('li').css("border", "solid green 1px"); 75 $('span').closest('li').css("border", "solid green 1px"); 76 }) 77 $('#btn6').click(function(){ 78 $('span').offsetParent().css("border", "solid green 1px"); 79 }) 80 }) 81 </script> 82 </body> 83 </html>