jQuery學習（二）-常規選擇器

一、常規選擇器分類
（1）、簡單選擇器
（2）、進階選擇器
（3）、高級選擇器
二，簡單選擇器（id選擇器，元素選擇器，類選擇器）
（1）id選擇器
使用jQuery選擇器時，必須使用“$()”函數來包裝我們css規則，經過jQuery對象包裝後，返回對應元素的jQuery對象，我們得到這個DOM節點後就可以進行操作啦。

#box{       //使用ID選擇器的css規則     
color:red;  //將ID爲box的元素字體顏色變紅
}

在jQuery選擇器裏，我們使用如下方式可以獲取同樣的結果：

$("#box").css("color","red"); //獲取DOM節點對象,並添加行爲

（2）元素選擇器和類選擇器

$("div").css("color","red");  //(1)元素選擇器，返回多個對象
$("#box").css("color","red"); //(2)ID選擇器，返回單個對象
$(".box").css("color","red"); //(3)類（clas）選擇器，返回多個對象

爲了證明ID返回的是單個元素，元素選擇器和類選擇器返回的是多個對象，我們可以使用jQuery的一個屬性length或size()方法查看返回元素個數。

三、進階選擇器（羣組選擇器，後代選擇器，通配符選擇器）

//(1)羣組選擇器
span , em , .box{  //多種選擇器添加紅色字體
    color:red;
}
$("span , em , .box").css("color","red");//羣組選擇器jQuery方式

//(2)後代選擇器
ul li a{
    color:red; //層層追溯到的元素添加紅色字體
}
$("ul li a").css("color","red"); //後代選擇器jQuery的方式

//(3)通配符選擇器
*{
    color:red; //頁面上所有元素都添加紅色字體
}
$("*").css("color","red"); //通配符選擇器jQuery的方式

//特殊選擇器，可以在ID和類（class）中指明元素前綴
$("div.box"); //限定.box元素獲取必須是div標籤
$("p#box") //限定#box元素獲取必須是p標籤

目前介紹的六中選擇器，在實際開發中我們可以靈活搭配，使得選擇器更加的準確和快速：

$("#box p , ui li * ").css("color","red"); //組合了多種選擇器

注意：通配符選擇器比如$(“*”),這種使用方法效率很低，影響性能，建議少用。

三、高級選擇器

//(1)後代選擇器
$("#box p").css("color","red"); 

jQuery爲後代選擇器提供了一個等價的find（）方法
$("box").find("p").css("color","red"); //和後代選擇器等價

//(2)子選擇器

$("#box >p").css("color","red"); //對應jQuery使用

jQuery爲子選擇器提供了一個定價的children()方法：
$("#box").children("p").css("color","red"); //和子選擇器等價

//（3）next選擇器（同級節點下一個元素）
$("#box+p").next("p").css("color","red");

jQuery爲next選擇器提供了一個等價的方法next();
$("#box").next("p").css("color","red");

//（4）nextAll選擇器（同級節點所有元素）
$("#box~p").css("color","red");

jQuery爲nextAll選擇器提供了一個等價的方法nextAll();
$("#box").nextAll("p").css("color","red");

注意：在find()、next()、nextAll()、和children()這四個方法中，如果不傳遞參數，就相當於傳遞了”*”,即任何節點，不但影響性能，在複雜情況下產生怪異的結果。

爲了補充高級選擇器的這四中模式，jQuery提供了更加豐富的方法來選擇元素

$("#box").prev("p").css("color","red"); //同級上一個元素
$("#box").prevAll("p").css("color","red"); //同級所有上面的元素


nextUntil()和 prevUnitl()方法是選定同級的下面或上面的所有節點，選定非指定的所有 元素，一旦遇到指定的元素就停止選定。

//同級上非指定元素選定，遇到則停止
$('#box').prevUntil('p').css('color', 'red');
//同級下非指定元素選定，遇到則停止 
 $('#box').nextUntil('p').css('color', 'red'); 


siblings()方法正好集成了 prevAll()和 nextAll()兩個功能的效果，及上下相鄰的所有元素 進行選定:

//同級上下所有元素選定
$('#box').siblings('p').css('color', 'red');

//等價於下面:
//同級上所有元素選定 
 $('#box').prevAll('p').css('color', 'red'); 
 //同級下所有元素選定
 $('#box').nextAll('p').css('color', 'red');

注意：以上選擇器對其變量進行緩存，速度會進一步提高
var box = $('#box'); 
var p = box.find('p');

四、屬性選擇器

注意：圖片上的“a””代表元素名稱“title”代表屬性名稱。

//選定具有這個屬性=這個屬性值的
$("li[class=class1]").css("color","red");

//選定具有這個屬性且以開頭屬性值匹配的
$("div[title^=title1]").css("color","red");