jQuery选择器(四)

最新推荐文章于 2022-03-25 21:03:13 发布

原创最新推荐文章于 2022-03-25 21:03:13 发布 · 516 阅读

0 ·

CC 4.0 BY-SA版权

16_Js 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了内容过滤选择器在jQuery中的应用，包括使用:contains(text)、:empty、:has(selector)和:parent等选择器来选择特定类型的DOM元素。通过示例代码展示了如何根据这些选择器来修改页面元素的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

四、内容过滤选择器
1、:contains(text)
选择器：E:contains(text) //E是指DOM元素，:contains(text)包含的文本，text是指定查找的字符串
描述：选取含有文本内容为“text”的元素
返回：集合元素
示例：改变含有文本为“John”的div元素的背景色

<script type="text/javascript">
   $(document).ready(function(){
      $('div:contains(John)').css('background','#f36');
   });
</script>

2、:empty
选择器：E:empty //其中E为DOM元素，:empty是指DOM元素中不包含任何子元素或文本
描述：选取不含任何子元素或文本的空元素
返回：集合元素
示例：改变不含子元素（包括不含文本元素）的div的背景色

<script type="text/javascript">
   $(document).ready(function(){
      $('div:empty').css('background','#f36');
   });
</script>

3、:has(selector)
选择器：E:has(selector) //其中E为有效果DOM元素标签，:has(selector)含有一个选择器，selector用于筛选的选择器
描述：选取含有选择器所匹配的元素的元素
返回：集合元素
示例：改变含有子元素P的div元素的背景色

<script type="text/javascript">
   $(document).ready(function(){
      $('div:has(p)').css('background','#f36');
   });
</script>

4、:parent
选择器：E:parent //E为有效的DOM元素标签，:parent含有子元素或文本内容
描述：选取含有子元素或者文本的元素标签
返回：集合元素
示例：改变含有子元素或文本内容的div的背景色

<script type="text/javascript">
   $(document).ready(function(){
      $('div:empty').css('background','#f36');
   });
</script>