过滤选择器:过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、表单过滤
内容过滤
-
:contains(text) 选取包含给定文本的元素
-
:empty 选取不包含任何子元素或者文本的空元素
-
:parent 选取含有子元素或者文本的元素
-
:has(selector) //选取所有含有选择器所匹配的元素的元素
<div>这个是一个有内容的div</div> <br /> <div><p>这是一个有p元素的div</p></div> <br /> <div></div> <br /><br /> <input type="button" value="选取含有文本“div”的div元素." id="btn1"/> <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/> <input type="button" value="选取含有P元素的div." id="btn3"/> <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/> <script type="text/javascript"> //选取含有文本“div”的div元素 $("#btn1").click(function(){ $('div:contains("div")').css({ backgroundColor: 'red' }); console.log($('div:contains("div")')) }) //选取不包含子元素(或者文本元素)的div空元素. $('#btn2').click(function(){ $('div:empty').css({ backgroundColor: 'green' }); console.log($('div:empty')) }) //选取含有P元素的div $('#btn3').click(function(){ $('div:has("p")').css({ backgroundColor: 'yellow' }); console.log($('div:has("p")')) }) //选取含有子元素(或者文本元素)的div元素. $('#btn4').click(function(){ $('div:parent').css({ backgroundColor: 'blue' }); console.log($('div:parent')) }) </script>
可见性过滤
-
:hidden 选取所有不可见或者type为hidden的元素
$(“input:hidden”) //选取所有type为hidden的元素
$(“div:hidden”) //选取所有隐藏的div -
:visible选取所有可见
$(“div:visible”) //选取所有可见的div<div>显示的DIV</div> <div style="display:none;">隐藏的DIV</div> <br /><br /> <button id="btn_visible"> 选取所有可见的div元素 </button> <button id="btn_hidden"> 选取所有不可见的div元素 </button> <script type="text/javascript"> $("#btn_visible").click(function(){ $('div:visible').css({ backgroundColor: 'red' }); }) $('#btn_hidden').click(function(){ $('div:hidden').css({ backgroundColor: 'yellow', display: 'block'}); }) </script>
属性过滤
attribute表示属性名 value表示属性值
- [attribute] 选取包含给定属性的元素
- [attribute=value]选取包含给定属性的值的元素
- [attribute!=value] 选取不包含给定属性的值的元素
- [attribute^=value] 选取以value为开头的元素
- [attribute$=value] 选取以value为结尾的元素
- [attribute*=value] 选取属性中包含value的元素
- [attribute=value] [attribute = value] 选取同时满足多个属性选择器条件的元素
<p><a href="">首页</a></p>
<p><a href="#">学院信息管理</a></p>
<p><a href="http">专业信息管理</a></p>
<p><a href="webhttp">教员信息管理</a></p>
<p><a href="httphtml">学员信息管理</a></p>
<p><a href="webhttphtml">班级信息管理</a></p>
<p><a href="#" id="a">考试信息管理</a></p>
<input type="button" value="所有带有href的a元素" id="btn1"/>
<input type="button" value="所有href属性的值等于'#'的a元素 " id="btn2"/>
<input type="button" value="所有href属性的值不等于'#'的a元素 " id="btn3"/>
<input type="button" value="所有href属性的值以'web'开始的a元素 " id="btn4"/>
<input type="button" value="所有href属性的值以'html'结尾的a元素 " id="btn5"/>
<input type="button" value="所有href属性的等于'#'且带有id属性的a元素 " id="btn6"/>
$(document).ready(function(){
//所有带有href的a元素
$("#btn1").click(function(){
$('a[href]').css({ backgroundColor: 'red' });
})
//所有href属性的值等于'#'的a元素 "
$('#btn2').click(function(){
$('a[href ="#"]').css({ backgroundColor: '#000' });
})
//所有href属性的值不等于'#'的a元素
$('#btn3').click(function(){
$('a[href !="#"]').css({ backgroundColor: '#aaa' });
})
//所有href属性的值以'web'开始的a元素
$('#btn4').click( function(){
$('a[href ^="web"]').css({ backgroundColor: '#555' });
})
//所有href属性的值以'html'结尾的a元素
$('#btn5').click( function(){
$('a[href $="html"]').css({ backgroundColor: '#999' });
})
//所有href属性的等于'#'且id属性等于'a'结尾的a元素
$('#btn6').click( function(){
$("a[ id ] [ href='#' ]").css({ backgroundColor: '#F00'});
});