jQuery中的选择器

我们知道原生代码中使用document.getElementById(id)获取指定id的DOM对象

在jQuery中可以通过$标识符+选择器选择页面中任一元素

1）、基本选择器

#id ：根据元素的id属性获取指定的元素

element ：根据元素的名称获取指定的元素

selector1,selector2 ：匹配所有满足条件的元素

.class ：根据元素的class属性获取指定的元素

2）层级选择器

ancestor (空格) descendant ：选取祖先元素下的所有后代元素

parent > child ：选择父元素下的所有子元素

prev + next ：选取上一个元素紧邻的下一个元素

prev ~ siblings ：选取上一个元素所有的同级兄弟元素

3）简单选择器

:first ：匹配第一个元素

:last ：匹配最后一个元素

:even ：匹配所有偶数

:odd ： 匹配所有奇数

:eq(index) ：匹配索引为index的元素（默认索引从0开始）

:gt(index) ：匹配索引大于index的元素

:lt(index) ：匹配索引小于index的元素

:not(selector) ：匹配除指定选择器以外的其他元素

4）内容选择器

:contains(text) ：匹配内容包含指定文本的元素

:empty ：匹配内容为空的元素

:has(selector) ：匹配具有指定选择器的元素

:parent ：匹配 （内容不为空的元素）

5）可见性选择器

:hidden ：匹配所有隐藏元素(display:none，input type=’hidden’)

:visible ：匹配所有可见元素(display:block)

6）属性选择器

[attribute] ：匹配具有指定属性的元素

[attribute=value] ：匹配属性值等于value的元素

[attribute!=value] ：匹配属性值不等于value的元素

[attribute^=value] ：匹配属性值以value开始的元素

[attribute$=value] ：匹配属性值以value结尾的元素

[attribute*=value] ：匹配属性值包含value的元素

[selector1][selector2][selectorN] ：匹配同时包含多个属性的元素

7）子元素选择器

:nth-child(index/even/odd) 从1算起 ：匹配索引为index的指定元素

:first-child ：匹配第一个子元素

:last-child ：匹配最后一个子元素

:only-child ：如果当前元素是唯一子元素，则匹配

8）表单选择器

:input ：匹配所有表单元素

:text ：匹配所有文本框

:password ：匹配所有密码框

:radio ：匹配所有单选按钮

:checkbox ：匹配所有复选框

:submit ：匹配提交按钮

:reset ：匹配重置按钮

:image ：匹配图像域

:button ：匹配按钮

:file ：匹配文件域

:hidden ：匹配隐藏表单

$(‘:input’)匹配所有表单元素，包括select与textarea元素

$(‘input’)只能匹配input标签

9）表单属性选择器

:enabled ：匹配所有可用元素

:disabled ：匹配所有不可用元素

:checked ：匹配复选框被选中元素的值

:selected ：匹配下拉选框被选中元素的值

disabled与readonly虽然都可以限定文本框被编辑，但是两者还是有区别的，主要区别在于readonly可以在php对其进行接收，而disabled是接收不到任何数据的。