jQuery—选择器

摘抄自《锋利的jQuery》

一、基本选择器

$("#one").css("background","#bbffaa");

选取id为one的元素, 返回单个元素

$(".mini").css("background","#bbffaa");

选取所有class为test的元素

$("div").css("background","#bbffaa");

选取所有<div>元素

$("*").css("background","#bbffaa");

选取所有的元素

$("span, #two").css("background","#bbffaa");

选取所有<span>元素和id为two的元素, 以逗号相隔

二、层次选择器

$("body div").css("background","#bbffaa");

选取<body>里所有的<div>元素

$("body > div").css("background","#bbffaa");

选取<body>下元素名是<div>的子元素

$(".one + div").css("background","#bbffaa");

选取class为one的下一个<div>同辈元素

$("#two ~ div").css("background","#bbffaa");

选取id为two的元素后面的所有<div>同辈元素

三、过滤选择器

1、基本过滤选择器

$("div:first").css("background","#bbffaa");

选取所有<div>元素中第1个<div>元素, 返回单个元素

$("div:last").css("background","#bbffaa");

选取所有<div>元素中最后一个<div>元素, 返回单个元素

$("div：not(.one)").css("background","#bbffaa");

选取class不是one的<div>元素

$("div:even").css("background","#bbffaa");

选取索引是偶数的<div>元素

$("div:odd").css("background","#bbffaa");

选取索引是奇数的<div>元素

$("div:eq(3)").css("background","#bbffaa");

选取索引等于3的<div>元素

$("div:gt(3)").css("background","#bbffaa");

选取索引大于3的<div>元素

$("div:lt(3)").css("background","#bbffaa");

选取索引小于3的<div>元素

$(":header").css("background","#bbffaa");

选取网页中所有的<h1>,<h2>,<h3>……

$(":animated").css("background","#bbffaa");

选取正在执行动画的<div>元素

$(":focus").css("background","#bbffaa");

选取当前获取焦点的元素

2、内容过滤选择器

$("div:contains(di)").css("background","#bbffaa");

选取含有文本"di"的<div>元素

$("div:empty").css("background","#bbffaa");

选取不包含子元素(包括文本元素)的<div>空元素

$("div:has('.mini')").css("background","#bbffaa");

选取含有class为mini元素的<div>元素

$("div:parent").css("background","#bbffaa");

选取拥有子元素(包括文本元素)的<div>元素

3、可见性过滤选择器

$("div:hidden").css("background","#bbffaa");

选取所有不可见的<div>元素(所有的)

$("div:visible").css("background","#bbffaa");

选取所有可见的<div>元素

4、属性过滤选择器

$("div[title]").css("background","#bbffaa");

选取含有属性title的<div>元素

$("div[title=test]").css("background","#bbffaa");

选取属性title值等于"test"的<div>元素

$("div[title!=test]").css("background","#bbffaa");

选取属性title值不等于"test"的<div>元素

$("div[title^=te]").css("background","#bbffaa");

选取属性title值以"te"开始的<div>元素

$("div[title$=est]").css("background","#bbffaa");

选取属性title值以"est"结束的<div>元素

$("div[title*=es]").css("background","#bbffaa");

选取属性title值含有"es"的<div>元素

5、子元素过滤选择器

$("div .one :nth-child(2)").css("background","#bbffaa");

选取每个class为one的<div>父元素下的第2个子元素

$("div .one :first-child").css("background","#bbffaa");

选取每个class为one的<div>父元素下的第1个子元素

$("div .one :last-child").css("background","#bbffaa");

选取每个class为one的<div>父元素下的最后一个子元素

$("div .one :only-child").css("background","#bbffaa");

如果class为one的<div>父元素下只有一个子元素, 就选取

6、表单对象属性过滤选择器

$("#form1 input:enabled").val("这里变化了！");

选取表单内可用<input>元素

$("#form2 input:disabled").val("这里变化了！");

选取表单内不可用的<input>元素

$("input:checked").length

多选框选中的个数

$("select :selected").text();

下拉框选中的内容

四、表单选择器

$(":input")

选取所有<input>、<textarea>、<select>和<button>

$(":text")

选取所有的单行文本框

$(":password")

选取所有的密码框

$(":radio")

选取所有的单选框

$(":checkbox")

选取所有的多选框

$("submit")

选取所有的提交按钮

$("image")

选取所有的图像按钮

$("reset")

选取所有的重置按钮

$("button")

选取所有的按钮

$("file")

选取所有的上传域

$(":hidden")

选取所有不可见元素