jQuery选择器

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

 

基本 选择器

//id选择器：改变id为box的元素的背景色
    $("#box").css("background","#ffffff");
//类选择器：改变class为box的 所有 元素的背景色
    $(".box").css("background","#ffffff");
//标签选择器：改变元素名是<div>的所有元素的背景色
    $("div").css("background","#ffffff");
//*选择器：改变所有元素的背景色
    $("*").css("background","#ffffff");
//多个元素选择器：改变所有<span>元素 和 id为box的元素的背景色
    $("span,#box").css("background","#ffffff");

层次选择器

//(ancestor descendant)：选取<div>里所有的<h1>元素
    $("div h1").css("background","#ffffff");
//(parent > child)：选取<div>中的所有直接子节点<p>元素
    $("div p").css("background","#ffffff");

//(prev + next)：在两个元素同级别的情况下，选取紧接在<h1>后面的一个<h2>元素
    $("h1 + h2 ").css("background","#ffffff");
//(prev~siblings)：在元素同级别的情况下，选取在<h1>之后的所有<h2>元素
    $("h1 ~ h2").css("background","#ffffff");

//其中，可以用next()方法来代替$('prev + next')，例如:
    $('h1 + h2') => $('h1').next('h2')
//可以用nextAll()方法来代替$('prev ~ siblings')，例如：
    $('h1 ~ h2') => $('h1').nextAll('h2')

过滤选择器

//基本过滤选择器

//选取第一个元素：选取所有<div>元素中第一个<div>元素
    $("div:first")
//选取最后一个元素：选取所有<div>元素中最后一个<div>元素
    $("div:last")
//去除匹配元素：选取class不是myClass的<div>元素
    $("div:not(.myClass)")
//偶数索引元素：选取索引是偶数的div元素
    $("div:even")
//奇数索引元素：选取索引是奇数的div元素
    $("div:odd")
//指定索引元素：选取索引等于2的div元素
    $("div:eq(2)")
//大于索引元素：选取索引大于2的div元素
    $("div:gt(2)")
//小于索引元素：选取索引小于2的div元素
    $("div:lt(2)")
//标题元素：选取所有的标题元素，例如h1,h2,h3等等
    $(":header")
//动画元素：选取当前正在执行动画的所有<div>元素
    $("div:animated")
//选取当前获得焦点的元素
    $(":focus")


//内容过滤选择器

//包含文本内容元素：选取所有含有文本内容为 “我” 元素
    $("div:contains("我")")
//空元素：选取所有不包含子元素（包括文本元素）的<div>空元素
    $("div:empty")
//包含匹配元素：选取所有含有<p>元素的<div>元素
    $("div:contains("我")")
//包含子元素或文本元素：选取拥有子元素（包括文本元素）的所有<div>元素
    $("div:parent")


//可见性过滤选择器

//选取所有不可见元素:包括<input type="hidden">,<div style="display:none;">和<div style="visibility:hidden">等元素
    $(":hidden")
//选取所有可见元素：选取所有可见的div元素
    $("div:visible")



//属性过滤选择器

//[attribute]：选择拥有属性id的<div>元素
    $("div[id]")
//[attribute=value]：选取属性title的值为"test"的<div>元素
    $("div[title=test]")
//[attribute!=value]：选取属性title的值不等于"test"的<div>元素（注意：没有title属性的元素也会被选取）
    $("div[title!=test]")
//[attribute^=value]：选取属性title的值以"test"开始的<div>元素
    $("div[title^=test]")
//[attribute$=value]：选取属性title的值以"test"结束的<div>元素
    $("div[title$=test]")
//[attribute*=value]：选取属性title的值含有"test"的<div>元素
    $("div[title*=test]")
//[attribute|=value]：选取属性title的值等于"test"或以"test"为前缀（该字符串后跟一个连字符'-'）的<div>元素
    $("div[title|=test]")
//[attribute~=value]：选取属性title用空格分隔的值中包含字符"test"的<div>元素
    $("div[title~=test]")
//[attribute1][attribute2][attribute3]：选取拥有 属性id并且属性title的值以"test"结尾的<div>元素
    $("div[id][title$=test]")


//子元素过滤选择器
//:nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素（index从1算起）    
    $("div.one:nth-child(2)")//选取每个class="one"的元素的第二个子元素
    $("div.one:nth-child(even)")//选取每个class="one"的父元素下索引值为偶数的元素
    $("div.one:nth-child(3n+1)")//选取每个class="one"的父元素下索引值为(3n+1)的元素

    $("div.one:first-child")//选取每个class="one"的元素的第一个子元素
    $("div.one:last-child")//选取每个class="one"的元素的最后一个子元素
    $("div.one:only-child")//选取每个只拥有一个子元素并且class="one"的父元素


//表单对象属性过滤选择器

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

表单选择器

$(":input")    //选取所有<input>、<textarea>、<select>和<button>元素
$(":text")    //选取所有的单行文本框
$(":password")    //选取所有的密码框
$(":radio")    //选取所有的单选框
$(":checkbox")    //选取所有的多选框
$(":submit")    //选取所有的提交按钮
$(":image")    //选取所有的图像按钮
$(":reset")    //选取所有的重置按钮
$(":button")    //选取所有的按钮
$(":file")    //选取所有的上传域
$(":hidden")    //选取所有不可见元素

 

参考资料：《锋利的jQuery 第2版》