JQuery 遍歷 操作數組 map、grep、filter 的區別


filter() 方法將匹配元素集合縮減爲匹配指定選擇器的元素。
例如:
改變所有 div 的顏色,然後向類名爲 "middle" 的類添加邊框:
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red"); 

注意:filter和find的區別
例如: $("div").filter(".rain"); 和 $("div").find(".rain");
find()會在div元素內尋找class爲rain 的元素,是對它的子集操作
filter()則是篩選div的class爲rain的元素,是對它自身集合元素篩選


$.grep() 函數使用指定的函數過濾數組中的元素,並返回過濾後的數組。
提示:源數組不會受到影響,過濾結果只反映在返回的結果數組中。
語法
$.grep( array, function [, invert ] )
特別注意:Function類型 指定的過濾函數。grep()方法爲function提供了兩個參數:其一爲當前迭代的數組元素,其二是當前迭代元素在數組中的索引。
例如: 輸出 5,8
$(function () {
var arr =$.grep( [1,5,8], function(n,i){
return n > 4;
});
$( "p" ).text( arr.join( ", " ) );
})

$.grep() 根據條件過濾,所以函數中爲bool類型的表達式,而map()  則是返回一個對象或者值;


map() 把每個元素通過函數傳遞到當前匹配集合中,生成包含返回值的新的 jQuery 對象。
由於返回值是 jQuery 封裝的數組,使用 get() 來處理返回的對象以得到基礎的數組。
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );


get() 方法獲得由選擇器指定的 DOM 元素。 與 ajax - get() 方法 沒有關係,兩個不相關。
語法
$(selector).get(index)
例如:
獲得第一個 p 元素的名稱和值:
$("button").click(function(){
x=$("p").get(0);
$("div").text(x.nodeName + ": " + x.innerHTML);
});
或者:
$("button").click(function(){
x=$("p").eq(0);
$("div").text($(x).prop("tagName")+ ": " + $(x).html());
});

jQuery中get()和eq(的區別)
eq返回的是一個jquery對象 get返回的是一個html 對象數組
返回的是jQuery對象,就可以繼續調用其他方法,返回的是html數組就不能調用jQuery的其他方法
例如:
$("ul li").get(1).css("color", "red"); //這個是錯誤的
$("ul li").eq(1).css("color", "red"); //這個是正確的


Jquery的獲取元素標籤名稱的方法:
$( this ).prop("nodeName")

 

 

 

jQuery DOM 元素方法

函數描述
.get() 獲得由選擇器指定的 DOM 元素。
.index() 返回指定元素相對於其他指定元素的 index 位置。
.size() 返回被 jQuery 選擇器匹配的元素的數量。
.toArray() 以數組的形式返回 jQuery 選擇器匹配的元素。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章