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>