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!