jQuery Selectors(选择器)的使用(四-五、内容篇&可见性篇)

下面是关于 “jQuery Selectors(选择器)的使用(四-五、内容篇&可见性篇)” 的完整攻略。

内容篇

内容篇指的是根据元素的内容信息来对元素进行筛选和操作。以下是一些常用的内容选择器：

:contains()

:contains()选择器用来选取包含特定文本的元素。语法为 $(':contains(text)')：

// 选取包含文本“Hello”的元素
$('p:contains("Hello")').css('background-color', 'yellow');

:empty

:empty选择器选取没有子元素的元素。它只匹配那些完全为空的元素，也就是没有任何子元素（包括文本节点）的元素。语法为 $(':empty')：

// 选取所有为空的div元素
$('div:empty').css('background-color', 'gray');

可见性篇

可见性篇是根据元素的CSS可见性属性来对元素进行筛选和操作。以下是一些常用的可见性选择器：

:visible

visible选择器选取所有可见元素。语法为 $(':visible')：

// 隐藏所有不可见元素
$(':not(:visible)').hide();

:hidden

hidden选择器选取所有不可见元素。语法为 $(':hidden')：

// 显示所有隐藏的元素
$(':hidden').show();

以上就是关于 'jQuery Selectors(选择器)的使用(四-五、内容篇&可见性篇)' 的完整攻略。希望能对您有所帮助。

下面是两个示例说明：

示例1

HTML代码：

<div>
  <p>我的邮件地址是：<a href="mailto:[e-mail]">[e-mail]</a></p>
  <p>我的电话号码是：<span>123456789</span></p>
  <p>我的地址是：<span>北京市海淀区xx街道</span></p>
</div>

JavaScript代码使用:contains()选择器选择包含文本'地址'的元素并改变它们的背景色：

$('p:contains("地址")').css('background-color', 'green');

示例2

HTML代码：

<div>
  <p>这是第一段文本</p>
  <p style="display: none;">这是第二段文本</p>
  <p>这是第三段文本</p>
  <div style="display: none;">
    <p>这是第四段文本</p>
  </div>
</div>

JavaScript代码使用:not(:visible)选择器选择所有不可见元素并将它们隐藏：

$(':not(:visible)').hide();