40.2 jQuery 选择器（基本选择器、层级选择器、属性选择器、过滤选择器、表单选择器）

目录

1  jQuery 选择器

2 选择器分类

2.1  基本选择器练习

2.2 层级选择器练习

2.3 属性选择器练习

2.4 过滤选择器练习

2.5 表单选择器练习

---

1  jQuery 选择器

• jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
• Query 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已存在的css选择器，除此之外，它还有一些自定义的选择器。
• jQuery 中所有选择器都以美元符号开头：$()。

2 选择器分类

1. 基本选择器	1. 标签选择器（元素选择器）                * 语法： $("html标签名") 获得所有匹配标签名称的元素 2. id选择器                 * 语法： $("#id的属性值") 获得与指定id属性值匹配的元素 3. 类选择器                * 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素 4. 并集选择器：         * 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
2. 层级选择器	1. 后代选择器                * 语法： $("A B ") 选择A元素内部的所有B元素                     2. 子选择器                * 语法： $("A > B") 选择A元素内部的所有B子元素
3. 属性选择器	1. 属性名称选择器                 * 语法： $("A[属性名]") 包含指定属性的选择器             2. 属性选择器                * 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器             3. 复合属性选择器                * 语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器
4. 过滤选择器	1. 首元素选择器                 * 语法： :first 获得选择的元素中的第一个元素             2. 尾元素选择器                 * 语法： :last 获得选择的元素中的最后一个元素             3. 非元素选择器                * 语法： :not(selector) 不包括指定内容的元素             4. 偶数选择器                * 语法： :even 偶数，从 0 开始计数             5. 奇数选择器                * 语法： :odd 奇数，从 0 开始计数             6. 等于索引选择器                * 语法： :eq(index) 指定索引元素             7. 大于索引选择器                 * 语法： :gt(index) 大于指定索引元素             8. 小于索引选择器                 * 语法： :lt(index) 小于指定索引元素             9. 标题选择器                * 语法： :header 获得标题（h1~h6）元素，固定写法
5. 表单过滤选择器	1. 可用元素选择器                 * 语法： :enabled 获得可用元素             2. 不可用元素选择器                 * 语法： :disabled 获得不可用元素             3. 选中选择器                 * 语法： :checked 获得单选/复选框选中的元素             4. 选中选择器                 * 语法： :selected 获得下拉框选中的元素

2.1  基本选择器练习

1. 基本选择器

1. 标签选择器（元素选择器）                * 语法： $("html标签名") 获得所有匹配标签名称的元素 2. id选择器                 * 语法： $("#id的属性值") 获得与指定id属性值匹配的元素 3. 类选择器                * 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素 4. 并集选择器：         * 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素

  
    
    
	
	

   
	
	 
	
				
		 
		 
		 

		 
		 
		
 
		 
有一种奇迹叫坚持
		 
自信源于努力
		 
	     

	    	 id为one       
		 
		
		 

	    	   id为two   class是 mini 
		       
class是 mini
		 
		
		 

		 	    class是 one 
		       
class是 mini
			   
class是 mini
		 
		 

		 	  class是 one 
		       
class是 mini01
			   
class是 mini
		
		class为spanone的span元素
		class为mini的span元素
		
	

2.2 层级选择器练习

2. 层级选择器

1. 后代选择器                * 语法： $("A B ") 选择A元素内部的所有B元素                     2. 子选择器                * 语法： $("A > B") 选择A元素内部的所有B子元素

  
    
    
	
	

   
	
	 
	
				
		 
		 
		 
		
 
		 
有一种奇迹叫坚持
		 
自信源于努力
		 
	     

	    	 id为one  
		     
		 
		
		 

	    	   id为two   class是 mini 
		       
class是 mini
		
		
		 

		 	    class是 one 
		       
class是 mini
			   
class是 mini
		 
		 

		 	  class是 one 
		       
class是 mini01
			   
class是 mini
		
		
		
		    span
		
		
	

 

2.3 属性选择器练习

3. 属性选择器

1. 属性名称选择器                 * 语法： $("A[属性名]") 包含指定属性的选择器             2. 属性选择器                * 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器             3. 复合属性选择器                * 语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器

$("div[title!='test']").css("background","pink");  属性title值不等于test的div元素
$("div[title^='te']").css("background","pink"); 属性title值 以te开始 的div元素
$("div[title$='est']").css("backgroundColor","pink");属性title值 以est结束 的div元素
$("div[title*='es']").css("background","pink");属性title值 含有es的div元素
$("div[id][title*='es']").css("background","pink");选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素

 

  
    
    
	
	
 
	
	
	

	
	
	

	
	
	
	

	

	    	 div元素: id=one
		 
		
		 

			 div元素:id=two   class= mini  title="test"
		       
class是 mini
		
		
		 

			 div元素:  class=one
		       
class是 mini
			   
class是 mini
		 
		 

			 div元素: class=one    title="test02"
		       
class是 mini01
			   
class是 mini
		
		
		
		

		 	  这是隐藏的
		
		
		

			div元素:class="one"
		
		
		

			div元素:	  动画
		
		
		
	
	   

 

2.4 过滤选择器练习

4. 过滤选择器

1. 首元素选择器                 * 语法： :first 获得选择的元素中的第一个元素             2. 尾元素选择器                 * 语法： :last 获得选择的元素中的最后一个元素             3. 非元素选择器                * 语法： :not(selector) 不包括指定内容的元素             4. 偶数选择器                * 语法： :even 偶数，从 0 开始计数             5. 奇数选择器                * 语法： :odd 奇数，从 0 开始计数             6. 等于索引选择器                * 语法： :eq(index) 指定索引元素             7. 大于索引选择器                 * 语法： :gt(index) 大于指定索引元素             8. 小于索引选择器                 * 语法： :lt(index) 小于指定索引元素             9. 标题选择器                * 语法： :header 获得标题（h1~h6）元素，固定写法

  
    
    
	
	

		 
					
		 

		 
		 
		 

		 
		 
		 

		 
		 
		 		 
		
		 
有一种奇迹叫坚持
		 
自信源于努力
		 
	     

	    	 id为one  第一个div，索引值从0开始	     
		 
		
		 

	    	   id为two   class是 mini 
		       
class是 mini
		
		
		 

		 	    class是 one 索引值=3
		       
class是 mini
			   
class是 mini
		 
		 

		 	  class是 one 
		       
class是 mini01
			   
class是 mini
		

		   

 

2.5 表单选择器练习

5. 表单过滤选择器

1. 可用元素选择器                 * 语法： :enabled 获得可用元素             2. 不可用元素选择器                 * 语法： :disabled 获得不可用元素             3. 选中选择器                 * 语法： :checked 获得单选/复选框选中的元素             4. 选中选择器                 * 语法： :selected 获得下拉框选中的元素

	
	

	
	 
	
				
		 

		 
		 

		 
		 
 
 		

		 
结果
 		
          
		 
		 
		 
		 
		 


		 美容
		 IT
		 金融
		 管理
		 
		 


		 
		  男
		  女
		  
         


		 
		  
          	程序员
			中级程序员
			高级程序员
			系统分析师
          
		    
          
          	本科
			博士
			硕士
			大专