《jQuery权威指南》学习笔记之第2章 jQuery选择器

2.1 jQuery选择器概述

 

2.1.1 什么使选择器

2.1.2 选择器的优势: 代码更简单，完善的检测机制
 1.代码更简单
  示例2-1     使用javascript实现隔行变色

	
		
		

		
	
	
		

			

				

					
学号
姓名
性别
总分
				
					 
				

					
1001
张小明
男
320
				
					 
				

					
1002
李明琪
女
350
				
			
		
	

  示例2-2     使用jQuery选择器实现隔行变色

	
		
		
		
		
	
	
		

			

				

					
学号
姓名
性别
总分
				
					 
				

					
1001
张小明
男
320
				
					 
				

					
1002
李明琪
女
350
				
			
		
	

 2.完善的检测机制
  示例2-3     使用javascript输出文字信息

  示例2-4     使用jQuery输出文字信息

 

2.2 jQuery选择器详解
基本选择器
层次选择器
过滤选择器
      |-简单过滤选择器
      |-内容过滤选择器
      |-可见性过滤选择器
      |-属性过滤选择器
      |-子元素过滤选择器
      |-表单对象属性过滤选择性
表单选择器
  
2.2.1 基本选择器
基本选择器语法：

选择器	功能	返回值
#id	根据给定的ID匹配一个元素	单个元素
element	根据给定的元素名匹配所有元素	元素集合
.class	根据给定的类匹配元素	元素集合
*	匹配所有元素	元素集合
selector1,selectorN	将每一个选择器匹配到的元素合并后一起返回	元素集合

     示例2-5     使用jQuery基本选择器选择元素

	
		
		

		

		
	
	
		

			
ID
			
CLASS
			SPAN
		
	

 

2.2.2   层次选择器
层次选择器语法：

选择器	功能	返回值
ancestor descendant	根据祖先元素匹配所有的后代元素	元素集合
parent>child	根据父元素匹配所有的子元素	元素集合
prev+next	匹配所有紧接在prev元素后的相邻元素	元素集合
prev~siblings	匹配prev元素之后的所有兄弟元素	元素集合
		元素集合

说明: ancestor descendant与 parent>child所选择的的元素集合是不同的，前者的层次关系是祖先和后代，而后者是父子关系；另外，prev+next可以使用.next()代替，而prev~siblings可以使用nextAll()代替。
示例2-6     使用jQuery层次选择器选择元素

	
		
		

		

		
	
	
		
Left
		

			
				
			
		

		
Right_1
		
Right_2
	

说明:siblings()方法与选择器prev ~ siblings区别在于，前者获取全部的相邻元素，不分前后，而后者仅获取标记后面全部相邻元素，不能获取前面部分

2.2.3 简单过滤选择器
简单过滤选择器语法:

选择器	功能	返回值
first()或:first	获取第一元素	单个元素
last()或:last	获取最后一个元素	单个元素
:not(selector)	获取除给定选择器外的所有元素	元素集合
:even	获取所有索引值为偶数的元素，索引号从0开始	元素集合
:odd	获取所有索引值为奇数的元素,索引号从0开始	元素集合
:eq(index)	获取指定索引值的元素,索引号从0开始	单个元素
:gt(index)	获取所有大于给定索引值的元素,索引号从0开始	元素集合
:lt(index)	获取所有小于给定索引值的元素,索引号从0开始	元素集合
:header	获取所有标题类型的元素,如h1，h2....	元素集合
:animated	获取正在执行动画效果的元素	元素集合

示例2-7     使用jQuery基本过滤选择器选择元素

	
		
		
		
		
	
	
		

			
基本过滤选择器
			

				
Item 0
				
Item 1
				
Item 2
				
Item 3
			
			Span Move
		
	

说明: 选择器animated在捕捉动画效果元素时，先自定义一个动画效果函数animateIt()，然后执行该函数，选择器才能获取动画效果，并增加其类别

 

2.2.4 内容过滤选择器
内容过滤选择器语法:

选择器	功能	返回值
:contains(text)	获取包含给定文本的元素	元素集合
:empty	获取所有不包含子元素或者文本的空元素	元素集合
:has(selector)	获取含有选择器所匹配的元素的元素	元素集合
:parent	获取含有子元素或者文本的元素	元素集合

示例2-8     使用jQuery内容过滤选择器选择元素

	
		
		
		
		
	
	
		
ABCD
		

		
EFaH
		

	

说明:在:contains(text)内容过滤选择器中，如果是查找字母，则有大小写的区别

 

