jquery 学习笔记——选择元素

选择DOM元素和创建新的DOM元素

1. 选择被操作的元素

选择器实验室 chapter2/lab.selectors.html

1.1 CSS选择器

相同于CSS中的选择方法

Element #id .class 以及组合，如：label.out

Selector1,selector2,selector3: 或选择器

[selector1],[selector2],[selector3]： 与选择器

1.2 层次选择器

利用彼此之间的关系来选择元素，如：

Ancestor descendant ，如 div tr

Parent>child ， 如tr>td

Pre +next：匹配前面是临近兄弟节点pre的所有next元素 （紧相邻）

Pre~siblings: 匹配前面是兄弟节点pre的所有siblings元素 （不紧相邻）

1.3 属性选择器

E[attr]：有attr属性的元素E

E[attr=value] 严格相等

E[attr^=value] 开始

E[attr$=value]

E[attr*=value]

E[attr!=value]

1.4 内容选择器

E:Contains(text) 匹配名称为E，且文本内容包含text 的元素

E:has(selector) 匹配名称为E，且包含选择器对应的后代节点 的元素

这两个，contains用于匹配文本 has用于匹配selector

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

:parent 包含子元素或文本的节点，与:empty正好相反

1.5 位置选择器

:first

:last

:eq(n) :lt(n) :gt(n) :even :odd

1.6 可见选择器

:hidden :visible

1.7 表单选择器

:button input[type=reset] input[type=submit] input[type=button]或button

:checkbox input[type=checkbox]

:file input[type=file]

:header 匹配h1 h2 h3之类的标题元素

:hidden

:image

:input input select textarea button

:password

:radio

:reset

:submit

:text input[type=text]

1.8 表单属性选择器

:checked 匹配checked的radio和checkbox

:selected 选择已选中的选项元素 <option selected>

:disabled

:focus 当前焦点对象

:enabled

1.9 子元素选择器

:nth-child(n/even/odd/Xn+Y) n从1开始,选择子节点

:first-child 返回第一个子元素

:last-child

:only-child 返回没有兄弟节点的所有元素

例如： li:first-child 先找到所有的li,再找到li的父元素，选择父元素下的第一个元素， 和first相比，first只会选择第一个，而first-child会选择多个。

1.10其他选择器

:Not(selector) 对选择器执行非运算

:animated 匹配没有在执行动画效果的元素