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  2  3  5  6     
      7      8      9     14 15 16 17     
     
      18         
      
1
19         
      
220             
       
        21                 
        
1
22                 
        
2
23                 
        
3
24             
       
25         
26         
      
3
27     
     
28     29     30     44 45