内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。内容过滤选择器的介绍详见下表:
内容过滤选择器 | |||
选择器 | 描述 | 返回 | 示例 |
:contains(text) | 选取包含内容为"text"的元素 | 集合元素 | $("div:contains('我')")选取含有'我' 字的<div>元素 |
:empty | 选取不包含子元素或文本的空元素 | 集合元素 | $("div:empty")选取不包含子元素(包括文本) 的<div>元素 |
:has(seletor) | 选择含有选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)") 选取含有<p>元素的<div> 元素 |
:parent | 选择含有子元素或者文本的元素 | 集合元素 | $("div:parent")选取包含子元素或文本的<div> 元素 |
内容过滤选择器示例 | |
功能 | 代码 |
改变含有文字"di"的<div>元素的背景色 | $("div:contains('di')").css("background","red") |
改变不包含子元素或文本的<div>元素的背景色 | $("div:empty").css("background","red") |
改变含有class为mini的<div>元素的背景色 | $("div:has(mini)").css("background","red") |
改变含有子元素或文本的<div>元素 | $("div:parent").css("background","red") |