第6章 使用选择器获得要操作的元素.pptVIP

第6章 使用选择器获得要操作的元素 jQuery的强大，很大程度上得益于它功能全面而又简单易用的选择器。无论是进行简单的文本动画显示效果，还是在操作DOM元素，甚至进行Ajax交互，都离不开jQuery选择器的身影。可以说，jQuery选择器是学习jQuery的基石。只有把这一部分牢牢掌握了，才可以把jQuery用得得心应手。jQuery选择器可以说是完全继承了各个版本CSS的优点，和CSS选择器的语法同出一辙。因此本章首先详细介绍CSS的各种选择器，然后再对jQuery的各种选择器逐一介绍。 6.1 CSS选择器 CSS即层叠样式表（Cascading Style Sheets）。它是由W3C的CSS工作组产生和维护的一个用于布局和美化网页的语言。Web标准提倡表现和结构分离，因此CSS得以大显身手。在上一章中编写的示例中，读者已经可以看到CSS控制样式功能的强大。要使某个样式应用于HTML元素，首先需要有办法找到这个元素。CSS选择器就是用来承担这一任务的。本节将首先简单介绍CSS选择器的基本语法以及使用方式，然后逐渐介绍比较常用的几种CSS选择器。 6.1.1 使用CSS选择器 CSS选择器的基本语法如下。 6.1.2 通配选择器 通配符在很多计算机编程语言中都存在。在CSS中，使用“*”来匹配文档目录树（DOM）中所有类型的单一对象。一般在CSS样式表文件的开头都会定义类似于下面的统配选择器。 * { margin：0; padding：0; } 6.1.3 标签选择器 顾名思议，标签选择器是直接将HTML标签作为选择器，可以是p、h1、dl、strong等HTML标签。例如，CSS代码如下： p { font:12px;} em { color:blue;} dl { float:left; margin-top:10px;} 6.1.4 ID选择器 通常在写页面的HTML代码时需要设定某些标签元素的ID，例如，在第5章中的示例中，有如下一段代码。 div id=”wrapper” 6.1.5 类选择器 在CSS里用“.”开头表示类选择器的定义，例如，有如下的CSS代码。 .error{ color:red; font-size:14px ; } 6.1.6 后代选择器 后代选择器也叫派生选择器，它被用来给页面上一个元素里的子元素定义样式，其语法结构一般如下： element1 element2 {…} 6.1.7 子元素选择器 子元素选择器的语法和后代选择器十分相似，不过中间需要使用“”。 element1 element2 {…} 6.1.8 相邻兄弟选择器 子元素选择器的语法和后代选择器十分相似，不过中间需要使用“+”，代码如下： element1 + element2 {…} 6.1.9 属性选择器 顾名思义，属性选择器可以根据某个属性是否存在或属性的值来匹配元素。从本质上说，ID选择器和类选择器其实都是属性选择器，只不过是选择了ID或者类的值而已。属性选择器有4种匹配方式，简易属性匹配、精确值匹配、部分值匹配以及特殊匹配。 1．简易属性匹配 简易的属性匹配的语法如下： element[attr] {……} 6.1.9 属性选择器 2．精确值匹配 精确值匹配的属性选择器选择具有指定的属性，且属性值等于指定的值的元素。ID和类选择器本质上就属于这种类型。 6.1.9 属性选择器 3．部分值匹配 HTML元素的某些属性值可以是多个，中间以空格分开。而当要匹配多个属性值中的某一个的时候，就需要使用部分值匹配的属性选择器，其定义如下： element[att~=”val”] {…} 6.1.9 属性选择器 4．特殊匹配 特殊匹配的属性选择器语法如下： element[att|=”val”] {…} 6.2 jQuery选择器 jQuery选择器可以看做是建立在CSS选择器的基础上的。不过众所周知，虽然CSS在1996年就已经推出，现在CSS的必威体育精装版版本已经发展到CSS3，但是由于各个浏览器还不能或者不完全支持CSS3的所有特性，因此很多优秀的功能无法发挥。jQuery则在一定程度上弥补了这个缺憾。它可以跨浏览器的支持几乎所有的CSS3的特性，因此使得其选择器的功能十分强大。本节将结合实例介绍jQuery的各种选择器。 6.2.1 基本选择器 jQuery基本选择器是使用得最普遍的选择器。它可以满足大部分页面元素选取的需求。基本选择器可以根据页面元素的ID，或者页面元素的类，甚至页面元素本身来进行元素的选取。同时，基本选择器也支持“*”作为通配符进行元素的选择。 6.2.2 层次选择器 jQuery层次选择器对应于CSS选择器中的后代选择器、子元素选择器以及相邻选择器等。它可以用来较为