2.2.5 可见性过滤选择器
可见性过滤选择器语法:

选择器	功能	返回值
:hidden	获取所有不可见元素,或者type为hidden的元素	元素集合
:visible	获取所有的可见元素	元素集合

示例2-9     使用jQuery可见性过滤选择器选择元素

	
		
		
		
		
	
	
		Hidden
		
Visible
	

说明: :hidden选择器所选择的不仅包括样式为display:none所有元素,而且还包括属性type="hidden"和样式为visibility:hidden的所有元素

2.2.6  属性过滤选择器
属性过滤选择器语法:

选择器	功能	返回值
[attribute]	获取包含给定属性的元素	元素集合
[attribute=value]	获取等于给定的属性是某个特定值的元素	元素集合
[attribute!=value]	获取不等于给定的属性是某个特定值的元素	元素集合
[attribute^=value]	获取给定的属性是以某些值开始的元素	元素集合
[attribute$=value]	获取给定的属性是以某些值结束的元素	元素集合
[attribute*=value]	获取给定的属性是以包含某些值的元素	元素集合
[selector1][selectorN]	获取满足多个条件的复合属性的元素	元素集合

示例2-10    使用jQuery属性过滤选择器选择元素

	
		
		
		
		
	
	
		
ID
		
Title A
		
ID 
 Title AB
		
Title ABC 
	

说明:show()是jQuery库中的一个显示元素的函数，括号中的参数表示显示时间,单位是毫秒，show(3000)表示用3000毫秒显示。

2.2.7 子元素过滤选择器
子元素过滤选择器语法:

选择器	功能	返回值
:nth-child(eq|even|odd|index)	获取每个父元素下的特定位置元素,索引号从1开始	元素集合
:first-child	获取每个父元素下的第一个子元素	元素集合
:last-child	获取每个父元素下的最后一个子元素	元素集合
:only-child	获取每个父元素下的仅有一个子元素	元素集合

示例2-11    使用jQuery子元素过滤选择器选择元素

	
		
		
		
		
	
	
		

			
Item 1-0
			
Item 1-1
			
Item 1-2
			
Item 1-3
		
		

			
Item 2-0
			
Item 2-1
			
Item 2-2
			
Item 2-3
		
		

			
Item 3-0
		
	

2.2.8  表单对象属性过滤选择器
表单对象属性过滤选择器语法:

选择器	功能	返回值
:enabled	获取表单中所有属性为可用的元素	元素集合
:disabled	获取表单中所有属性为不可用的元素	元素集合
:checked	获取表单中所有被选中的元素	元素集合
:selected	获取表单中所有被选中option的元素	元素集合

示例2-12    通过表单对象属性过滤选择器获取表单对象

	
		
		
		
		
	
	
		

			

				
				
			

			

				选中
				 未选中
			

			

				
					 Item 0 
					 Item 1
					 Item 2 
					 Item 3
				
				
			
		
	

2.2.9   表单选择器
表单选择器语法:

选择器	功能	返回值
:input	获取所有input,textarea,select	元素集合
:text	获取所有单行文本框	元素集合
:password	获取所有密码框	元素集合
:radio	获取所有单选按钮	元素集合
:checkbox	获取所有复选框	元素集合
:submit	获取所有提交按钮	元素集合
:image	获取所有图像域	元素集合
:reset	获取所有重置按钮	元素集合
:button	获取所有按钮	元素集合
:file	获取所有文件域	元素集合

示例2-13    使用jQuery表单过滤选择器获取元素

	
		
		
		
		
	
	
		

			 TextArea 
			Item 0
			
			
			  Radio
			
			CheckBox
			
			
			
			
			
			

		
	

 

2.3 综合案例分析---导航条在项目中的应用

2.3.1 需求分析
2.3.2   效果界面
2.3.3   功能实现
示例2-14    导航条在项目中的应用

	
		
		
		
		
	
	
		

			

				
图书分类
				
			

			

				

					
小说(  1110  )
					
文艺(  1110  )
					
青春(  1110  )
					
少儿(  1110  )
					
生活(  1110  )
					
社科(  1110  )
					
管理(  1110  )
					
计算机(  1110  )
					
教育(  1110  )
					
工具书(  1110  )
					
引进版(  1110  )
					
其他类(  1110  )
				
				
简化
				
			
		
	

2.3.4 代码分析

 

2.4 本章小结

代码下载地址：《jQuery权威指南》学习笔记之第2章 jQuery选择器 《jQuery权威指南》学习笔记之第2章 jQuery选择器