锋利的绵羊的博客

站在巨人的肩膀上

jQuery选择器

选择器

  • 1.基本选择器

    $('#id')
    $('.class')
    $("p")                  //选取所有p元素
    $("*")
    $("div,span,p.myClass") //div和span和拥有class属性为myClass的p标签

  • 2.层次选择器

    $("div span")           //div里的所有span
    $("div > span")         //div下元素名是span的子元素
    $(".one + div") <==>  $(".one").next("div");      //class为one的下一个div元素
    $("#two~div")   <==>  $("two").nextAll ("div");   //id为two的元素后面的所有div兄弟元素

  • 3.过滤选择器

        a.基本过滤选择器

        $("div:first")              //选取所有div元素中第一个div元素
        $("div:last")               //选取所有div元素中的最后一个div元素
        $("input:not(.myClass)")    //选取class不是myClass的input元素
        $("input:even")             //选取索引是偶数的input元素
        $("input:odd")              //选取索引是奇数的input元素
        $("input:eq(1)")            //选取索引等于1的input元素(索引值从0开始)
        $("input:gt(1)")            //选取索引大于(不包括)1的input元素(索引值从0开始)
        $("input:lt(1)")            //选取索引小于(不包括)1的input元素(索引值从0开始)
        $(":header")                //选取所有标题元素如(h1,h2,h3...)
        $("div:animated")           //选取当前正在执行动画的所有div元素

        b.内容过滤选择器

        $("div:contains('我')")     //选取内容含有文本'我'的div元素
        $("div:empty")              //选取没有子元素(含文本元素)div元素
        $("div:has(p)")             //选取含有p元素的div元素
        $("div:parent")             //选取拥有子元素(含文本元素)的div元素

        c.可见性过滤选择器

        $(":hidden")                //选取所有不可见元素
        $("div:visible")            //选取所有可见的div元素

        d.属性过滤选择器

        $("div[id")                 //选取有id属性的元素
        $("div[title=test]")        //选取title属性为"test"的div元素
        $("div[title!=test]")       //title属性不等于"test"(含无该属性元素)的div元素
        $("div[title^=test]")       //title属性以"test"开头的div元素
        $("div[title$=test]")       //title属性以"test"结束的div元素
        $("div[title*=test]")       //title属性含有"test"的div元素
        $("div[id][title$='test']") //选取用有id属性,且title属性以test结束的div元素

        e.子元素过滤选择器

        $(":nth-child(index)")
            :nth-child(even)        //选取每个父元素下的索引值是偶数的元素
            div:nth-child(odd)      //选取div下的索引值是奇数的元素
            :nth-child(2)           //选取每个父元素下的索引值等于2的元素
            div:nth-child(3n)       //选取div下索引值是三的倍数的元素(n从0开始)
            :nth-child(3n+1)        //选取每个父元素下索引值是(3n+1)的元素(n从0开始)
        $("div.one:first-child")    //选取每个class为one的div元素下的一个子元素
        $("div:last-child")         //选取每个div元素下的最后一个元素
        $("div:only-child")         //选去只有一个子元素的div元素

        f.表单元素过滤选择器

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

  • 4.表单选择器

    $(":input")                     //选取所有<input>,<textarea>,<select>,<button>元素
    $(":text")                      //选取所有单行文本框
    $(":password")
    $(":radio")                     //选取所有单选框
    $(":checkbox")                  //选取所有复选框
    $(":image")
    $(":submit")
    $(":reset")                     //选取所有重置按钮
    $(":button")
    $(":file")                      //选取所有上传域
    $(":hidden")                    //选取所有不可见元素

注意事项

    1.特殊符号用转义符

        <div id='id#b'>bb</div>
        $('#id\\#b')
        <div id='id[1]'>bb</div>
        $('#id\\[1\\]')

    2.选择器中的空格(后代选择器与过滤选择器的不同引起的问题)

        $('.test :hidden')          //选取class为"test"的元素里面的隐藏元素
        $('test:hidden')            //选取隐藏的class为"test"的元素


阅读更多
个人分类: 学习ing
想对作者说点什么? 我来说一句

Jquery选择器大全

2011年02月11日 28KB 下载

时间日期选择器

2017年09月19日 133KB 下载

JQuery选择器详解JQuery选择器详解

2009年12月10日 117KB 下载

jQuery选择器速查表

2013年12月12日 440KB 下载

没有更多推荐了,返回首页

关闭
关闭