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>