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>