元素选择

0 简述

在操作任何元素之前，首先要获取元素，因此，元素选择是其他一切操作的基础

1 选择器选择

通用选择器、ID选择器、Class选择器、元素选择器

1.1 通用选择器

$('*') 页面上所有元素

1.2 ID选择器

$('#id') 页面上ID为id的第一个元素

1.3 Class选择器

$('.class') 页面上Class为class的所有元素
$('.class1.class2') 页面上Class包含class1和class2的所有元素

1.4 元素选择器

$('div') 页面上所有<div>标签的元素
$('div, span') 页面上 所有<div>,<span>标签的元素
$('div.class') 页面上所有包含class类的<div>标签元素

2 元素层级关系选择

$('ul.my-list>li>a') 页面上包含类my-list的<ul>下的<li>下的<a>标签元素
$('E>F')： F元素直属于E
$('E F')： F元素属于E，不一定是直属关系
另外，还有
E+F F紧邻E, 在E之前
E~F F与E同级，在E之前

3 元素属性选择

$('E[A]') 匹配标签名为E 包含A属性的所有元素
$('E[A='V']') 匹配标签名为E 且A属性值为V的所有元素
$('E[A^='V']') 匹配标签名为E 且A属性以V的开头的所有元素
$('E[A$='V']') 匹配标签名为E 且A属性以V的结尾的所有元素
另外，还有
!= 不等于
*= 包含
|= 等于以V-开头
~= 等于或包含

4 过滤器选择

对筛选出来的元素进行过滤，找到需要的那个元素

4.1 位置过滤器

a: first 第一个<a>标签元素
a: last 最后一个<a>标签元素
a: even 偶数索引
a: odd 奇数索引
a: eq(n) 选择第n个匹配元素
a: gt(n) 大于，第n个元素之后的元素
a: lt(n) 小于，第n个元素之前的元素

4.2 子过滤器

div p:first-child 第一个子元素p
:last-child 最后一个子元素

:nth-child(n) 第一个子元素
:nth-child(even|odd) 偶或奇索引子元素
:nth-child(Xn+Y) 所给公式索引的子元素

下面三个，与上面三个对应类似，不同在于，下面三个是从倒数计数
:nth-last-child(n)
:nth-last-child(even|odd)
:nth-last-child(Xn+Y)

div .description: first-of-type <div>内部具有description的第一个子元素
div .description: last-of-type 最后一个

下面6个，与之前对应类似
:nth-of-type(n)
:nth-of-type(even|odd)
:nth-of-type(Xn+Y)

:nth-last-of-type(n)
:nth-last-of-type(even|odd)
:nth-last-of-type(Xn+Y)

4.3 表单过滤器

:checkbox 复选框元素<=>input[type=checkbox]
:checked 被选中状态，复选框、单选框或者下拉框元素
:disabled 禁用状态
:enable 启用状态
:file 文件元素 <=>input[type=file]
:focus 处于聚焦状态元素