jQuery选择器笔记

选择器是jQuery的根基。
jQuery中的选择器完全继承了css风格。利用jQuery选择器，可以非常便捷快速地找到特定的DOM元素，然后为他们添加相应的行为，而无需担心浏览器是否支持这一选择器。
jQuery选择器有完善的处理机制，使用jQuery获取网页中不存在的元素也不会报错，例如：

<div>text</div>
<script>
    $("#tt").css("color","red");       //这里无需判断$("#tt")是否存在
</script>

需要注意的是，$(“#tt”)获取的永远是对象，即使网页上没有此元素。因此当要用jQuery检测某元素在网页上是否存在时，不能用以下代码：

if($("#tt")){
    //do something
}

而应该根据获取的元素的长度来判断

if($("#tt").length > 0){
    //do something
}

或者转化为DOM对象

if($("#tt")[0]){
    //do something
}

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

基本选择器

根据给定的id匹配一个元素 $("#one").css("background","red");
根据给定的类匹配元素 $(".mini").css("background","black");
根据给定的元素名匹配 $("div").css("background","black");
匹配所有元素 $("*").css("background","black");
将每个选择器匹配到的元素合并后一起返回 $("span,#two").css("background","black");

层次选择器

通过DOM元素之间的层次关系来获取特定元素。
选取所有后代元素 $("body div").css("background","black");
选取所有子元素 $("body > div").css("background","black");
选取class为one的下一个

同辈元素 $(".one + div").css("background","black");
选取id为two的元素后面所有的

同辈元素 $("#two~div").css("background","black");
第一、二个选择器比较常用，后面两个可以用更加简单的方法代替：

$(".one + div") 等价于 $(".one").next("div");
$("#two ~ div") 等价于 $("#two").nextAll("div");

过滤选择器

过滤选择器主要是通过特定的规律筛选出所需的DOM元素，选择器以一个冒号（：）开头。分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

1、基本过滤选择器

$("div:first").css("background","black");  //选取所有div中第一个<div>元素改变背景色
$("div:last").css("background","black");   //选取所有div中最后一个<div>元素改变背景色
$("div:not(.one)")  //选取class不为one的<div>（去除所有与给定匹配的元素）
$("input:even")    //选取索引是偶数的<input>元素，索引从0开始
$("input:odd")     //选取索引是奇数的<input>元素，索引从0开始
$("input:eq(index)")  //选取索引值为index的<input>元素
$("input:gt(index)")  //选取索引值大于index的<input>元素（不包括index）
$("input:lt(index)")  //选取索引值小于index的<input>元素（不包括index）
$(":header")    //选取网页中所有的<h1>,<h2>,<h3>,...
$(":animated")  //选取当前正在执行动画的所有元素
$(":focus")   //选取当前获取焦点的元素

2、内容过滤选择器

主要体现在它所包含的子元素或文本内容上。

$("div:contains(id)")      //选取含有**文本内容为id**的元素
$("div:empty")      //选取不包含子元素（包括文本元素）的<div>空元素
$("div:has(p)")/$("div:has('.mini')")     //选取含有<p>元素/class为mini的<div>元素(选取所含选择器所匹配的元素的元素)
$("div:parent")   //选取拥有子元素（包括文本元素）的<div>元素

3、可见性过滤选择器

根据元素的可见或不可见状态选择相应的元素

$(":hidden")   //选取所有不可见的元素
包括**<input type="hidden">,<div style="display:none;">,<div style="visibility:hidden;">**.如果想选取<input>元素，可以使用$("input:hidden")。
$(":visible")   //选取所有可见元素

4、属性过滤选择器

通过元素的属性来获取相应的元素。

$("div[id]")   //选取属性id的元素
$("div[title=test]")   // x选取title为test的<div>元素
[attribute != value]    //选取属性值不等于value元素
$("div[title^=test]")   //选取属性title以“test”开始的div元素
[attribute$=value]      //选取属性值以value结尾的元素
[attribute*=value]      //选取属性值含有value的元素
[attribute|=value]      //选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“—”）
[attribute~=value]      //选取属性用空格分隔的值中包含一个给定值的元素
[attribute][attribute2][attributeN]   //用属性选择器合并成一个复合性选择器。满足多个条件

5、子元素过滤选择器

稍微复杂些，不过只要将元素的父元素和子元素区分清楚，另外还要注意它与普通过滤选择器的区别。

：nth-child(index/even/odd/equation)  //选取每个父元素下的第index个子元素或奇偶元素（index从1起算）
：first-child   //选取每个父元素的第一个子元素，$("ul li:first-child"),选取每个<ul>中第一个<li>元素
：last-child   //选取每个父元素的最后一个子元素，$("ul li:last-child"),选取每个<ul>中最后一个<li>元素
：only-child   //选取某个元素是他父元素中唯一的子元素，，如果父元素中含有其他子元素将不会被匹配

：nth-child()很常用，详细功能如下：

：nth-child(even)   //选取每个父元素下索引值是偶数的元素
：nth-child(odd)   //选取每个父元素下索引值是奇数的元素
：nth-child(2)   //选取每个父元素下索引值是2的元素
：nth-child(3n)   //选取每个父元素下索引值是3的倍数的元素(n从1开始)
：nth-child(3n+1)   //选取每个父元素下索引值是(3n+1)的元素(n从1开始)

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

$("#form1:enabled")   //选取id为“form1”的表单内的所有可用元素
：disabled       //选取所有不可用的元素
：checked        //选取所有被选中的元素（单选框，复选框）
：selected       //选取所有被选中的选项元素（下拉列表）

表单选择器

为了使用户能够更加灵活地操作表单，jQuery中专门加入了表单选择器。

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

选择器中的一些注意事项

1、选择器中含有“.”,”#”,”(“,”]”等特殊符号

如果按照普通的方式处理会出错，要使用转移符转义。

$("#id#b");
$("#id[1]");

以上代码不能正确获取元素，正确的写法如下：

$("#id\\#b");
$("#id\\[1\\]");

2、选择器中含有空格

选择器中的空格不容忽视，多一个或少一个也许会有截然不同的结果

$(".test :hidden")   //带空格

以上代码是选取class为test的元素里面的隐藏元素

$(".test:hidden")   //不带空格

选取隐藏的class为test的元素