jQuery内容选择器详解

范范

jQuery的内容选择器，有如下几种：
1.  :contains(text)
2.  :empty
3.  :has(selector)
4.  :parent

下面是几个内容选择器的详解，在具体的html中，详解以上内容选择器的用法

1. :contains(text)
     简介： 匹配包含给定文本的所有元素   即（找到所有包含‘text’的元素）

实例如下：
html：

[HTML] 纯文本查看 复制代码

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

jQuery如下：

[JavaScript] 纯文本查看 复制代码

$("div:contains('John')")

输出的结果如下：

[HTML] 纯文本查看 复制代码

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

2.  :empty
     点击查看详解

3.  :has(selector)
     点击查看详解

4.  :parent           
点击查看详情

范范

2.  :empty
     简介： 匹配所有的 不包含子元素或者文本的空元素

实例如下：
html：

[HTML] 纯文本查看 复制代码

<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

jquery：

[JavaScript] 纯文本查看 复制代码

$("td:empty")

输出结果：

[HTML] 纯文本查看 复制代码

[ <td></td>, <td></td> ]

如上所示，找到所有的空的td元素

范范

3.  :has(selector)
     简介： 匹配所有包含 选择器‘selector’元素的 元素  如下（$('div:has(li)'), 匹配所有的包含li元素的div元素）


实例如下：
html：

[HTML] 纯文本查看 复制代码

<div><p>Hello</p></div>
<div>Hello again!</div>

jquery：

[JavaScript] 纯文本查看 复制代码

$("div:has(p)").addClass("test");

输出结果：

[HTML] 纯文本查看 复制代码

[ <div class="test"><p>Hello</p></div> ]

如上所示，给所有的包含p元素的div元素添加一个test类

范范

4.  :parent
     简介： 匹配所有的 含有子元素或者文本的元素

实例如下：
html：

[HTML] 纯文本查看 复制代码

<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

jquery：

[JavaScript] 纯文本查看 复制代码

$("td:parent")

输出结果：

[HTML] 纯文本查看 复制代码

[ <td>Value 1</td>, <td>Value 2</td> ]

如上所示，找到所有含有子元素或者文本的 td 元素

sufei

我只是路过打酱油的。