JQuery过滤选择器(内容过滤、可见性过滤、属性过滤 )

过滤选择器：过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、表单过滤

内容过滤

• :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'});
		});