jQuery学习笔记2之jQuery选择器

一、jQuery的基本选择器

下面是利用jQuery的基本选择器进行的演示，跟css的规则一致

元素名直接调用元素名

class用.classname

id用#idname

并列的直接用“,”隔开

$(function(){

//使用id选择器 选择id=btn1的元素
$("#btn1").click(function(){
//alert("btn1 is clicked...");
$("#one").css("background","#ffbbaa");
});
$("#btn2").click(function(){
//alert("btn1 is clicked...");
$(".mini").css("background","#ffbbaa");
});
$("#btn3").click(function(){
//alert("btn1 is clicked...");
$("div").css("background","#ffbbaa");
});
$("#btn4").click(function(){
//alert("btn1 is clicked...");
$("span,#two").css("background","#ffbbaa");
});

});

二、jQuery层次选择器

如果想通过DOM元素之间的层次关系来获取特定的元素，例如：后代元素，子元素，相邻元素，兄弟元素等，则需要使用层次选择器:

实际应用代码：//$("body div").css("background","#ffbbaa");//body内所有div
//$("body > div").css("background","#ffbbaa");//body的所有子div
//$("#one+div").css("background","#ffbbaa");//id为one的所有相邻div
//$("#one~div").css("background","#ffbbaa");//id为one的所有兄弟div
//$("#one span").css("background","#ffbbaa");//不相邻选不上
//$("#one").nextAll("span").css("background","#ffbbaa");//id为one的后所有的span元素
//$("#one").nextAll("span:first").css("background","#ffbbaa");//id为one的后第一个span元素

三、过滤选择器

1.基本过滤选择器

:first 选取第一个元素

:last 选取最后一个元素

:not(selector) 去除所有与选择器匹配的元素

:even 选取所有索引为偶数的元素（从0开始）

:odd 选取所有索引为奇数的元素（从0开始）

:eq(index) 选取索引等于index的元素

:gt(index) 选取索引大于index的元素

:lt(index) 选取索引小于index的元素

:header 选取所有标题元素，如：h1,h2,h2...

:animated 选取当前正在执行动画的所有元素

如：$("span:first").css("background","#ffbbaa");//选取第一个span元素

$("div:animated").css("background","#ffbbaa");//选取执行动画的div

2.内容过滤选择器 主要规则体现在它所包含的子元素和文本内容上

:contains(text) 选取含有文本text的元素

:empty 选取不包含子元素或者文本的元素

:has(selector)  选取含有选择器所匹配元素的元素

:parent 选取含有子元素或者文本的元素

如：$("div:contains('move')").css("background","#ffbbaa");//选取含有move文本的div

3.可见性过滤选择器

:hidden 选择所有不可见元素

:visible 选择所有可见元素

4.属性过滤选择器

[attribute] 选择拥有此属性的元素

[attribute=value]  选择指定属性值为value的元素

[attribute!=value] 选择指定属性值不为value的元素

[attribute^=value] 选择以指定属性值为value开始的元素

[attribute$=value] 选择以指定属性值为value结束的元素

[attribute*=value] 选择包含指定属性值为value的元素

5.子元素过滤选择器 需要在：前输入一个空格

:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素（index从1算起）

:first-child 选取每个父元素的第一个子元素

:last-child 选取每个父元素的最后一个子元素

:only-child 选取父元素的唯一的子元素

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

:enabled 选择所有可用的元素

:disabled 选择所有不可用的元素

:checked 选择所有被选中的元素

:selected 选择所有选中的元素

7.表单选择器

:input 选取所有的input textarea select 和button元素

:text 选取所有的单行文本框

:password 选取所有的密码框元素

:radio 选取所有的单选框

:checkbox 选取所有的多选框

:submit 选取所有的提交按钮

:image 选取所有的图像按钮

:reset 选取所有的图像按钮

:button 选取所有的按钮

:file 选取所有的上传域

:hidden 选取所有的不可见元素