JQuery学习笔记，2JQuery选择器
JQuery选择器
1.基本选择器
选择器 | 描述 | 返回 | 示例 |
#id | id选择器 | 单个 | $("#orderId") |
.class | 类选择器 | 集合 | |
element | 元素选择器 | 集合 | |
* | 匹配所有元素 | 集合 | $("*") |
selector1,selector2,... selectorN | 将每一个选择器匹配到的元素合并后返回 | 集合 | $("div,span,p.myClass")返回所有div，span和class为myClass的p标签的一组元素 |
2.层次选择器
选择器 | 描述 | 返回 | 示例 |
$("ancestor descendant") | 选取ancestor元素的所有descendant（后代）元素 | 元素 | $("#id span") |
$("parent > child") | 选取parent元素下的child（子）元素 | 元素 | $("div > span") |
$("selector").next("div") | 下一个节点 | ||
$("selector").siblings("div") | selector的所有同辈节点 |
3.基本过滤选择器
选择器 | 描述 | 返回 | 示例 |
:first | 选取第一个元素 | 单个 | $("div:first")选取所有div元素中的 第一个div元素 |
:last | $("div:last") | ||
:not(selector) | 去除所有与给定选择器匹配的元素 | 集合 | $("input:not(.myClass)")class不是 myClass的所有input元素 |
:even | 索引为偶数，索引从0开始 | 集合 | $("input:even")索引是偶数的input |
:odd | 奇数 | $("input:odd") | |
:eq(index) | 索引=index的元素 | 单个 | $("input:eq(1)") |
:gt(index) | 索引>index的元素 | 集合 | $("input:gt(2)") |
:lt(index ) | 索引<index的元素 | 集合 | $("input:lt(6)") |
:header | 所有标题元素，如h1,h2 | $(":header")网页中所有的<h1>,<h2>,<h3>... | |
:animated | 正在执行动画的元素 | $("div:animated") |
4.内容选择器
选择器 | 描述 | 返回 | 示例 |
:contains(text) | 文本内容包含text的元素 | 集合 | $("div:contains('me')")包含"me"的div |
:empty | 不包含子元素（包括文本）的空元素 | 集合 | $("div:empty") |
:has(selector) | 选取有选择器所匹配的元素的元素 | 集合 | $("div:has(p)")含有p元素的div元素 |
:parent | 含有子元素或文本的元素 | 集合 | $("div:parent")选取拥有子元素（包括文本元素）的div元素 |
5.可见性过滤选择器
选择器 | 描述 | 返回 | 示例 |
:hidden | 选取所有不可见的元素，包括display=none、文本隐藏域 (<input type="hidden" />) 和visibility:hidden之类的元素额 | 集合 | $("input:hidden")选取所有不可见的input |
:visible | 选取所有可见的元素 | 集合 | $("input:visible")选取所有可见的input |
6.属性过滤选择器
选择器 | 描述 | 返回 | 示例 |
[attr] | 拥有此属性的元素 | 集合 | $("div[id]"):拥有id属性的div元素 |
[attr=value] | 属性值为value的元素 | 集合 | $("div[title=china]") |
[attr!=value] | 属性不为value的元素 | 集合 | $("div[title!=china]")注：没有title属性的div也会被选中 |
[attr^=value] | 属性以value开头的元素 | 集合 | $("div[title^=order]") |
[attr$=value] | 属性以value结束的元素 | 集合 | $("div[title$=test]") |
[attr*=value] | 属性包含value的元素 | 集合 | $("div[title*=test]") |
[selector1] [selector2] | 用多个属性选择器合并成符合属性选择器 | 集合 | $("div[id][title^=order]")有id属性，且title属性以order开头的div |
7.子元素选择器
选择器 | 描述 | 示例 |
:nth-child (index/even/odd/equation) | 选取每个父元素下的第index个元素或奇偶元素(index从1起) | :nth-child(3n)每个父元素下索引值是3的倍数的元素(n从0开始) |
:first-child | 父元素的第1个子元素 | $("ul li:first-child")每个ul中第1个li元素 |
:last-child | 父元素的最后1个子元素 | $("ul li:last-child")每个ul中最后1个li元素 |
:only-child | 如果某个元素是它父元素中唯一的子元素就会被匹配，否则不被匹配 | $("ul li:only-child")在ul中选取时唯一子元素的li元素 |
8.表单对象属性过滤选择器
选择器 | 描述 | 示例 |
:enabled | 所有可用元素 | $("#form1 :enabled")选取id为form1的表单下所有可用元素 |
:disabled | 所有不可用元素 | $("#form2:disabled") |
:checked | 所有被选中的元素（单选框、复选框） | $("input:checked")选取所有被选中的input元素 |
:selected | 所有被选中的选项元素（下拉列表） | $("select:selector")选取所有被选中的选项元素 |
9.表单选择器
选择器 | 描述 | 示例 |
:input | 所有input, textarea, select, button元素 | |
:text | 单行文本框 | |
:password | ||
:radio | ||
:checkbox | ||
:submit | ||
:image | ||
:reset | ||
:button | ||
:file | ||
:hidden |
