jQuery选择器类型

jQuery选择器应该是学习jQuery的最基本的知识了,下面介绍一下各个类型的选择器的怎么写。

1、基本选择器:这是最常用的选择器

#id:根基给定的id匹配一个元素

.class:根据类名匹配元素

element:直接写出标签名,根据给定的元素名匹配元素

*:通配符

selector1,selector2,...,selectorN:将每一个选择器匹配的元素合并后一起返回

2、层次选择器:根据层次之间的特定关系来获取元素

$("ancestordescendant"):选取ancestor元素里的所有descendant后代元素

$("parent>child"):选取parent元素下的child(子)元素

$("pre+next"):选取紧接在pre后的next(下一个)元素

$("prev~siblings"):选取prev元素之后的所有siblings(同辈)元素

3、过滤选择器:基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤,表单对象属性过滤

基本过滤选择器:

:first:选择第一元素

:last:最后一个元素

:not(selector):去除所有与给定选择器匹配的元素

:even:偶数

:odd:奇数

:eq(index):选取索引等于index的元素(index从0开始)

:gt(index):索引大于index

:lt(index):索引小于index

:hender:选取所有标题元素

:animated:选取当前正在执行动画的元素

:focus:选取当前获取焦点的元素

内容过滤选择器:

:contains(text):选取含有文本内容为“text”的元素

:empty:选取不包含子元素或者文本的空元素

:has(selector):选取含有选择器所匹配的元素的元素

:parent:选取含有子元素或者文本的元素

可见性过滤选择器:

:hidden:选取所有不可见的元素

:visible:选取所有可见的元素

属性过滤选取器:

[attribute]:选取拥有此属性的元素

[attribute=value]:属性值为value的元素

[attribute!=value]:属性值不等于value的元素

[attribute^=value]:属性值以value开头的元素

[attribute$=value]:属性值以value结尾的元素

[attribute*=value]:属性值含有value的元素

[attribute|=value]:属性等于给定字符串或以该字符串为前缀的元素(如果为前缀的话,该字符串之后要有“-”连字符)

[attribute~=value]:属性用空格分隔的值中包含有一个给定值的元素

[attribute1][attribute2][attributeN]:几个条件同时符合的元素

子元素过滤选择器:

:nth-child(index/even/odd/equation):选取每个父元素下的第index个子元素或者奇偶元素(index从1开始)

:first-child:父元素中第一个子元素

:last-child:父元素中最后一个子元素

:only-child:如果某个元素是它父元素的唯一子类将会匹配

表单对象属性过滤器:

:enabled:选取所有可用元素

:disabled:选取所有不可用元素

:checked:选取所有被选中的元素(单选框、复选框)

:select:选取所有被选中的选项元素(下拉列表)

4、表单选择器

:input:选取所有<input><textarea><select><button>元素

:text:所有单行文本框元素

:password:所有密码框

:radio:所有单选框

:checkbox:所有多选框

:submit:所有提交按钮

:image:所有图像按钮

:reset:所有重置按钮

:button:所有的按钮

:file:所有的上传域

:hidden:所有不可见元素

选择器中有好多前边都带有冒号,使用的时候千万注意是否要加空格,例如:

$("div:input")指的是在div下的所有<input><textatea><select><button>元素

$("div:input")指的是在div下的为input标签的元素

在jQuery中还有一些特使的字符,如$、[、{等,如果在选择器中没法识别应该用转译字符“\\”将其转译再使用。

选择器的灵活应用可以使代码干净整洁,掌握好选择器是一个开发人员的基本素质。大家一起努力啦!fighting!

相关推荐