内容过滤选择器
内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或者绝对匹配进行元素定位,详细如下:
选择器 | 功能 | 返回值 |
---|---|---|
:contains(text) | 获取包含给定文本的元素 | 元素集合 |
:empty | 获取所有不包含子元素或者文本的空元素 | 元素集合 |
:has(selector) | 获取含有选择器所匹配的元素的元素 | 元素集合 |
:parent | 获取获取含有子元素或者文本的元素 | 元素集合 |
下面将通过示例来讲解如何通过内容过滤选择器定位DOM元素的方法。
示例如下:
(1)描述
页面中,创建四个div标记,并在其中一个div中新建一个span标记,其余div标记中输入内容或空,通过内容过滤选择器获取元素,并显示在页面中。
(2)代码实现
...省略代码
<script type="text/javascript">
$(function(){ //显示包含给定文本的元素
$("div:contains('Div')").css("display","block");
})
$(function(){ //显示所有不包含子元素或者文本的空元素
$("div:empty").css("display","block");
})
$(function(){ //显示含有选择器所匹配的元素
$("div:has(span)").css("display","block");//显示含有span标记的元素
})
$(function(){ //显示含有子元素或者文本的元素
$("div:parent").css("display","block");
})
</script>
...省略代码
<div>Div1</div>
<div>2</div>
<div></div>
<div><span>Span</span></div>
...省略代码
任务:把上面jQuery中的操作一一的在代码框中重现。