苏飞论坛

标题: jQuery内容选择器详解 [打印本页]

作者: 范范 时间: 2018-3-6 20:47
标题: 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
点击查看详情

作者: 范范 时间: 2018-3-6 20:51
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元素

作者: 范范 时间: 2018-3-6 20:57
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类

作者: 范范 时间: 2018-3-6 21:02
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 时间: 2018-3-7 09:59
我只是路过打酱油的。

欢迎光临苏飞论坛 (http://www.sufeinet.com/)