摘要：干貨篇之選擇元素實驗的的代碼選擇器選擇正在處理動畫的元素選擇第一個元素選擇最后一個元素選擇第個元素從開始選擇序號為偶數的元素選擇序號為奇數的元素選擇序號大于的元素選擇序號小于的元素選擇所有的文本輸入框

html

    
    
    
    


Jacqui"s Flower Shop

    

        

            

                

                    Astor:
                    
                
                

                    Daffodil:
                    
                
                

                    Rose:
                    
                
            
            

                

                    Peony:
                    
                
                

                    Primula:
                    
                
                

                    Snowdrop:
                    
                
            
        
    
    

        Place Order
    

css

h1 {
    min-width: 70px;
    border: thick double black;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: x-large;
    padding: .5em;
    color: darkgreen;
    background-image: url("border.png");
    background-size: contain;
    margin-top: 0;
}

.dtable {
    display: table;
}

.drow {
    display: table-row;
}

.dcell {
    display: table-cell;
    padding: 10px;
}

.dcell > * {
    vertical-align: middle
}

input {
    width: 2em;
    text-align: right;
    border: thin solid black;
    padding: 2px;
}

label {
    width: 5em;
    padding-left: .5em;
    display: inline-block;
}

#buttonDiv {
    text-align: center;
}

#oblock {
    display: block;
    margin-left: auto;
    margin-right: auto;
    min-width: 700px;
}

.hover{
    background: blue;
    color: white;
    height:300px;
    width:300px;
}

:animated :選擇正在處理動畫的元素

:first    :選擇第一個元素

:last     :選擇最后一個元素

:eq(n)    :選擇第n個元素(從0開始)

:even     :選擇序號為偶數的元素

:odd      :選擇序號為奇數的元素

:gt(n)    :選擇序號大于n的元素

:lt(n)    :選擇序號小于n的元素

:text     :選擇所有的文本輸入框

:contains(text)   :選擇包含指定文本的元素

file     :選擇所有文件上傳輸入框

:button   :選擇所有的按鈕

:checkbox  :選擇所有的復選框

:hidden     :選擇隱藏的元素

實例
$("img:odd").css("border","thick double red");選擇序號為奇數的img元素
$("img:first").css("border","thick double red")  選擇第一個img元素

context 選擇元素時使用的上下文對象

$("img:odd").context.TagName;
each(function()) 在每個選中的元素上運行給定的函數

$("img").each(function(index,elem){
console.log(ele.TagName+"   "+elem.id);//這里的index表示每一個元素的索引，elem表示每一個元素的htmlElement對象，并不是jquery對象
})
index(jquery) || index(selector)  返回給定jquery對象在住對象中的序號，或者返回給定選擇器參數的索引

$("img").index("img[src=*astor]")

length || size()  返回的時jquery對象個數

$("img:odd").length
toArray()  返回一個有jquery對象中包含的htmlEelments數組

var content=$("img:odd").toArray()  這里content返回的htmlElements數組

