jQuery的map()与jQuery.map()总结

请注意他们不是同一个函数。前者是jQuery对象的实例方法(即$.fn.map),后者是一个仅仅挂在jQuery对象下的静态方法(即$.map)。

他们用法的异同:

map()的返回值是包裹了一个Array的jQuery对象。如果要获取其中真正的Array,可以用get()方法。即链式写法:

var arr = $(‘td‘).map(fn1).get();
console.log(Object.prototype.toString.call(arr) === ‘[object Array]‘); // true

他们各自传递的function--已在图中用fn1,fn2来标识--的用法也有很大不同,可以总结到下表:

可以看到在fn1的内部,this的值与第二个参数是相等的:

$(‘td‘).map(function(index, td){
  console.log(td === this); // true
});

而fn2内的this值则是全局对象window:

$.map([1,2],function(){
  console.log(this === window); // true
});

$.map()方法在传递对象的时候的用法:

var obj = {
  name : ‘luck‘,
  age : 20,
  sex : ‘male‘
};
var values = $.map(obj, function(value ,key){
  return value;
});
console.log(values); // ["luck", 20, "male"]
var keys = $.map(obj, function(value, key){
  return key;
});
console.log(keys); // ["name", "age", "sex"]

而$.map()的设计用法则是创造一个新的array对象:

var arr = [1, 2, 3, 4, 5];
var newarr = $.map(arr, function(value, key){
  return value * 2;
});
console.log(newarr); // [2, 4, 6, 8, 10]
时间: 2024-07-29 06:34:13

jQuery的map()与jQuery.map()总结的相关文章

js原生forEach、map与jquery的each、$.each的区别

1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>rem phone test</title> 7 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximu

学习JQuery中文文档之map()函数和get()函数

今天学到一个新的函数map(). map(callback) 官方概述: 将一组元素转换成其他数组(不论是否是元素数组) 你可以用这个函数来建立一个列表,不论是值.属性还是CSS样式,或者其他特别形式.这都可以用'$.map()'来方便的建立. 参数: 给每个元素执行的函数 为了让学习者更容易理解这个函数,于是就有了下面这个栗子: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu

jquery中的 ajax 以及map遍历

1.语法 $.ajax{ type:'get',//类型 有get post url:'',//路径 data:{name:$('#ma').val(),nameq:$('#maq').val()}, dataType="json", success:function(data){alert("成功了")} } 2.获取data数据的方法 如果这样写的话会写吐血的name:$('#ma').val(),nameq:$('#maq').val() 可以用map方法 v

jQuery源代码学习之六——jQuery数据缓存Data

一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所有用户自定义数据都被保存在这个对象的cache属性下,cache在此姑且称之为自定义数据缓存: 自定义数据缓存和DOM元素/javascript对象通过id建立关联,id的查找通过DOM元素/javascript元素下挂载的expando属性获得 话不多说,直接上代码.相关思路在代码注释中都有讲解

jQuery.data的是jQuery的数据缓存系统

jQuery.Data源码 jQuery.data的是jQuery的数据缓存系统.它的主要作用就是为普通对象或者DOM元素添加数据. 1 内部存储原理 这个原理很简单,原本要添加在DOM元素本身的数据,现在被集中的存储在cache集合中.它们之间靠一个从1开始的数字键来联系着.这样DOM元素就不会像以前那么笨重了,更不会出现以前那种循环引用而引起的内存泄漏.现在DOM只需要保存好这个数字键值即可.这个属性值被保存在DOM元素的一个属性里,该属性名是由jQuery.expando生成的. 2 Da

JQuery日记 6.3 JQuery遍历模块

jQuery.extend({ // 返回elem延DOM树某个方向访问的所有节点,直到遇到until条件 dir: function( elem, dir, until ) { var matched = [], truncate = until !== undefined; while ( (elem = elem[ dir ]) && elem.nodeType !== 9 ) { if ( elem.nodeType === 1 ) { if ( truncate &&am

jQuery之前端国际化jQuery.i18n.properties

jQuery之前端国际化jQuery.i18n.properties jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,“i”为单词的第一个字母,“18”为“i”和“n”之间单词的个数,而“n”代表这个单词的最后一个字母.jQuery.i18n.properties采用.properties文件对JavaScript进行国际化.jQuery.i18n.proper

原版本的jquery 开发过程中发现jquery好像更新了

/*! jQuery v1.7.1 jquery.com | jquery.org/license */ (function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css(&

jQuery之前端国际化jQuery.i18n.properties[转]

http://www.ibm.com/developerworks/cn/web/1305_hezj_jqueryi18n/ jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,“i”为单词的第一个字母,“18”为“i”和“n”之间单词的个数,而“n”代表这个单词的最后一个字母.jQuery.i18n.properties采用.properties文件对JavaSc

The ultimate jQuery Plugin List(终极jQuery插件列表)

下面的文章可能出自一位奥地利的作者,  列出很多jQuery的插件.类似的网站:http://jquerylist.com/原文地址: http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/ jQuery is definitely my favourite Javascript Library and this ultimate jQuery Plugin List is for all oth