本文共 4401 字，大约阅读时间需要 14 分钟。

1.基本过滤器

:first 获取第一个元素

:last 获取最后个元素 :not(selector) 去除所有与给定选择器匹配的元素 :even 匹配所有索引值为偶数的元素，从 0 开始计数 :odd 匹配所有索引值为奇数的元素，从 0 开始计数 :eq(index) 匹配一个给定索引值的元素 :gt(index）)匹配所有大于给定索引值的元素 :lt(index) 匹配所有小于给定索引值的元素 :header 匹配如 h1,h2,h3 之类的标题元素 :animated 匹配所有正在执行动画效果的元素

			
   												
   																												
基本择器.
		
		
   
    			id 为 one,class 为 one 的div			
    
     class为mini
    
		
   
		
   
    			id为two,class为one,title为test的div			
    
     class为mini,title为other
    
			
    
     class为mini,title为test
    
		
   
		
   
			
    
     class为mini
    
			
    
     class为mini
    
			
    
     class为mini
    
			
    
		
   
		
   
			
    
     class为mini
    
			
    
     class为mini
    
			
    
     class为mini
    
			
    
     class为mini,title为tesst
    
		
   
		
   
    style的display为"none"的div
   
		
   
    class为"hide"的div
   
		
   
    			包含input的type为"hidden"的div
    		
   
		
   
    正在执行动画的div元素.
   
	

2.内容过滤器

:contains(text) 匹配包含给定文本的元素

:empty 匹配所有不包含子元素或者文本的空元素 :parent 匹配含有子元素或者文本的元素 :has(selector) 匹配含有选择器所匹配的元素的元素

//2.择不包含子元素(或者文本元素) 的 div 空元素				$("#btn2").click(function(){
   					$("div:empty").css("background", "#bbffaa");				});

//3.择含 class 为 mini 元素的 div 元素				$("#btn3").click(function(){
   					$("div:has('.mini')").css("background", "#bbffaa");				});

//4.择含子元素(或者文本元素)的div元素				$("#btn4").click(function(){
   					$("div:parent").css("background", "#bbffaa");				});			});			

														
		
   
    			id 为 one,class 为 one 的div			
    
     class为mini
    
		
   
		
   
    			id为two,class为one,title为test的div			
    
     class为mini,title为other
    
			
    
     class为mini,title为test
    
		
   
		
   
			
    
     class为mini
    
			
    
     class为mini
    
			
    
     class为mini
    
			
    
		
   
		
   
			
    
     class为mini
    
			
    
     class为mini
    
			
    
     class为mini
    
			
    
     class为mini,title为tesst
    
		
   
		
   
    style的display为"none"的div
   
		
   
    class为"hide"的div
   
		
   
    			包含input的type为"hidden"的div
    		
   
		
   
    正在执行动画的div元素.
   
	

3.属性过滤器

[attribute] 匹配包含给定属性的元素。

[attribute=value] 匹配给定的属性是某个特定值的元素 [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。 [attribute^=value] 匹配给定的属性是以某些值开始的元素 [attribute$=value] 匹配给定的属性是以某些值结尾的元素 [attribute*=value] 匹配给定的属性是以包含某些值的元素 [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。

4.可见性过滤器

：hidden 匹配所不可见元素，或者type为hidden的元素

   
      
     
      
Value 1
     
       
      
Value 2
     
    
   
$("tr:hidden")

结果：

[ Value 1 ]

:visible 匹配所的可见元素

   
      
     
      
Value 1
     
       
      
Value 2
     
    
   
$("tr:visible")

结果：

[ Value 2 ]

5.表单过滤器

表单过滤器:

:input 匹配所有 input,textarea,select 和 button 元素 :text 匹配所有 文本输入框 :password 匹配所有的密码输入框 :radio 匹配所有的单选框 :checkbox 匹配所有的复选框 :submit 匹配所有提交按钮 :image 匹配所有 img 标签 :reset 匹配所有重置按钮 :button 匹配所有 inputtype=button按钮 :file 匹配所有 inputtype=file 文件上传 :hidden 匹配所有不可见元素 display:none 或 inputtype=hidden

表单对象属性过滤器

:enabled 匹配所有可用元素 :disabled 匹配所有不可用元素 :checked 匹配所有选中的单选，复选，和下拉列表中选中的 option 标签对象 :selected 匹配所有选中的 option

//2.对表单内 不可用input 赋值操作				$("#btn2").click(function(){
   					$(":text:disabled").val("不可用文本框赋值");				});

//3.获取多框中的个数  使用size()方法获取取到的元素集合的元素个数				$("#btn3").click(function(){
   					alert($(":checkbox:checked").size())				});

//4.获取多框，每个中的value值				$("#btn4").click(function(){
   					//方法一：					var str = "";					var eles = $(":checkbox:checked");					console.log(eles);					for(var i=0;i
   
    <$checkboies.length;i++){
   					// 	alert($checkboies[i].value);					// }					// each方法是jQuery对象提供用来遍历元素的方法					// 在遍历的function函数中，一个this对象，这个this对象，就是当前遍历到的dom对象					// $checkboies.each(function () {
   					// 	alert(this.value);					// });				});
   

//5.获取下拉框中的内容  				$("#btn5").click(function(){
   					var str = "";				//注意这个择器的特殊，因为select里面的option是真正的被择项，				//所以 :selected 择器和 select[name='test']择器的关系是子父关系				//必须照基本择器择后代的方法				var els = $("select option:selected");				console.log(els);				for(var i=0;i
   	
   

		
表单对象属性过滤择器
		 对表单内 可用input 赋值操作.  		 对表单内 不可用input 赋值操作.
		 获取多框中的个数.		 获取多框中的内容.
         获取下拉框中的内容.
		 		
   
    						可用元素: 
    
    
			不可用元素: 
    
    
			可用元素: 
    
    
			不可用元素: 
    
    
			
    
						多框: 
    
			
    test1			
    test2			
    test3			
    test4			
    test5						
    
    
			下拉列表1: 
    
			
    				浙江				辽宁				北京				天津				广州				湖北									
    
    
			下拉列表2: 
    
			
    				浙江				辽宁				北京				天津				广州				湖北					
   
			

转载地址：http://pouki.baihongyu.com/