js進階 11-16 jquery如何查找元素的父親、祖先和子代、后代
一、總結
一句話總結：過濾或者查找的方法里面可以帶參數進行進一步的選擇。
1、parent()和parents()方法的區別是什么（父親和祖先）？
parent()找父親，parents()找祖先
父親只有一個，所以是單數，祖先就有很多個了，所以是復數
- parent() 獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）。
- parents() 獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選）。
34 // $('span').parent('.red').css('border','solid red 2px') 35 // $('.sp').parents('li').css('border','solid red 2px')
2、parentsUntil()如何使用？
方法的參數里面可以是標簽和選擇器，和juqery其它方法里面的東西一樣
parentsUntil() 獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。
36 $('.sp').parentsUntil('.inner').css('border','solid red 2px')
3、children()方法和contents()方法的異同（子代）？
都是找所有子元素，contents()范圍更廣，包括文本和注釋節點
39 // $('.inner').children('.red').css('border','solid red 2px')
4、jquery中如何查找一個元素的后代（后代）？
find()方法
find() 獲得當前匹配元素集合中每個元素的后代，由選擇器進行篩選。
40 $('.main').find('span').css('border','solid red 2px')
二、jquery如何查找元素的父親、祖先和子代后代
1、相關知識
查找祖先元素
- parent() 獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）。
- parents() 獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選）。
- parentsUntil() 獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。
查找后代元素
- children() 獲得匹配元素集合中每個元素的所有子元素。
- find() 獲得當前匹配元素集合中每個元素的后代，由選擇器進行篩選。
- contents() 獲得匹配元素集合中每個元素的子元素，包括文本和注釋節點。
不常用，了解即可
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: 25px;width: 150px; 12 } 13 </style> 14 </style> 15 </head> 16 <body> 17 <ol class="main"> 18 <li>1</li> 19 <li class="li2">2 20 <ul class="inner"> 21 <li><span>1</span></li> 22 <li class="red"><span class="sp">2</span></li> 23 <li><span>3</span></li> 24 </ul> 25 </li> 26 <li>3</li> 27 </ol> 28 <input id="btn1" type="button" value='查找祖先'> 29 <input id="btn2" type="button" value='查找后代'> 30 <script type="text/javascript"> 31 $(function(){ 32 $('#btn1').click(function(){ 33 // $('.sp').parent().css('border','solid red 2px') 34 // $('span').parent('.red').css('border','solid red 2px') 35 // $('.sp').parents('li').css('border','solid red 2px') 36 $('.sp').parentsUntil('.inner').css('border','solid red 2px') 37 }) 38 $('#btn2').click(function(){ 39 // $('.inner').children('.red').css('border','solid red 2px') 40 $('.main').find('span').css('border','solid red 2px') 41 }) 42 }) 43 </script> 44 </body> 45 </html>