jquery的选择器列表

发表于 更新于 分类于 本文字数： 2k 阅读时长 ≈ 2 分钟

javascript要选择ID还是比较麻烦的。但是最近知道jquery的如此强大，《锋利的jquery》一书算是帮我总结了吧。其实也就是对于jquery的doc一个中文翻译。

但是为了方便以后自己学习，还是摘抄在这里吧。

总结一下 #xxx 表示选择 id=”xxx”的元素
.xxx表示选择class=”xxx”元素
xxx 表示所有的 xxx 标签元素

1. 基本选择器
$(“#test”) 选取id=”test”的元素
$(“.test”) 选取class=”test”的元素
$(“p”) 选取所有

元素
$(“*”) 选取所有的元素
$(“div,span,p.myClass”) 选取所有

,和拥有class=”myClass”的

标签的一组元素

2. 层次选择器
$(“div span”) 选取

里的所有的元素
$(“div > span”) 选取
元素下元素名是的子元素
$(‘.one + div’) 选取class=”one”的下一个
的兄弟元素
$(‘#two~div’) 选取id=”two”的元素后面的所有
兄弟元素

3. 基本过滤选择器
$(“div:first”) 选取所有

元素中第一个
元素
$(“div:last”) 选取所有
元素中最后一个
元素
$(“input:not(.myClass)”) 选取所有class不等于myClass的元素
$(“input:even”) 选取索引是偶数的元素

$(“input:odd”) 选取索引是奇数的元素
$(“input:eq(1)”) 选取索引等于1的元素
$(“input:gt(1)”) 选取索引大于1的元素，但是不包括1
$(“input:lt(1)”) 选取索引小于1的元素，但是不包括1

$(“:header”) 选取网页中所有的

,

,

…..
$(“div:animated”) 选取正在执行动画的
元素

4. 内容过滤选择器
$(“div:contain(‘我’)”) 选取含有文本”我”的

元素

$(“div:empty”) 选取不包含子元素（包括文本元素）的

空元素
$(“div:has(p)”) 选取含有

元素的

元素
$(“div:parent”) 选取拥有子元素(包括文本元素)的
元素

5. 可见性过滤选择器
$(“:hidden”) 选取所有不可见的元素。包括,

……

$(“div:visible”) 选取所有可见的

元素

6. 属性过滤选择器
$(“div[id]“) 选取拥有属性id的元素
$(“div”) 选取属性title=”test”的

元素
$(“div”) 选取属性title不等于”test”的
元素（注意：没有属性title的
元素也会被选取）

$(“div”) 选取属性title以”test”开始的

元素
$(“div”) 选取属性title以”test”结束的
元素
$(“div”) 选取属性title含有”test”的
元素

$(“div[id]“) 选取拥有属性id,并且属性title以”test”结束的

元素

7. 子元素过滤选择器
$(“:nth-child(index/even/odd/equation)”) 为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的
$(“ul li:first-child”) 选取每个

    中第一个
  • 元素

    $(“ul li:last-child”) 选取每个

      中最后一个
    • 元素
      $(“ul li:only-child”) 在
        中选取是唯一子元素的
      • 元素

        8. 表单对象属性过滤选择器
        $(“#form1:enabled”) 选取id为”form1”的表单内的所有可用元素

        $(“#form2:disabled”) 选取id为”form2”的表单内所有不可用的元素
        $(“input:checked”) 选取所有被选中的元素
        $(“select:selected”) 选取所有被选中的选项元素

        9. 表单对象属性过滤示例
        $(“:input”) 选取所有,