jQuery 选择器

1 基础选择器

1.1 标签选择器

<p>标题</p>
$("p");

1.2 id 选择器

<p id="title">标题</p>
$("#title");

1.3 class 选择器

<p class="title">标题</p>
$(".title");

1.4 通配符选择器

<div class="content">
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
</div>
$('.content *');//获取子元素

1.5 并集选择器

<p>我是段落</p>
<button>我是按钮</button>
$('p,button');//同时选择多个元素

1.6 交集选择器

<p class="red">我是段落1</p>
<div class="red">我是div1</div>
$('p.red');

2 层级选择器

2.1 子代选择器

<ul>
    <span>我是ul的span1</span>
    <li>我是li1 <span>我是li1的span1</span></li>
    <span>我是ul的span2</span>
</ul>
$('ul>span');//选取ul下一级的所有span元素

2.2 后代选择器

<ul>
    <span>我是ul的span1</span>
    <li>我是li1 <span>我是li1的span1</span></li>
    <span>我是ul的span2</span>
</ul>
$('ul span');//选取ul内的所有span元素

2.3 兄弟选择器

<ul>
    <span id="span1">我是ul的span1</span>
    <li>我是li1 <span>我是li1的span1</span></li>
</ul>
$("#span1+li");//选取id为span1下一个同级li元素

3 过滤选择器

3.1 基本筛选器

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>
$('tr:first');//:first代表选取第一行
$('tr:last');//:last代表选取最后一行
$('tr:even');//:even代表选取下标为偶数的行
$('tr:odd');//:odd代表选取下标为偶数的行
$('tr:lt(2)');//lt(2)即less then,选取下标小于2的行
$('tr:eq(2)');//eq(2)即equal,选取下标等于2的行
$('tr:gt(2)');//gt(2)即great then,选取下标大于2的行
$('tr:not(tr:eq(2))');//选取下标不等于2的行

3.2 内容筛选器

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td><span></span></td></tr>
</table>
$('td:contains("男")');//选取包含内容为“男”的单元格
$('td:has(span)');//选取包含标签为span的单元格
$('td:empty');//选取内容为空的单元格
$('td:parent');//选取内容不为空的单元格

3.3 属性筛选器

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN" title="Chinese">zh CN</a>
$('[hreflang]');//选取包含hreflang属性的所有元素
$('a[hreflang="en"]');//选取hreflang属性值等于en的所有元素
$('a[hreflang!="en"]');//选取hreflang属性值不等于en的所有元素
$('a[hreflang|="en"]');//选取hreflang属性值以en开头的所有元素
$('a[hreflang^="en"]');//选取hreflang属性值以en开头的所有元素
$('a[hreflang$="CN"]');//选取hreflang属性值以CN结尾的所有元素
$('a[hreflang*="CN"]');//选取hreflang属性值包含CN的所有元素
$('a[hreflang~="CN"]');//选择hreflang属性用空格分隔的值中包含一个给定值为CN的超链接
$('a[hreflang="zh-CN"][title="Chinese"]');

3.4 可见性筛选器

<p style="display: block">我是显示段落</p>
<p style="display: none">我是隐藏段落</p>
$('p:visible');//选取显示的p元素
$('p:hidden');//选取隐藏的p元素

3.5 子元素筛选器

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
</ul>
$('ul li:first-child');//获取父级ul下第一个li子元素
$('ul li:last-child');//获取父级ul下最后一个li子元素
$('ul li:nth-child(2)');//获取父级ul下第二个li子元素

4 表单选择器

4.1 表单类型选择器

<form>
    <input type="text"><br>
    <input type="password"><br>
    <input type="file"><br>
    <input type="button" value="按钮"><br>
    <input type="submit" value="提交按钮"><br>
    <input type="reset" value="重置按钮"><br>
</form>

//获取
$('input:text');
$('input:password');
$('input:file');
$('input:button');
$('input:submit');
$('input:reset');

4.2 表单状态选择器

$(':focus')[0];
$(':checked')[0];
$(':disabled')[0];
$(':selected')[0];