// id
$("#myDiv") // 查找id为 myDiv 的元素
/* 特殊字符示例
<span id="foo:bar">foo:bar</span>
<span id="foo[bar]">foo[bar]</span>
<span id="foo.bar">foo.bar</span>
*/
// 查找含有特殊字符的元素 （基本用不到，了解一下）
$("#foo\\[bar\\]")
$("#foo\\:bar")
$("#foo\\.bar")
// 标签
$("p") // 查找所有的p标签
$("p").eq(0) // 选择下标为0的p标签
// 类
$(".myClass") // 查找class类名为 myClass 的元素
// *
$("*") // 匹配页面中所有的标签元素
// 群组 selector1, selector2, selectorN
$("p, #myDiv, .myClass") // 匹配任意一个类的元素
// 后代
$("form input") // 查找元素form下面的所有的input标签
// 子代
$(".maDiv > p") // 查找类名为maDiv下面的子级p标签 （需要注意的是，查找的仅仅是maDiv下面的子级p标签，而不是maDiv下面的所有p标签）
// +
$(".prev + .prev") // 匹配所有紧接在prev元素后类名为prev的元素 (注意是紧接在prev元素后的prev，隔断以下的不算，不包含第一个)
// ~
$(".prev ~ .prev") // 匹配prev元素之后所有类名为prev的兄弟元素, 第一个prev的同辈 (不包含第一个)
// :first
$("li:first") // 获取第一个li元素
// :last
$("li:last") // 获取最后一个li元素
// :eq(index)
$("tr:eq(1)") // 匹配一个给定索引值的元素,从 0 开始计数
// :even
$("tr:even") // 匹配所有索引值为偶数的元素，从0开始计数
// :odd
$("tr:odd") // 匹配所有索引值为奇数的元素，从0开始计数
// :gt(index)
$("tr:gt(0)") // 匹配所有大于给定索引值的元素
// :lt(index)
$("tr:lt(2)") // 匹配所有小于给定索引值的元素
// :not(selector)
$(".notDiv span:not(.notSpan)") // 查找类名为notDiv元素下不包含类为notSpan的所有span元素
// :lant()
$("p:lang(it)") // 匹配所有p标签lang属性为it或为it-开头的元素
// :header
$(":header") // 匹配 h1 ～ h6 的标题元素
// :animated
$("div:animated") // 匹配所有正在执行动画效果的元素
/* 示例
<div>animate</div>
<button id="run">Run</button>
*/
$("#run").click(function(){
// 给所有不在执行动画效果的div元素执行一个动画特效
$("div:not(:animated)").animate({ marginLeft: "+=30" }, 1000);
});
// :focus
$(":focus") // 查找具有focus方法的元素，如input，我们给input标签添加（autofocus="autofocus"）属性使它自动获取焦点，这样我们控制台打印的时候就能看见啦！需要注意的是如果有多个（autofocus="autofocus"）属性的元素，但其实只有第一个是有效果的，我们获取的其实是第一个有焦点的元素
// :root
$(":root") // 选择该文档的根元素。 在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是<html>元素。
// :target (很少有用到，了解一下)
$("p:target") // 选择hash形式url标识符相匹配的元素 例如，给定的URI https://example.com/#foo， $( "p:target" )，将选择<p id="foo">元素。
// :contains(text)
$("div:contains('John')") // 查找所有内容为John的div元素
// :empty 匹配所有不包含子元素或者文本的空元素
$("#air div:empty") // 查找 #air 下面不包含子元素或者空文本的div元素
// :has
$("div:has(p)") // 匹配包含p标签的div
// :parent
$("div:parent") // 匹配含有子元素或者文本的div元素（不包含空元素）
// :hidden 匹配所有不可见元素，或者type为hidden的元素
$("td:hidden") // 查找隐藏的 td （注意visibility: hidden是查找不到的哟）
$("input:hidden") // 查找type为hidden的input元素
// :visible 匹配所有可见的元素
$("div:visible") //查找可见的div元素 （这里的visibility: hidden是可以找到的）
// [attribute] 匹配包含给定属性的元素
$("div[id]") // 查找含有id属性的div元素
// [attribute=value] 匹配给定的属性是某个特定值的元素
$("div[id='myDiv']") // 查找id属性值为myDiv的div元素
$("div[id=myDiv]") // 不要引号也是可以的
// [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
$("div[id!=myDiv]") // 查找id属性值不等于myDiv的div元素
// [attribute^=value] 匹配给定的属性是以某些值开始的元素
$("p[class^=pr]") // 查找class属性值以pr开头的p元素
// [attribute$=value] 匹配给定的属性是以某些值结尾的元素
$("p[class$=ev]") // 查找class属性值以ev结尾的p元素
// [attribute*=value] 匹配给定的属性是以包含某些值的元素
$("p[class*=ev]") // 查找class属性值包含ev的p元素
// [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用
$("div[class=tab][index=1]") // 查找class属性值为tab, index属性值为1的div元素
// :first-child 匹配所给选择器的第一个子元素 类似于:first，:first只匹配一个，:first-child可以匹配多个；例如有3个<ul><li></li><li></li></ul>，:first-child会匹配每一个ul下的第一个li元素
$("ul li:first-child") // 匹配ul下的第一个li元素，反回数组 （注意，如果ul下的第一个子元素不是li，那么是匹配不到的）
// :last-child 匹配所给选择器的最后一个子元素，跟:first-child同理
$("ul li:last-child") // 匹配ul下的最后一个li元素，反回数组
// :first-of-type 查找同级元素中找到的第一个指定的元素（包含嵌套中的第一个）
/*
<body>
<span>span1</span>
<span>span2</span>
<div id="n1">
<span> n1-span1</span>
<span class="a">n1-span2</span>
</div>
<div id="n2">
<p>p</p>
<p><span>n2-p-span</span></p>
<span class="b">n2-span</span>
</div>
</body>
*/
$("span:first-of-type") // 查找同级元素中找到的第一个指定的span元素（包含嵌套中的第一个span）
// :last-of-type 查找同级元素中找到的最后一个指定的元素（包含嵌套），跟:first-of-type同理
$("span:last-of-type")
// :nth-child(index) 为每一个父元素匹配子元素，索引从1开始 (:nth-child从1开始的，而:eq()是从0算起的！常用的有:nth-child(index))、:nth-child(even)、:nth-child(odd)、:nth-child(2n+1)等
$("ul li:nth-child(2)") // 查找每个ul下的第二个li标签
// :nth-last-child(n) 为每一个父元素匹配子元素，计数从最后一个元素开始，索引从1开始，使用方法与:nth-child()同理
$("ul li:nth-last-child(2)") // 查找每个ul下的倒数第二个li标签
// :nth-last-of-type(n) 这个与:first-of-type差不多的道理，不过这个可以指定索引，从后往前，索引从1开始；（查找同级元素中找到的指定索引的元素）
$("ul li:nth-last-of-type(2)") // 查找ul下找到的倒数第二个li元素（注意是找的倒数第二个，而不是倒数第二个）
// :nth-of-type(n) 和上面同理，这个是正叙，索引也是从1开始
$("ul li:nth-of-type(2)")
// :only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
$("ul li:only-child") // 查找ul中作为唯一标签的li子元素 （li必须是唯一的标签）
// :only-of-type 选择所有没有兄弟元素，且具有相同的元素名称的元素。
$('ul li:only-of-type') // 查找ul中作为唯一标签的li子元素，感觉这个跟:only-child没区别
/* form表单 ============================================================= */
// :input 匹配所有 input, textarea, select 和 button 元素
$(":input")
// :text 匹配所有的单行文本框 <input type="text" />
$(":text") // 查找type属性为text的input标签
// :password 匹配所有密码框 <input type="password" />
$(":password")
// :radio 匹配所有单选按钮 <input type="radio" />
$(":radio")
// :checkbox 匹配所有复选框 <input type="checkbox" />
$(":checkbox")
// :submit 匹配所有提交按钮,理论上只匹配 type="submit" 的input或者button，但是现在的很多浏览器，button元素默认的type即为submit，所以很多情况下，不设置type的button也会成为筛选结果。为了防止歧义或者误操作，建议所有的button在使用时都添加type属性。
$(":submit")
// :image 匹配所有图像域 <input type="image" />
$(":image")
// :reset 匹配所有重置按钮 <input type="reset" />
$(":reset")
// :button 匹配所有按钮 即type="button"，其它reset、submit等匹配不到
$(":button")
// :file 匹配所有文件域 <input type="file" />
$(":file")
// :enabled 匹配所有可用元素 (!disabled)
$("input:enabled") // 查找没有disabled 或 !disabled的input元素
// :disabled 匹配所有不可用元素 <input type="text" disabled />
$("input:disabled")
// :checked 匹配所有选中的元素复选框、单选框
$("input:checked")
// :selected 匹配所有选中的option元素，包括h5新增的多选
$("select option:selected")
以上内容来自jquery中文文档，加上自己经过测试对部分选择器的理解与标注，方便以后忘记的时候便于理解。
1360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
