JQuery乾貨篇之選擇元素
- 2019 年 12 月 31 日
- 筆記
文章目錄
- 1. JQuery 乾貨篇之選擇元素
- 1.1. 實驗的HTML+CSS的程式碼
- 1.2. 選擇器
- 1.3. JQuery對象的方法
- 1.4. 把jquery當成數組
- 1.5. add
- 1.6. slice()
- 1.7. filter
- 1.8. not
- 1.9. has
- 1.10. map
- 1.11. is
- 1.12. end
- 1.13. addBack
- 1.14. children
- 1.15. find
- 1.16. parent
- 1.17. parents
- 1.18. parentsUntil
- 1.19. closest
- 1.20. offestParent
- 1.21. siblings
- 1.22. prev
- 1.23. prevAll
- 1.24. next
- 1.25. nextAll
- 1.26. nextUntil
- 1.27. 作者說
JQuery 乾貨篇之選擇元素
實驗的HTML+CSS的程式碼
<!DOCTYPE html> <html> <head> <title>Example</title> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="main.css"/> <script src="main.js" type="text/javascript"></script> </head> <body> <h1>Jacqui's Flower Shop</h1> <form method="post"> <div id="oblock"> <div class="dtable"> <div id="row1" class="drow"> <div class="dcell"> <img src="astor.png"/><label for="astor">Astor:</label> <input name="astor" value="0" required> </div> <div class="dcell"> <img src="daffodil.png"/><label for="daffodil">Daffodil:</label> <input name="daffodil" value="0" required> </div> <div class="dcell"> <img src="rose.png"/><label for="rose">Rose:</label> <input name="rose" value="0" required> </div> </div> <div id="row2" class="drow"> <div class="dcell"> <img src="peony.png"/><label for="peony">Peony:</label> <input name="peony" value="0" required> </div> <div class="dcell"> <img src="primula.png"/><label for="primula">Primula:</label> <input name="primula" value="0" required> </div> <div class="dcell"> <img src="snowdrop.png"/><label for="snowdrop">Snowdrop:</label> <input name="snowdrop" value="0" required> </div> </div> </div> </div> <div id="buttonDiv"> <button type="submit">Place Order</button> </div> </form> </body> </html>
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元素
JQuery對象的方法
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數組 把jquery當成數組
var content=$("img:odd"); for(var i=0;i<content.length;i++) { console.log(content[i].TagName+" "+content[i].src); //這裡的content[i]就是htmlElement數組了，$(content[i])就變成了Jquery對象了 }
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) { //這裡選取的是最接近第一張圖的祖先元素，當然是<div id="row1"> 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一樣 作者說 本人秉著方便他人的想法才開始寫技術文章的，因為對於自學的人來說想要找到系統的學習教程很困難，這一點我深有體會，我也是在不斷的摸索中才小有所成，如果你們覺得我寫的不錯就幫我推廣一下，讓更多的人看到。另外如果有什麼錯誤的地方也要及時聯繫我，方便我改進，謝謝大家對我的支援
版權資訊所有者：chenjiabing 如若轉載請標明出處：chenjiabing666.github.io6