var content=$("img:odd");
for(var i=0;i
add
add函數允許我們添加更多的項，常用的有add(htmlElement[]),add(selector),add(jquery)
實例：

$("img:odd").add("img:even").css("border","thick double red");

var jq=$("img[src*=astor]");
$("img:even").add(jq).add("img:even").css("border","thick double red");

var label=document.getElementsByTagName("label");
$("img:odd").add(label).css("border","thick double red");
slice()
用來獲取特定的一組子元素
實例：

 $("img").slice(0,3).css("border","thick double red");   //獲取0-2的元素
 
  $("img").slice(3).css("border","thick double red");   //獲取3-結束
 
 
filter
filter可以將不滿足指定條件的元素剔除，常用的方法有filter(jquery),filter(htmlElement),filter(function(index)),filter(selector)
實例

   //這里填入的參數selector
 $("label").filter("[for*=p]").css("background-color","blue").css("font-size","20px").css("border","2px solid red");
     
      $("img").filter(function (index) {     //index是每一個元素的索引，如果返回的是true就會選定，false就會剔除這個元素
        if(index==4)
        {
            return true;
        }
        else return false;
    }).css("border","thick double red");
    
    
    var elem=document.getElementsByTagName("label")[1];    //只選擇第二個label
    $("label").filter(elem).css("font-size","30px")     //這里填入的參數是htmlElement對象
 
 
not
not方法是filter方法的補充，主要是刪除匹配條件的元素，而filter則是保留滿足匹配條件的元素，常用的方法有not(selector),not(htmlElement),not(jquery),not(function(index))
實例：

 $("label").not("[for*=p]").css("background-color","red");    //選擇for不帶p的label元素

    $("label").not(function (index) {   //哪個元素返回true就刪除，false保留
        if(index==0)
            return true;      //這里就會刪除第一個label元素，保留后面的元素
        else
            return false;

    }).css("background-color","yellow");
has
選擇擁有指定后代的選擇器
實例：

    $("div.dcell").has("img[src*=astor]").css("border","thick double red");  //選擇子代擁有img屬性src帶有astor的div.dcell元素
    
    var s=$("[for*=astor]");
    $("div.dcell").has(s).css("border","thick double red");   //參數為jquery對象

map
以一個函數為參數，map方法能夠幫助我們靈活的處理一個jquery對象，從而得到滿足需要的一個jquery對象。針對源jquery對象中的每一個元素都調用一次這個函數，而函數返回的HtmlElement對象將會變成一個jquery對象，參數是function(index,elem),其中`index是序號，elem是jquery對象中的每一個HTMLElelments對象，這里必須要有返回值，不然沒有意義
實例：

$("div.dcell").map(function(index,elem){
    return elem.getElementsByTagName("img")[0];   //這里的elem是$(div.dcell)中的每一個HtmlElement對象，返回的是img元素
}).css("border","thick double red");      //可以很清楚的看到這里返回的htmlElement對象變成了Jquery對象，因為調用了函數css


$("img").map(function(index,elem){
    if(index==1)
    return elem;   //返回的是第二個img的HtmlElement對象，但是經過map的包裝就會變成jquery對象

}).css("border","thick double red");      //可以很清楚的看到這里返回的htmlElement對象變成了Jquery對象，因為調用了函數css

is
is方法確定jquery對象中的某個或者某些元素是否滿足測試條件，其中的形式有is(selector),is(HtmlElement),is(jquery),is(function(index))如果結果集中至少有一個元素匹配指定的條件，那么就返回true,否則false
實例：

console.log($("img").is("[src*=astor]"));//這里是判斷img中的src屬性有沒有astor字段的，如果存在返回true

$("img").is(function(index){

})


var c=$("img").is(function (index) {    //函數中如果至少有一個返回true，那么就會返回true，index是索引
        return this.getAttribute("src")=="rose.png";   //判斷屬性
    });
    console.log(c);

end
當我們調用方法鏈來修改結果集的時候，jquery維護者一個歷史結果集的查找，我們可以利用end回退到歷史的結果集中,end用來扔掉當前的結果集，返回到上一層結果集
實例：

$("img").filter("[src*=astor]").end().css("border","thick double red");   //這里回退到$("img")這個結果集中


$("div.dcell").find("img").filter(":odd").filter(":eq(0)").end().end().css("border","thick double red"); //這里調用了兩個end將結果集回退到$("div.dcell").find("img")中
addBack
得到當前結果集和上一個結果集的合集
實例

$("div.dcell").children("img").addBack().css("border","thick double red");//這里得到的是$("div.dcell")和$("div.dcell").children("img")的合集，并且應用css

$("img").slice(0,3).filter("[src*=astor]").addBack().css("border","thick double red");//$("img").slice(0,3)和$("img").slice(0,3).filter("[src*=astor]")的合集

//這里的選擇器參數過濾的是原結果集，相當于$("img").slice(0,3).filter("[src*=daff]")，
$("img").slice(0,3).filter("[src*=astor]").addBack("[src*=daff]").css("border","thick double red");

children
children是用來訪問子元素的，形式有childern(),children(selector),其中第一個是用來得到結果集中所有的子元素，第二個是用來過濾得到的子元素，保留滿足selector的子元素
實例：

$("div.dcell").children().css("border","thick double red");//得到所有div.dcell的子元素，包括其中的img和input元素

$("div.dcell").children("img").css("border","thick double red");//得到所有子元素中的img元素
find
find是用來得到結果集中的所有的后代元素，這里是后代元素，并不是只有子元素，還包括孫子。。。，形式有find(),find(selector),find(htmlElement),find(jquery),find(htmlElment[])，這里會自動去掉含有重復的元素，因此可以用來過濾元素
實例
$("div.dcell").find("img");   //找到div.dcell的后代元素img

var content=document.getElementsByTagName("input");
$("div.dcell").find(content).filter(":first").css("font-size","1.5em");//找到div.dcell后代元素中的input元素

parent
選取結果集中的父元素，這里表示一層關系就是父元素，并不是祖先元素，形式有parent(),parent(selector)
實例：

$("img").parent();   //選取img的父元素

$("img").parent(":first");   //選取img父元素中的第一個元素
parents
選取祖先元素，包括父元素，形式有parents(),parents(selector)
實例：

$("img").parents().each(function(index,elem){    //選取所有的祖先元素
    console.log(elem.TagName+"   "+elem.id);
})


$("img").parents("div.dcell").css("border","thick double red");   //選擇所有的div.dcell元素

parentsUntil
選擇祖先元素，知道找到這個當前祖先元素匹配參數選擇器為止,parentsUntil(selector),parentsUntil(selector,selector)，其中帶有兩個參數選擇器中的第二個參數是用來篩選所得到的結果集，第一個是用來定位直到這個元素為止
實例：

    $("img").parentsUntil("div.drow");//找img的祖先元素，直到div.drow為止，不包括div.drow
    
     $("img").parentsUntil("div.drow",":first").css("border","thick double red");  //這里選擇了結果集中的第一個元素應用了樣式

closest
得到結果集中元素的祖先元素中匹配selector選擇器最接近的那個祖先元素，形式為closest(selector),closest(selctor,context),closest(htmlElemtent),closest(jquery)
實例：

$("img").closest("div.drow").each(function (index,elem) {   //選擇滿足div.drow的祖先元素，這里的最接近就是輩分最接近，這里的兩個class=drow的div都是最接近的，因為這倆個是同級的關系
        console.log(elem.tagName+"    "+elem.id);
    });
    
    
    var jq=$("#row1,#row2,form");   //傳入jquery對象
    $("img").filter("[src*=astor]").closest(jq).each(function (index,elem) {   //這里選取的是最接近第一張圖的祖先元素，當然是

        console.log(elem.tagName+"   "+elem.id);
    })
    
offestParent
得到距離最近的祖先定位元素，使用fixed,absolute,relative定位的元素，形式為offestParent()
siblings
得到所有的兄弟元素，可選的selector用來過濾結果，形式為siblings(),siblings(selector)
實例：

    $("img").siblings().css("font-size","1.4em");// 得到img的所有兄弟元素，這里是input
    
    $("img").siblings(":last");     //得到img所有兄弟元素中的最后一個元素
prev
得到上一個兄弟元素，形式為prev(),prev(selector)，其中的selector是用來過濾結果的
實例：

    $("input").prev().css("border","thick double red");   //這里得到input的上一個元素Label元素

prevAll
得到當前元素的所有的上面的兄弟元素，形式為prevALl(),prevAll(selector)
實例：

$("input").prevAll().css("border","thick double red");   //得到input上面的所有的兄弟元素

$("input").prev("img").css("border","thick double red");   //得到input上面的所有的img元素
prevUntil
這個和parentsUntil一樣，直到匹配selector就結束了，不包括
實例：

$("input").prevUntil("i").css("border","thick double red");
next
選擇當前元素下面的一個兄弟元素，和prev一樣
nextAll
選擇當前元素下面的所有兄弟元素，和prevAll一樣
nextUntil
和prevUntil一樣
本人博客