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"的元素