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">220 <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>
