频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
使用jQuery内容过滤选择器选择元素
2013-04-19 16:30:37           
收藏   我要投稿

<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>

点击复制链接 与好友分享!回本站首页
相关TAG标签 内容过滤 元素
上一篇:使用jQuery基本过滤选择器
下一篇:jquery简单导航功能
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站