摘要:使用jQuery内容过滤选择器选择元素实例代码如下:<html xmlns="https://www.w3.org/1999/xhtml"> <head> <!-- 内容过滤选择器:根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种 --> <title></title> <!-- 使用jQuery内容过滤选择器选择元素:在页面中,根据需要创建四个<p>标记,并在其中的<p>中新建一个<span>标记,其余<p>标记中输入内容(或为空),通过内容过滤器获取指定的元素,并显示在页面中。--> <script src="jquery-1.9.1.js" type="text/javascript"></script> <style type="text/css"> body{font-size:12px;text-align:center} p{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none} span{float:left;border:solid 1px #ccc;margin:8px;width:45px;height:45px;background-color:#eee} </style> <script type="text/javascript"> $(function () { //显示包含给定文本的元素 $("p:contains('A')").css('display','block'); }) $(function(){ //显示所有不包含子元素或者文本的空元素 $('p:empty').css('display','block'); }) $(function () { //显示含有选择器所匹配的元素 $('p:has(span)').css('display', 'block'); }) $(function () { //显示含有子元素或者文本的元素 $('p:parent').css('display', 'block'); }) </script> <!-- 注:在:contains(text)内容过滤选择器中,如果是查找字母,则有大小写的区别--> </head> <body> <p>ABCD</p> <p><span></span></p> <p>EFAH</p> <p></p> </body> </html>

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-使用jQuery内容过滤选择器选择元素实例讲解

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

使用jQuery内容过滤选择器选择元素实例代码如下:

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<!--
内容过滤选择器:根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位
jQuery选择器详解
根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种
-->
<title></title>
<!-- 使用jQuery内容过滤选择器选择元素:在页面中,根据需要创建四个<p>标记,并在其中的<p>中新建一个<span>标记,其余<p>标记中输入内容(或为空),通过内容过滤器获取指定的元素,并显示在页面中。-->
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
p{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none}
span{float:left;border:solid 1px #ccc;margin:8px;width:45px;height:45px;background-color:#eee}
</style>
<script type="text/javascript">
$(function () { //显示包含给定文本的元素
$("p:contains('A')").css('display','block');
})
$(function(){ //显示所有不包含子元素或者文本的空元素
$('p:empty').css('display','block');
})
$(function () { //显示含有选择器所匹配的元素
$('p:has(span)').css('display', 'block');
})
$(function () { //显示含有子元素或者文本的元素
$('p:parent').css('display', 'block');
})
</script>
<!-- 注:在:contains(text)内容过滤选择器中,如果是查找字母,则有大小写的区别-->
</head>
<body>
<p>ABCD</p>
<p><span></span></p>
<p>EFAH</p>
<p></p>
</body>
</html>

使用jQuery内容过滤选择器选择元素实例代码如下:

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<!--
内容过滤选择器:根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位
jQuery选择器详解
根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种
-->
<title></title>
<!-- 使用jQuery内容过滤选择器选择元素:在页面中,根据需要创建四个<p>标记,并在其中的<p>中新建一个<span>标记,其余<p>标记中输入内容(或为空),通过内容过滤器获取指定的元素,并显示在页面中。-->
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
p{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none}
span{float:left;border:solid 1px #ccc;margin:8px;width:45px;height:45px;background-color:#eee}
</style>
<script type="text/javascript">
$(function () { //显示包含给定文本的元素
$("p:contains('A')").css('display','block');
})
$(function(){ //显示所有不包含子元素或者文本的空元素
$('p:empty').css('display','block');
})
$(function () { //显示含有选择器所匹配的元素
$('p:has(span)').css('display', 'block');
})
$(function () { //显示含有子元素或者文本的元素
$('p:parent').css('display', 'block');
})
</script>
<!-- 注:在:contains(text)内容过滤选择器中,如果是查找字母,则有大小写的区别-->
</head>
<body>
<p>ABCD</p>
<p><span></span></p>
<p>EFAH</p>
<p></p>
</body>
</html>

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-使用jQuery内容过滤选择器选择元素实例讲解

全部内容,希望文章能够帮你解决

js实例教程-使用jQuery内容过滤选择器选择元素实例讲解

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过