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 选择器匹配的元素。

转载于:https://www.cnblogs.com/dare/p/9176584.html