【jQuery】第四课——掌握jQuery选择器的使用，会使用jQuery选择器获取元素

知识点：了解jQuery选择器的基本概念及优势、能够使用不同的jQuery选择器选取元素，比如基本选择器、层次选择器、属性选择器、基本过滤选择器、可见性过滤选择器的使用，了解使用jQuery选择器的注意事项。

 

       页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。

1、  jQuery选择器简介

        jQuery 选择器允许您对 HTML 元素组 或 单个元素 进行操作。选择器是 jQuery 的根基，在 jQuery 中，对事件处理、遍历 DOM 和 Ajax 操作都依赖于选择器。熟练地使用选择器，不但能简化代码，而且能够事半功倍。jQuery 选择器可通过CSS 选择器、条件过滤两种方式获取元素。可以通过 CSS 选择器语法规则获取元素的 jQuery 选择器包括基本选择器、层次选择器和属性选择器;可以通过条件过滤选取元素的 jQuery选择器包括基本过滤选择器和可见性过滤选择器。

 

1.1     jQuery 选择器是什么

       说到选择器，会让人自然地联想到 CSS(Cascading Style Sheets，层叠样式表），在 CSS中，选择器的作用是获取元素，而后为其添加 CSS 样式，美化其外观；而 jQuery 选择器，不仅良好地继承了 CSS 选择器的语法，还继承了其获取页面元素便捷高效的特点，jQuery选择器与 CSS 选择器的不同之处就在于，jQuery 选择器获取元素后，为该元素添加的是行为，使页面交互变得更加丰富多彩。jQuery 中所有选择器都以美元符号开头：$()。

        此外，jQuery 选择器拥有着良好的浏览器兼容性，不用像使用 CSS 选择器那样需要考虑各个浏览器对它的支持情况。学会使用选择器是学习 jQuery 的基础，jQuery 的操作都建立在所获取的元素之上，否则无法输出想要的效果。

 

1.1     jQuery 选择器的优势

       jQuery 选择器的优势主要体现在以下三个方面：

1. 简洁的写法

        $()函数在很多 JavaScript 库中都被当作一个选择器函数来使用，在 jQuery 中也不例外。其中，$("#id")用来代替 JavaScript 中的 document.getElementById()函数，即通过ID 获取元素；$("tagName")用来代替 document.getElementsByTagName()函数，即通过标签名来获取 HTML 元素；其他选择器的写法将在后续小节中讲解。

2. 支持 CSS1.0 到 CSS3.0 选择器

       jQuery 选择器支持 CSS1.0、CSS2.0 和 CSS3.0 的大多数选择器。同时，它也有少量自定义的选择器。因此对拥有一定 CSS 基础的开发人员来说，学习 jQuery 选择器是一件非常容易的事。使用 CSS 选择器时，开发人员需要考虑主流浏览器是否支持某些选择器。而在 jQuery中，开发人员则可以放心地使用 jQuery 选择器而无须考虑浏览器是否支持这些选择器。

3. 完善的处理机制

      使用 jQuery 选择器不仅比使用传统的 getElementById()和 getElementsByTagName()函数简洁得多，还能避免某些错误。

 

2、  使用CSS选择器选取元素

       jQuery 支持大多数 CSS 选择器，其中最常用的有 CSS 中的基本选择器、层次选择器和属性选择器，在 jQuery 中，与它们对应的分别是 jQuery 基本选择器、层次选择器和属性选择器，它们的构成规则与 CSS 选择器完全相同。下面就分别讲解这 3 种选择器的用法。

2.1   基本选择器

        jQuery 基本选择器与 CSS 基本选择器相同，它继承了 CSS 选择器的语法和功能，主要由元素标签名、class、id 和多个选择器组成，通过基本选择器可以实现大多数页面元素的查找。基本选择器主要包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器。这一类选择器也是 jQuery 中使用频率最高的。

2.1.1  示例代码

         为了更加直观地展示 jQuery 基本选择器选取的元素及范围，首先使用 HTML+CSS 代码实现如图所示的页面。

	
		
		
		
	
	
		
jQuery选择器的使用
 
		

			
这是test01的第0个li标签
			
这是test01的第1个li标签
			
这是test01的第2个li标签
			
这是test01的第3个li标签
			
这是test01的第4个li标签
		
		

		

			
这是test02的第0个li标签
			
这是test02的第1个li标签
			
这是test02的第2个li标签
			
这是test02的第3个li标签
		
		
这是一段文字，这是一段文字1，这是一段文字，这是一段文字，这是一段文字
	

2.1.2  基本标签选择器的详细说明

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$("h2" )选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(" .title")选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$(" #title")选取id为title的元素
并集选择器	selector1,selector2,...,selectorN	两个选择器之间用英文逗号,隔开	$("div,p,.title" )选取所有div、p和拥有class为title的元素
交集选择器	element.class或element#id	第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写	$("h2.title")选取所有拥有class为title的h2元素
全局选择器	*	匹配所有元素	$("*" )选取所有元素

在示例html代码里，依次添加以下代码（每次添加一个选择器），查看效果：

 

2.2  层次选择器的使用

        jQuery 中的层次选择器与 CSS 中的层次选择器相同， 它们都是根据获取元素与其父元素、子元素、兄弟元素等的关系而构成的选择器。jQuery中有 4 种层次选择器，它们分别是后代选择器、子选择器、相邻元素选择器和同辈元素选择器，其中最常用的是后代选择器和子选择器，它们和 CSS 中的后代选择器与子选择器的语法及选取范围均相同。

名称	语法构成	描述	示例
后代选择器	parent descendant	选择器选取指定元素的后代的所有元素。 元素的后代可以是元素的第一代、第二代、第三代等等。 两个选择器之间用空格隔开	$("#menu span" )选取#menu下的元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻 元素之后的同辈元素
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取 元素之后所有的同辈元素

在示例html代码里，依次添加以下代码（每次添加一个选择器），查看效果：

 

2.3   属性选择器的使用

        属性选择器就是通过 HTML 元素的属性选择元素的选择器，它与 CSS 中的属性选择器语法构成完全一致，如

元素中的 title 属性，元素中的target 属性，元素中的 alt 属性等。属性选择器是 CSS 选择器中非常有用的选择器，从语法构成来看，它遵循 CSS 选择器；从类型来看，它属于 jQuery 中按条件过滤获取元素的选择器之一。

名称	语法构成	描述	示例
属性选择器	[attribute]	选取包含给定属性的元素	$(" [href]" )选取含有href属性的元素
	[attribute=value]	选取等于给定属性是某个特定值的元素	$(" [href ='#']" )选取href属性值为“#”的元素
	[attribute !=value]	选取不等于给定属性是某个特定值的元素	$(" [href !='#']" )选取href属性值不为“#”的元素
	[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(" [href^='en']" )选取href属性值以en开头的元素
	[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素
	[attribute*=value]	选取给定属性是以包含某些值的元素	$(" [href* ='txt']" )选取href属性值中含有txt的元素
	[selector] [selector2] [selectorN]	选取满足多个条件的复合属性的元素	$("li[id][title=新闻要点]" )选取含有id属性和title属性为新闻要点的 元素

2.3.1  示例代码

         为了更加直观地展示 jQuery 属性选择器选取的元素及范围，首先使用 HTML+CSS 代码实现如图所示的页面。

	
		
		
	
	
		

			
武汉军运会比赛项目：
			

				
乒乓球
				
羽毛球
				
海军五项
				
马术
				
帆船
				
射击
			
			点击我，打开百度首页
		
		

		
这是一段文字
		

			
		
	

在示例html代码里，依次添加以下代码（每次添加一个选择器），查看效果： 

注意：如果基于 jQuery，则使用 ID 选择器获取元素的效率是最高的，因为 ID 具有唯一性。

 

3、  使用条件过滤选取元素

         过滤选择器主要通过特定的过滤规则来筛选出所需的 DOM 元素，过滤规则与 CSS 中的伪类语法相同，即选择器都以一个冒号（:）开头，冒号前是进行过滤的元素，例如，a:hover 表示当鼠标指针移过元素时，tr:visited 表示当鼠标指针访问过元素后等。

         按照不同的过滤条件，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。其中，最常用的过滤选择器是基本过滤选择器、可见性过滤器、属性选择器和表单对象属性过滤器。在这里，我们仅讲解基本过滤选择器和可见性过滤选择器。

3.1   基本过滤选择器

       基本过滤选择器是过滤选择器中使用最为广泛的一种， jQuery 的基本过滤选择器是通过元素所处的位置来获取元素的。

名称	语法构成	描述	示例
基本过滤选择器	:first	选取第一个元素	$(" li:first" )选取所有 元素中的第一个 元素
	:last	选取最后一个元素	$(" li:last" )选取所有 元素中的最后一个 元素
	:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有 元素
	:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有 元素
	:eq(index)	选取索引等于index的元素（index从0开始）	$("li:eq(1)" )选取索引等于1的 元素
	:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的 元素（注：大于1，不包括1）
	:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的 元素（注：小于1，不包括1）
	:not(selector)	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" )选取class不是three的元素
	:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
	:focus	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素

3.1.1  示例代码

         为了更加直观地展示 jQuery 属性选择器选取的元素及范围，首先使用 HTML+CSS 代码实现如图所示的页面。

	
		
		
	
			
		

			
武汉军运会比赛项目：
			

				
乒乓球
				
羽毛球
				
海军五项
				
马术
				
帆船
				
射击
			
		
		

			用户名：


			密   码：
		
	

在示例html代码里，依次添加以下代码（每次添加一个选择器），查看效果： 

注意：上述代码中$("input:focus").css("background-color","blueviolet");测试时没有效果，因为页面在加载完毕之后就执行了该代码。可以给input标签里添加一个属性autofocus，即可查看效果，如：。

• autofocus 属性是一个布尔属性。
• autofocus 属性是 HTML5 中的新属性。
• autofocus 属性规定当页面加载时 元素应该自动获得焦点。

 

使用jQuery实现点击文本框后，背景颜色发生变化

			//点击input后，背景颜色变化
			$(function(){
				$("input").focus(function(){
					$(this).css("background-color","aquamarine");
				})
			})

 

3.1.2  案例练习：使用jQuery实现点击文本框等时背景颜色变化，离开后背景颜色发生变化

	
		
		
		
		
	
	
		

			用户名：


			密   码：
		
	

说明：这里提前用到了jQuery的两个事件

• focus()：当元素获得焦点时，发生 focus 事件。
• blur()：当元素失去焦点时发生 blur 事件。

 

3.2   可见性过滤选择器

       jQuery 选择器除了可以通过 CSS 选择器、位置选取元素外，还能够通过元素的显示状态，即元素显示或者隐藏来选取元素。在 jQuery 中，通过元素显示状态选取元素的选择器称为可见性过滤选择器。

名称	语法构成	描述	示例
可见性过滤选择器	:visible	选取所有可见的元素	$(":visible" )选取所有可见的元素
	:hidden	选取所有隐藏的元素	$(":hidden" ) 选取所有隐藏的元素

 

3.2.1  案例练习：点击按钮显示/隐藏文字

	
		
		
		
		
		
	
	
		
点击按钮，我会被隐藏哦~
		
隐藏的我，被显示了，嘿嘿^^
		

			
			
		
	

注意： show()和 hide()都是 jQuery 中的方法，show()方法的功能是将隐藏的元素显示出来， hide()方法的功能是将显示的元素隐藏起来。

 

3.2.2    案例练习：点击菜单，显示下拉菜单

	
		
		
		
		
		
	
	
		
jQuery选择器
		

			
基本选择器
			
属性选择器
			
元素选择器
			
过滤选择器
		
	

 注意：在可见性选择器中需要注意，选择器:hidden 获取的元素不仅包括样式属性 display 为“none”的元素，还包括文本隐藏域()和 visibility:hidden之类的元素。

 

4、  使用jQuery选择器注意事项

         在使用 jQuery 选择器时，有一些问题是必须注意的，否则无法显示正确效果。这些问题归纳如下。

1.   选择器中含有 ","  ,   "#",   "("   或   "]"    等特殊字符

        在 W3C 规范中，规定属性值中不能含有某些特殊字符，但在实际开发过程中，可能会遇到表达式中含有”#”和”.”等特殊字符的情况，如果按照普通的方式去处理就会出错。解决此类错误的方法是使用转义符转义。

HTML 代码如下：

aa
cc

按照普通方式来获取，例如：

$("#id#a");

$("#id[2]");

以上代码不能正确获取到元素，正确的写法如下：

$("#id\\#a");

$("#id\\[2\\]");

 

2. 选择器中含有空格的注意事项

        选择器中的空格也是不容忽视的，多一个空格或少一个空格，可能会得到截然不同的结果。如后代选择器与过滤选择器的不同造成的效果如下：

var $t_a=$('.test :hidden');//带空格的

以上代码是选取class为"test"的元素里面的隐藏元素。

var $t_b=$('.test:hidden');//不带空格的

以上代码则是选取隐藏的class为"test"的元素。

 

 

 

 

 

=============这里是结束分割线=================