参考课件文稿第2章-jquery选择器.pptVIP

jQuery选择器 * jQuery选择器 PHPCHINA 内容结构： 1. CSS元素选择器 2. XPath属性选择器 3. jQuery自定义选择器 4. jQuery表单选择器 PHPCHINA 1.jQuery选择器可以帮助我们正确选取指定的单个HTML元素或HTML元素组。 2.jQuery既支持CSS元素选择器，也支持XPath属性选择器，你可以使用其中 一种选择器，也可以同时使用两种选择器。 3.jQuery自定义了很多极为方便的选择器，还有专门针对表单的选择器。 CSS元素选择器（一） 标签选择器：以标签元素作为选择符 例如：$(p) 选取所有p元素 ID选择器：以元素的ID作为选择符 例如：$(#go) 选取id=go的元素 类选择器：以元素的class作为选择符 例如：$(.test) 选取所有class=test的元素 jQuery使用CSS选择器来选择HTML元素 CSS元素选择器（二） 群组选择器：同时选择多个选择符 例如：$(h1, h2, .title) 选取所有匹配的元素 通配选择器：选取文档中的所有元素 例如：$(*) 选取所有元素 后代选择器：选取某元素的任意后代或子孙元素 例如：$(ul li) 选取ul中所有的li元素 子选择器：选取父元素下的子元素 例如：$(div span) 选取div下的span子元素 XPath属性选择器（一） [属性]：选取拥有此属性的元素 例如：$([align]) 选取所有拥有属性align的元素 [属性=value]：选取属性的值为value的元素 例如：$(p[align=left]) 选取带有align=left的所有p元素 jQuery使用XPath属性选择器来选择带有给定属性的HTML元素 XPath属性选择器（二） [属性!=value]：选取属性的值不等于value的元素 例如：$([align!=left]) 选取带有属性align但值不等于left的所有元素 [属性$=value]：选取属性的值以value结束的元素 例如：$([align$=er]) 选取带有属性align，并且它的值是以er结尾的所有元素 jQuery自定义选择器（一） 1. jQuery添加了独有的完全不同的自定义选择器。2. 自定义选择器的语法和CSS中的伪类选择符语法相同，都是以 一个冒号( : )开头。 jQuery自定义选择器按照作用不同，大体可以分为以下几种类型： （1）索引选择器 （2）内容选择器 （3）可见性选择器 （4）表单选择器 注：由于表单选择器内容较多，所以我们单独将表单选择器 拿出来放到后面专门的小节再讲。 jQuery自定义选择器（二） :eq(index) —— 选取一个给定索引值的元素 例如：$(input:eq(2)) 选取索引等于2的input元素 :gt(index) —— 选取所有大于给定索引值的元素 例如：$(input:gt(2)) 选取索引大于2的input元素（大于2但不包括2） :lt(index) —— 选取所有小于给定索引值的元素 例如：$(input:lt(2)) 选取索引小于2的input元素（小于2但不包括2） 1.索引选择器：根据索引的位置来选择元素，索引(index)从0开始计数 jQuery自定义选择器（三） :first —— 选取第一个匹配的元素，相当于:eq(0) 例如：$(div:first) 选取所有div元素中的第一个div元素 :last —— 选取最后一个匹配的元素 例如：$(div:last) 选取所有div元素中的最后一个div元素 :even —— 选择偶数元素（从0开始，因此选择第一个元素，第三个元素...） 例如：$(input:even) 选取索引是偶数的input元素 :odd —— 选择奇数元素（从0开始，因此选择第二个元素，第四个元素...） 例如：$(input:odd) 选取索引是奇数的input元素 1.索引选择器：根据索引的位置来选择元素，索引(index)从0开始计数 jQuery自定义选择器（四） :header —— 选取网页中所有的标题元素h1、h2...h6 例如：$(:header) 选取所有标题元素 :animated —— 选择正在执行动画的元素 例如：$(div:animated) 选取正在执行动画的所有div元素 :not(选择器) —— 去除与给定选择器匹配的元素 例如：$(input:not(