Jquery 选择器之内容选择器

评论(1)

作为选择器之一的内容选择器,虽然用处不大,但在 Jquery 中却是比较神奇的存在(至少我是这么觉得的),内容选择器主要有四种::contains(text) 、:empty 、 :has(selector) 、:parent ,这其中的原理以我现在的水平是无法探究的,但是用的话,还是很简单的。

定义

  1. :contains(text)
    概述:匹配包含给定文本的元素
  2. :empty
    概述:匹配所有不包含子元素或者文本的空元素
  3. :has(selector)
    概述:匹配含有选择器所匹配的元素的元素
  4. :parent
    概述:匹配含有子元素或者文本的元素

PS:这里需要提到的是,因为 Javascript 是区分大小写的,所以内容选择器是区分大小写的。

代码演示

//假设我们有一个网页,包含下列代码(HTML 代码)
<ul id="testul2">
  <li>PangBu</li>
  <li>XiangZi</li>
  <li>Hello</li>
  <li>
    <a href="http://pangbu.com/">PangBu.com</a>
  </li>
  <li>li.5
    <ol>
      <li style="margin-left: 30px;">1</li>
      <li style="margin-left: 30px;">2</li>
     </ol>
  </li>
  <li>li.6</li>
  <li></li>
</ul>
 
$("div:contains('John')")
// :contains(text) 选择器
$("li:contains('PangBu')")
//我们将得到两个li元素分别是第一个和第四个
//还有第四个是因为 第四个li元素中有一个a元素中包含 PangBu
 
// :empty 选择器
$("li:empty")
//我们将得到第七个li元素
 
// :has(selector) 选择器
$("li:has(a)")
//将获取第四个li元素 因为里面含有 a 标签
 
// :parent 选择器
$("li:parent")
//将获取除了第七个li元素外的所有li元素

实例

《Jquery 内容选择器 演示》

你可以将上述的选择器填入输入栏中,再点提交,被选中的元素字体颜色会变红。

如:输入 li:contains(‘XiangZi’) 将会把第二个li元素的字体颜色变红。(注意区分大小写)

演示比较简陋,但挺好玩的。





转载请注明转自: Jquery 选择器之内容选择器