首页 > 代码库 > 过滤选择器——内容过滤选择器
过滤选择器——内容过滤选择器
内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字类容可以模糊或绝对匹配进行元素定位，其详细说明如表：
| 选择器 | 功能 | 返回值 |
| :contains(text) | 获取包含给定文本的元素 | 元素集合 |
| :empty | 获取所有不包含子元素或者文本的空元素 | 元素集合 |
| :has(selector) | 获取含有选择器所匹配的元素的元素 | 元素集合 |
| :parent | 获取含有子元素或者文本的元素 | 元素集合 |
示例——使用jQuery内容过滤选择器选择额元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0 2 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title>使用jQuery层次选择器</title> 7 <script type="text/javascript" src="http://www.mamicode.com/software/jquerys/jquery-1.7.2.js"></script> 8 <style type="text/css"> 9 body{font-size:12px;text-align:center}10 div{float:left;border:solid 1px #ccc;margin:8px;11 width:65px;height:65px;display:none}12 span{float:left;border:solid 1px #ccc;margin:8px;13 width:45px;height:45px;background-color:#eee}14 </style>15 <script type="text/javascript">16 17 $(function(){ // 显示包含给定文本的元素18 //$("div:contains(‘A‘)").css("display","block");19 //$("div:contains(‘D‘)").css("display","none");20 })21 22 $(function(){ // 显示所有不包含子元素或者文本的空元素23 // 显示所有不包含子元素或者文本的空元素24 //$("div:empty").css("display","block");25 //$("div:empty").css("display","none");26 }); 27 28 $(function(){ // 显示含有选择器所匹配的元素29 //$("div:has(span)").css("display","block");30 //$("div:has(span)").css("display","none");31 }) 32 33 $(function(){ // 显示含有子元素或者文本的元素34 //$("div:parent").css("display","block");35 //$("div:parent").css("display","none");36 }) 37 </script>38 </head>39 <body>40 <div>ABCD</div>41 <div><span></span></div>42 <div>EFaH</div>43 <div></div>44 </body>45 </html>
过滤选择器——内容过滤选择器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。