jQuery-----選擇元素

標籤：ice   ros   gre   lin   --   att   結果   on()   css   

 

(一)選擇更多元素

add方法用於在jquery中選擇更多的元素。

add方法支援的參數有add(selector),add(selector,context),add(HTMLElement),add(HTMLElement[]),add(jQuery)

$(document).ready(function () {

　　var labelElems = document.getElementsByTagName("label");
　　var jq = $("img[src*=daffodil]");

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

　　//add參數依次為selector、jQuery對象和HTMLElement

});

(二)限制選擇範圍

1）從結果集中擷取某個元素

$(document).ready(function() {

　　var jq = $("label");
　　jq.first().css("border", "thick double red");//第一個label
　　jq.last().css("border", "thick double green");//最後一個label
　　jq.eq(2).css("border", "thick double black");//第二個label
　　jq.eq(-2).css("border", "thick double black");//倒數第二個label

});

2）從結果集中擷取子集

$(document).ready(function() {

　　var jq = $("label");

　　jq.slice(0, 2).css("border", "thick double black");//索引為0和1的label
　　jq.slice(4).css("border", "thick solid red");//索引為4以後的label

});

3）過濾元素

filter方法可以將所有不滿足某個指定條件的元素剔除，支援的參數有filter(selector),filter(HTMLElement),filter(jQuery),filter(function(index))

指定過濾器

$(document).ready(function() {
　　$("img").filter("[src*=s]").css("border", "thick double red");//選取器
　　var jq = $("[for*=p]" );
　　$("label").filter(jq).css("color", "blue");
　　var elem = document.getElementsByTagName("label")[1];
　　$("label").filter(elem).css("font-size", "1.5em");

　　$("img").filter(function(index) {
　　　　return this.getAttribute("src") == "peony.png" || index == 4;//如果函數返回true，則保留這個元素；否則刪除這個元素

　　　　//注意：src返回絕對URL，getAttribute(0返回相對URL
　　}).css("border", "thick solid red")
});

not方法：其工作方式很大程度上和filter相反

$(document).ready(function() {

　　$("img").not("[src*=s]").css("border", "thick double red");
　　var jq = $("[for*=p]");
　　$("label").not(jq).css("color", "blue");

　　var elem = document.getElementsByTagName("label")[1];
　　$("label").not(elem).css("font-size", "1.5em");
　　$("img").not(function(index) {
　　　　return this.getAttribute("src") == "peony.png" || index == 4;
　　}).css("border", "thick solid red")
});

(三)以映射方式處理結果集-----每次只能返回一個元素

$(document).ready(function() {

　　$("div.dcell").map(function(index, elem) {
　　　　return elem.getElementsByTagName("img")[0];//返回每一個div.dcell中的img
　　}).css("border", "thick solid red");

　　$("div.dcell").map(function(index, elem) {
　　　　return $(elem).children()[1];//返回每一個div.dcell中的第二個子項目
　　}).css("border", "thick solid blue");

});

(四)檢測結果集

is()方法用於檢測jQuery中的某個對象是否滿足測試條件，接收參數類型同filter，傳回值為boolean

$(document).ready(function() {

　　var isResult = $("img").is(function(index) {
　　　　return this.getAttribute("src") == "rose.png";
　　});
　　console.log("Result: " + isResult);

});

(五)修改、回退結果集

1）end()---回退到上一個結果集

$(document).ready(function() {
　　//給第一個label設定border，給所有的lable設定字型
　　$("label").first().css("border", "thick solid blue")
　　.end().css("font-size", "1.5em");

});

 

2）addback()---返回當前結果集和上一個結果集的合集

$(document).ready(function() {
　　$("div.dcell").children("img").addBack().css("border", "thick solid blue");//給所有的dcell的div及其子img對象設定border
});

(六)訪問DOM

1）訪問後代元素

childern方法（children(), children(selector)），返回子項目

find方法(參數類型與filter一樣，但不可以接受函數)，返回後代元素

二者返回的元素不會有重複的結果

2）使用find方法得到一個交集

$(document).ready(function() {
　　var jq = $("label").filter("[for*=p]").not("[for=peony]");
　　$("div.drow").find(jq).css("border", "thick solid blue");
});

2）訪問祖先元素

得到父元素：

$(document).ready(function() {
　　$("div.dcell").parent().each(function(index, elem) {//得到每一個div.dcell的父元素
　　　　console.log("Element: " + elem.tagName + " " + elem.id);
　　});

　　$("div.dcell").parent("#row1").each(function(index, elem) {//得到每一個div.dcell的ID為row1的父元素
　　　　console.log("Filtered Element: " + elem.tagName + " " + elem.id);
　　});
});

選取祖先元素：

parents方法：可以厚的所有的祖先元素（不僅僅是父元素），可使用可選的選取器過濾

$(document).ready(function() {
　　$("img[src*=peony], img[src*=rose]").parents().each(function(index, elem) {//獲得兩個img元素的所有祖先元素
　　　　console.log("Element: " + elem.tagName + " " + elem.className + " " + elem.id);
　　});
});

parentsUtil(selector):沿著dom樹向上尋找，直到匹配參數選取器為止，注意選擇結果不包含參數選取器，還可以提供第二個選取器可進一步過濾選擇結果

選擇第一個匹配的祖先元素：

closest(selector):用於匹配參數選取器的第一個祖先元素

offsetParent()：用於匹配祖先元素中最近的定位元素

 

 

3）訪問兄弟元素

選擇全部的兄弟元素：

siblings(selector):用於匹配所有參數選取器的兄弟元素

選擇後面或前面的兄弟元素：

prev(selector)   pervAll(selector)

next(selector)   nextAll(selector)

jQuery-----選擇元素