JQuery 干貨篇之選擇元素

zorpan 發(fā)布于2019-08-20 15:56 / 635人閱讀

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

JQuery 干貨篇之選擇元素 實(shí)驗(yàn)的HTML+CSS的代碼

html




    Example
    
    
    


Jacqui"s Flower Shop

    
        
            
                
                    Astor:
                    
                
                
                    Daffodil:
                    
                
                
                    Rose:
                    
                
            
            
                
                    Peony:
                    
                
                
                    Primula:
                    
                
                
                    Snowdrop:

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    :選擇第一個(gè)元素

:last     :選擇最后一個(gè)元素

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

:even     :選擇序號為偶數(shù)的元素

:odd      :選擇序號為奇數(shù)的元素

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

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

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

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

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

:button   :選擇所有的按鈕

:checkbox  :選擇所有的復(fù)選框

:hidden     :選擇隱藏的元素

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

JQuery對象的方法


context 選擇元素時(shí)使用的上下文對象

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

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

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


length || size()  返回的時(shí)jquery對象個(gè)數(shù)

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

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

把jquery當(dāng)成數(shù)組

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

$("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()
用來獲取特定的一組子元素
實(shí)例：

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

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

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

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

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

    $("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");   //參數(shù)為jquery對象

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

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


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

}).css("border","thick double red");      //可以很清楚的看到這里返回的htmlElement對象變成了Jquery對象，因?yàn)檎{(diào)用了函數(shù)css

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

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

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

})


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

end
當(dāng)我們調(diào)用方法鏈來修改結(jié)果集的時(shí)候，jquery維護(hù)者一個(gè)歷史結(jié)果集的查找，我們可以利用end回退到歷史的結(jié)果集中,end用來扔掉當(dāng)前的結(jié)果集，返回到上一層結(jié)果集
實(shí)例：

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


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

$("div.dcell").children("img").addBack().css("border","thick double red");//這里得到的是$("div.dcell")和$("div.dcell").children("img")的合集，并且應(yīng)用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]")的合集

//這里的選擇器參數(shù)過濾的是原結(jié)果集，相當(dāng)于$("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),其中第一個(gè)是用來得到結(jié)果集中所有的子元素，第二個(gè)是用來過濾得到的子元素，保留滿足selector的子元素
實(shí)例：

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

$("div.dcell").children("img").css("border","thick double red");//得到所有子元素中的img元素
find
find是用來得到結(jié)果集中的所有的后代元素，這里是后代元素，并不是只有子元素，還包括孫子。。。，形式有find(),find(selector),find(htmlElement),find(jquery),find(htmlElment[])，這里會自動去掉含有重復(fù)的元素，因此可以用來過濾元素
實(shí)例
$("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
選取結(jié)果集中的父元素，這里表示一層關(guān)系就是父元素，并不是祖先元素，形式有parent(),parent(selector)
實(shí)例：

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

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

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


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

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

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

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

$("img").closest("div.drow").each(function (index,elem) {   //選擇滿足div.drow的祖先元素，這里的最接近就是輩分最接近，這里的兩個(gè)class=drow的div都是最接近的，因?yàn)檫@倆個(gè)是同級的關(guān)系
        console.log(elem.tagName+"    "+elem.id);
    });
    
    
    var jq=$("#row1,#row2,form");   //傳入jquery對象
    $("img").filter("[src*=astor]").closest(jq).each(function (index,elem) {   //這里選取的是最接近第一張圖的祖先元素，當(dāng)然是
        console.log(elem.tagName+"   "+elem.id);
    })
    
offestParent
得到距離最近的祖先定位元素，使用fixed,absolute,relative定位的元素，形式為offestParent()
siblings
得到所有的兄弟元素，可選的selector用來過濾結(jié)果，形式為siblings(),siblings(selector)
實(shí)例：

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

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82597.html

發(fā)表評論

登陸后可評論

0條評論

zorpan

男|高級講師

我要關(guān)注我要私信

TA的文章

通訊錄小程序（C語言）

閱讀 4678·2021-09-26 09:55
UCloud 基于Kubernetes Operator的服務(wù)化實(shí)踐

閱讀 1447·2019-12-27 12:16
BFC及應(yīng)用學(xué)習(xí)總結(jié)

閱讀 924·2019-08-30 15:56
CSS selector

閱讀 1931·2019-08-30 14:05
AngularJS表單驗(yàn)證

閱讀 1018·2019-08-30 13:05
詳解如何給背景圖片加顏色遮罩

閱讀 1295·2019-08-30 10:59
使用Packer實(shí)現(xiàn)自動化構(gòu)建UCloud云主機(jī)鏡像

閱讀 1486·2019-08-26 16:19
重學(xué)前端學(xué)習(xí)筆記（十七）--Promise里的代碼為什么比setTimeout先執(zhí)行？

閱讀 1909·2019-08-26 13:47

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JQuery 干貨篇之選擇元素

Jacqui"s Flower Shop

相關(guān)文章

JQuery干貨篇之處理元素

JQuery干貨篇之處理元素

JQuery干貨篇之處理元素

JQuery干貨篇之插入元素

發(fā)表評論

0條評論

zorpan

男|高級講師

TA的文章

通訊錄小程序（C語言）

UCloud 基于Kubernetes Operator的服務(wù)化實(shí)踐

BFC及應(yīng)用學(xué)習(xí)總結(jié)

CSS selector

AngularJS表單驗(yàn)證

詳解如何給背景圖片加顏色遮罩

使用Packer實(shí)現(xiàn)自動化構(gòu)建UCloud云主機(jī)鏡像

重學(xué)前端學(xué)習(xí)筆記（十七）--Promise里的代碼為什么比setTimeout先執(zhí)行？

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JQuery 干貨篇之選擇元素

Jacqui"s Flower Shop

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！