jquery选择器初探

码农传奇 2017-03-26 10:57

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

基本选择器

基本选择器是jquery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。

元素选择器

jQuery 元素选择器基于元素名选取元素。

$("p")

在页面中选取所有 <p> 元素

id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

$("#test")

class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".test")

层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号（:）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

基本过滤选择器





内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。



可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。



属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。



子元素过滤选择器

子元素过滤选择器的过滤规则相对于其他的选择器稍微有些复杂，不过只要将元素的父元素和子元素区分清楚就很简单了。





表单对象属性过滤选择器

表单对象属性过滤选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。

表单选择器

为了使用户能够更加灵活地操作表单，jquery中专门加入了表单选择器。利用这个选择器，能极其方便地获取到表单的某个或某类型的元素。



jquery选择器参考手册



以上即为jquery选择器的基本内容，值得一提的是jquery选择器是在css选择器的基础上发展而来，二者有许多选择器是一致的。关于css选择器的相关内容，详见《css选择器初探》。关于jquery的相关知识，详见《jquery初探》。