第二章jQuery选择器

一.jQuery选择器概述

jQuery选择器类似于CSS选择器，用来选取网页中的元素。

$()函数在很多javaScript库中都被当成一个选择器函数来使用，在jQuery中也是如此。$(“#id”)等同于document.getElementById(“id”)。

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

jQuery基本选择器主要包括标签选择器、类选择器、id选择器、并集选择器、全局选择器。

嵌套一层或多层的选择器叫层次选择器。

名称	返回值	语法：示例
后代选择器	元素集合	$(“#id p”)选取id=”id”内的所有p元素，包括孙子（p里面的元素）
子选择器	元素集合	$(“#id>p”)选取id=”id”内的p元素，不包含p的子元素
相邻元素选择器	元素集合	$(“#id+p”)选取id=”id”后的下一个同辈元素
同辈元素选择器	元素集合	$(“#id~p”)选取id=”id”之后的所有同辈元素p

属性选择器就是通过HTML元素的属性选择元素的选择器。

名称	返回值	语法：示例
选取包含指定属性的元素	元素集合	$(“[hrer]”)选取包含href属性的元素
选取指定属性是某个值的元素	元素集合	$(“[href=’#’]”)选取href属性值为#的元素
选取指定属性不是某个值的元素	元素集合	$(“[href!=’#’]”)选取href属性值不为#的元素
选取指定属性的值是某些特定值开头的元素	元素集合	$(“[href^=’#’]”)选取href属性值以#开头的元素
选取指定属性的值是某些特定元素结尾的元素	元素集合	$(“[href$=’.jpg’]”)选取href属性以.jpg结尾的元素
选取指定属性值的值包含某些值的元素	元素集合	$(“[href*=’txt’]”)选取href属性值中含有txt的元素

过滤选择器主要通过特定的过滤规则来筛选出所需要的DOM元素。

按照分类，过滤选择器可以分为：基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤。

名称	返回值	语法：示例
选取第一个元素	单个元素	$(“li:first”)选取所有li元素中的第一个li元素
选取最后一个元素	单个元素	$(“li:last”)选取所有li元素中的最后一个li元素
选取不包含给定元素的元素	集合元素	$(“li:not(.three)”)选取所有li元素中class不是three的元素
选取索引是偶数的所有元素	集合元素	$(“li:even”)选取索引是偶数的所有li元素
选取索引是奇数的所有元素	集合元素	$(“li:odd”)选取索引是奇数的所有li 元素
选取索引等于给定值的元素	单个元素	$(“li:eq(1)”)选取索引等于1的li元素
选取索引大于给定值的元素	集合元素	$(“li:gt(1)”)选取索引大于1的元素
选取索引小于给定值的元素	集合元素	$(“li:lt(1)”)选取索引小于1的元素
选取所有标题元素，如h1~h6	集合元素	$(“:header”)选取网页中的所有标题元素
选取当前获取焦点的元素	集合元素	$(“:focus”)选取当前获取焦点的元素
选取所有动画元素	集合元素	$(“:animated”)选取当前的所有动画元素

通过元素的显示状态（显示/隐藏）来选取元素。

在W3C规范中，规定属性值不能包含有某些特殊字符，解决此类错误的方法是使用转义符转义。

例如：$(“#id#a”);

$(“#id[2]”);

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

$(“#id\#a”);

$(“#id\[2\]”);

选择器中的空格也是不容忽视的，多一个或少一个空格，可能会得到截然不同的结果。