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>