2.标签选择器
<div id="aa" name="aa">id是aa</div>
<p class="bb">class是bb</p>
<div id="cc">
<div name="cc1">1</div>
<div name="cc2">2</div>
</div>
$("#aa") //匹配id=aa的标签
$("div,p"); //匹配所有div与p标签
$("#cc > div"); //选择id=cc的所有子元素
$("p + div"); //匹配p后面的第一个div标签
$("#aa ~ p"); //匹配所有与 id是aa标签 同辈的p标签
$("div[id]") //查找所有含有 id 属性的 div 元素
$("div[name='aa']")//查找所有 name 属性是 aa 的 div元素
$("div[name^='cc']")//查找所有 name 属性是 cc开头的 div元素
$("div[name$='2']")//查找所有 name 属性是 2结尾的 div元素
$("div[name*='cc']")//查找所有 name 属性包含cc的 div元素
$("div[id][name$='a']")//找到所有含有 id 属性,并且它的 name 属性是以 a 结尾的
2.:选择器
$(":root") //获取文档的根元素<html>元素
$('li:first'); //选择第一个li标签
$('li:last') //选择最后一个li标签
$("input:not(:checked)"); //查找所有未选中的 input 元素
$("li:even"); //匹配所有索引值为偶数的li元素,从 0 开始计数
$("li:odd") //匹配所有索引值为奇数的li元素,从 0 开始计数
$("li:eq(1)") //匹配第一个li元素,从 0 开始计数
$("li:gt(2)") //匹配所有大于索引值2的li元素,从 0 开始计数
$("li:lt(2)") //匹配所有小于索引值2的li元素,从 0 开始计数
$(":header"); //匹配如 h1, h2, h3之类的标题元素
$(":header").css("background", "#f00"); //匹配如 h1, h2, h3之类的标题元素,将他们的背景都设置红色
$("li:empty") //匹配所有不包含子元素或者文本的空元素
$("li:parent") //匹配含有子元素或者文本的li元素
$("li:hidden") //匹配所有不可见的li元素,或者type为hidden的元素
$("li:visible") //匹配所有的可见元素li
$("ul li:first-child")//在每个 ul 中查找第一个 li元素
$("ul li:last-child")//匹配最后一个li子元素
$("ul li:nth-child(2)")//在每个 ul 查找第 2 个li元素
$("ul li:nth-last-child(2)");//在每个匹配的ul中查找倒数第二个li元素
$(":password") //查找所有密码框
$(":radio") //匹配所有单选按钮
$(":checkbox") //匹配所有复选框
$(":button") //匹配所有按钮
:contains选择器:匹配包含给定文本的元素
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
$("div:contains('John')") //[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]
:has选择器:匹配含有选择器所匹配的元素 的元素
<div><p>Hello</p></div>
<div>Hello again!</div>
$("div:has(p)").addClass("test"); //[ <div class="test"><p>Hello</p></div> ]
:only-child选择器:匹配唯一子元素
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
</ul>
$("ul li:only-child") //[ <li>Glen</li> ]