189 8069 5689

jquery查找后代元素的方法-创新互联

这篇文章将为大家详细讲解有关jquery查找后代元素的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

员工经过长期磨合与沉淀,具备了协作精神,得以通过团队的力量开发出优质的产品。创新互联坚持“专注、创新、易用”的产品理念,因为“专注所以专业、创新互联网站所以易用所以简单”。公司专注于为企业提供成都做网站、网站建设、外贸营销网站建设、微信公众号开发、电商网站开发,成都小程序开发,软件按需策划等一站式互联网企业服务。

一: 查找后代元素三种方法

(1)children();

(2)contents();

(3)find();

所谓的后代元素,就是某个元素的“子元素”、“孙元素”……。孙元素,在前端虽然没这个说法,但是却比较形象,所以这一节使用这一个说法。

二:jquery获取后代元素方法

1.children()方法

在jQuery中,我们可以使用children()方法来查找当前元素的“所有子元素”或“部分子元素”。注意,children()方法只能查找子元素,不能查找其他后代元素。

语法:children(expression)

说明:参数expression表示jQuery选择器表达式,用来过滤子元素。当参数省略时,则将选择所有的子元素。如果参数不省略,则表示选择符合条件的子元素。

举例:




    
    
    


    
子元素
  • 孙元素
  • 孙元素
  • 孙元素
子元素

子元素
  • 孙元素
  • 孙元素
  • 孙元素
子元素

效果如下:

jquery查找后代元素的方法

当我们鼠标移到第1个class为wrapper的div元素上时,在浏览器预览效果如下:

jquery查找后代元素的方法

分析:$(this).children(".test")表示选择当前元素下class为test的“子元素”。在这里我们会发现,虽然也有class为test的“孙元素”,但是使用children()方法却不会将“孙元素”选中。

2.contents()方法

与children()方法相似,contents()方法也是用来查找子内容的,但它不仅获取子元素,还可以获取文本节点、注释节点等。因此读者可以把它视为DOM中childNodes属性的jQuery实现。contents()方法很少用,作为初学者我们可以直接忽略这个方法。

我记得在之前不少教程中,对于常见但不常用的一些知识,都会多少提及一下。很多热心的建议说,站长啊,既然这个知识用不到,浪费篇幅,干嘛提及呢?直接删除都行了。其实嘛,道理很简单:学习知识,知道“哪些不用深入学习”,跟“知道哪些需要深入学习”是同等重要的。一来为了方便读者理清思路,二来以后碰到这个知识了,也有那么点印象不至于手忙脚乱。

3.find()方法

find()方法和children()方法相似,都是用来查找所选元素的后代元素,但是find()方法能够查找所有后代元素,而children()方法仅能够查找子元素。

find()方法和children()方法使用频率差不多,同等重要。大家要认真掌握,并且认真区分。

语法:find(expression)

说明:参数expression表示jQuery选择器表达式,用来过滤子元素。当参数省略时,则将选择所有的子元素。如果参数不省略,则表示选择符合条件的子元素。

举例:




    
    
    


    
子元素
  • 孙元素
  • 孙元素
  • 孙元素
子元素

子元素
  • 孙元素
  • 孙元素
  • 孙元素
子元素

默认情况下,在浏览器预览效果如下:

jquery查找后代元素的方法

当我们鼠标移到第1个class为wrapper的div元素上时,在浏览器预览效果如下:

jquery查找后代元素的方法

分析:$(this).find(".test")表示选择当前元素下的class为test的所有“后代元素”,既包括子元素,也包括孙元素等所有后代元素。大家将find()方法这个例子跟children()方法那个例子对比一下,就能很直观发现两者之间的不同。

与children()方法相似,contents()方法也是用来查找子内容的,但它不仅获取子元素,还可以获取文本节点、注释节点等。因此读者可以把它视为DOM中childNodes属性的jQuery实现。contents()方法很少用,作为初学者我们可以直接忽略这个方法。

关于jquery查找后代元素的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


新闻标题:jquery查找后代元素的方法-创新互联
网页网址:http://cdxtjz.com/article/ipodi.html

其他资讯