jQuery选择器(Selector)总结

最喜欢jQuery网站上的一句话”Write Less, Do More”。除了有非常丰富的函数可以选用以外,它的选择器也是非常强大,确实大大的提高的生产效率。今天就把这些有用的选择器好好总结一下。

jQuery的选择器可以归为三类:基本CSS选择器位置选择器还有自定义选择器

  • 基本选择器又被称为“查找选择器”,用来找到DOM中的各种元素。
  • 位置和自定义选择又被称为“过滤选择器”,因为它可以过滤出一个元素的集合。

下面就分类看看这几种选择器的使用方法。

基本CSS选择器(Basic CSS Selectors)

基本选择器的很多语法很像CSS,很容易记忆。

语法描述
*匹配任意元素
E匹配名为E的元素
E F匹配名为F的元素,且是E元素的后代(可以不是直接后代)
E>F匹配名为F的元素,且是E元素的直接后代
E+F匹配名为F的元素,且F元素前一个元素名为E
E~F匹配名为F的元素,且F元素前面有名为E的元素
E:has(F)匹配名为E的元素,且E元素至少有一个元素为F
E.c匹配名为E且属于类c的元素
E#i匹配名为E且其id为i的元素
E[a]匹配名为E的元素且其有属性a
E[a=v]匹配名为E的元素且其属性a的值为v
E[a^=v]匹配名为E的元素且其属性a的值以v开始
E[a$=v]匹配名为E的元素且其属性a的值以v结尾
E[a*=v]匹配名为E的元素且其属性a的值包含v

位置选择器(Positional Selectors)

这类选择器是基于元素之间位置关系的,而且可以和任意的基础选择器一起使用。

语法描述
B:first选择selector B选出元素的第一个
B:last选择selector B选出元素的最后一个
B:first-child过滤selector B选出元素中是第一孩子的
B:last-child过滤selector B选出元素中是最后一孩子的
B:only-child过滤selector B选出元素中是唯一孩子的
B:nth-child(n)过滤selector B选出元素中是第n个孩子的
B:nth-child(odd|even)过滤selector B选出元素中是奇位或偶位孩子
B:nth-child(Xn+Y)过滤selector B选出元素的序号满足Xn+Y的。
B:even过滤selector B选出元素序号是偶数的
B:odd过滤selector B选出元素序号是奇数的
B:eq(n)过滤selector B选出元素序号是n的
B:gt(n)过滤selector B选出元素序号大于n的
B:lt(n)过滤selector B选出元素序号小于n的

自定义选择器(Custom Selectors)

语法描述
B:animated过滤出B选出元素中在jQuery动画函数控制的
B:button过滤出B选中元素中所有的button
B:checkbox过滤出B选中元素中所有的checkbox
B:enabled过滤出B选中元素中所有处于enabled状态的
B:file过滤出B选中元素中属于input[type=file]
B:header过滤出B选中元素是header type的h1~h6
B:hidden过滤出B选中元素的状态是隐藏的
B:image过滤出B选中元素是input[type=image]
B:input过滤出B选中元素是input, select, textarea和button
B:not(f)过滤出B选中元素不满足selector f的。
B:parent过滤出B选中元素有不为空的孩子
B:password过滤出B选中元素是input[type=password]
B:radio过滤出B选中元素是input[type=radio]
B:reset过滤出B选中元素是input[type=reset]或button[type=reset]
B:selected过滤出B选中元素是处于selected状态的
B:submit过滤出B选中元素是input[type=submit]或button[type=submit]
B:text过滤出B选中元素是input[type=text]
B:visible过滤出B选中元素是处于可见状态的

使用jQuery获得Input的值

jQuery可以非常方便的取到网页里标准input的值。我们主要使用val()方法,用几个例子说明一下。

Text Input

HTML

JavaScript

Select Input

HTML

JavaScript

selectedVal可能是option_one/option_two/option_three.

当多选的情况时,我们可以得到所有selected items的value的数组,如:

HTML

JavaScript

CheckBox Input

HTML

JavaScript

如果没有Box selected, checkValue是一个空串。

Radio Input

HTML

JavaScript