Jquery循环map与each
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title ></title> <script src="Js/jquery-1.5.1.js" type="text/javascript"></ script> <script type="text/javascript"> $( function () { var arr = [3, 5, 9]; //-----------$.map(array,fn):用来将一个数组,转成另一个数组。 var arr2 = $.map(arr, function (item) { return item * 2; }); var arr3 = MyMap(arr, function (item) { return item * 2; }); //联想C#委托的例子。函数式编程。 for (var i = 0; i < arr8.length; i++) { alert(arr2[i]); //6 10 18 alert(arr3[i]); //6 10 18 alert(arr8[i]); } function MyMap(arr, func) {//func这个函数就叫回调函数 回调函数:自己定义,系统调用。 var newArr = new Array(arr.length); for (var i = 0; i < arr.length; i++) { newArr[i] = func(arr[i]); } return newArr; } //-----------$.each(array,fn)对数组arry每个元素调用fn函数进行处理,没有返回值。 var arr4 = MyEach2(arr, function (index) { alert(index) }); //结果为 0 1 2 如果只传递一个参数 则打印结果为下标 var arr5 = $.each(arr, function (index, item) { alert(index + ":" + item) });//结果为 0:3 1:5 2:9 //推测实现如下 var arr6 = MyEach(arr, function (index, item) { alert(index + ":" + item) }); //实现与arr8结果相同 function MyEach(arr, func) { for (var i = 0; i < arr.length; i++) { func(i, arr[i]); //Each中的回调函数可以传递两个参数 前者是下标 后者是值 } } var json = { "id" : "1", "name": "wang" }; var arrjson = [{ "id" : "1", "name": "wang" }, { "id": "2" , "name": "hao" } ]; //------------$.map不能处理json格式对象的数组。 var arr7 = $.map(arrjson, function (item) { return item.id }); //map访问json数组确实实现了值的改变 但是访问json对象呢 var arr8 = $.map(json, function (item) { alert(item); return item });//最终什么都没有alert 因为json没有length属性 而map方法内部遍历的时候用的就是for //而each能访问json对象 得到key value 说明each内部方法使用的是for in 进行的遍历 修改MyEach方法为MyEach2 function MyEach2(arr, func) { for (var key in arr) { func(key, arr[key]); func.call(arr[key], key, arr[key]); //第一个参数指定匿名函数的作用域 可以修改为window等 Jquery中默认的each就是这么实现的 } } var arr9 = MyEach2(json, function (index, item) { alert(index + ":" + item) }); //----------在回调函数中的this会是谁??? //var arr10 = MyEach2(arr, function (index) { alert(index + "this:" + this) }); //this显示为domWindow //var arr11 = $.each(arr, function (index) { alert(index + "this:" + this) }); //而使用$.each时 this为结果为item的值 3 5 9???为什么呢? //改变函数作用域?!纳尼 即 系统$.each中真正实现函数时 使用了call 方法来改变函数的作用域func.call(arr[key], key, arr[key]); //var arr12 = $.each(arr, function (item) { alert(item); }); //Each没有返回值 如果只有一个参数 那就是下标 0 1 2 }); //总体说来jquery中的map方法适用于数组 each方法适用于dictionary </script > </head> <body> </body> </html>
代码直接拷贝到html文件中,并确定jquery-1.5.1.js文件外联存在即可看到运行效果
相关推荐
Jquery速成教程,对你绝对有帮助,不下载就后悔啦
你知道JQuery吗?你想学会JQuery吗?绝对好东西!
大家都知道jquery版本有好多,之间冲突很纠结。 比如我刚来这公司的时候,后端的哥们用的是jQuery 1.3.2,我了个去,那哥们好久没更新了。 我写的效果插件都是最新的jquery1.7.1。 不兼容蛋疼啊,参考前人资料,看书...
我们实习的时候,团队中各组员...请私信,我会无偿发到你的邮箱里……我们都知道,,做程序,包括做人,我们都要学会去跟别人分享,要有一颗感恩的心,所以要回馈自己最好的东西给别人~~~欢迎大家下载~~~祝君工作顺心
jQuery小例子源码 1.客户端事件的注入.Whindom.onload,jquery-->(document).ready(function(){内容}); 2.css样式表中的元素,类,元素ID是设置,及其就近原则,类高。 3.知道了,css中border属性,background-image...
自从jQuery面世以来,它以其快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果等打动着所有关注它的人的心,本人也不例外,但长期以来,类似与本手册的(带查询功能),仅仅只有kuomart(这里...
以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascrīpt代码与html代码分离,保持HTML的清洁,还可以很轻松地绑定事件,甚至你可以不知道“事件”这个名词。 代码 $(document).ready(function() { $...
jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。...所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget)。
你可能听说过jquery能帮你为网站和应用增加交互性,但是不知道从哪里入手,是这样吗? 《head first jquery(中文版)》就是你的车票,拿到这张车票,你就能轻松地构建漂亮的交互式web网站,就像真正的应用一样。 ...
jquery最新的帮助文档,很详细,真的非常好,谁看谁知道,绝对不忽悠
jQuery是一个快速简洁的javaScript库,极大地简化了JavaScript 编程。它能够快速方便的处理HTMLdocuments、events、实现动画效果并且为网站提供AJAX交互。jQuery软件文档说明很...不知道能不能用哦,大家下载试试吧。
自从jQuery面世以来,它以其快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果等打动着所有关注它的人的心,本人也不例外,但长期以来,类似与本手册的(带查询功能),仅仅只有kuomart(这里...
最新jquery-ui-1.11.2日期控件,官网下载内涵图片和自己添加的中文辅助jquery-ui-timepicker-zh-CN.js,经过本人测试绝对可以用,不知道怎么用的百度上找个例子即可,需要导入的包 ${ctx}/plugins/jquery-ui-1.11.2/...
asing插件大家也许一直在用,非常的不错,能实现很多你想要的效果,并且jquery的很多内置方法也开始支持Easing参数了,经常使用jquery的朋友一定会知道需要下载这个jar包
好东西不需要过多的言辞修饰,下了就知道! 所有效果说明: 基本的鼠标互动: 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种互动效果: 手风琴式的折叠菜单(accordions)、...
自从jQuery面世以来,它以其快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果等打动着所有关注它的人的心,本人也不例外,但长期以来,类似与本手册的(带查询功能),仅仅只有kuomart(这里...
jquery的1.11.3api文档,包含2份文件,在编写jquery代码时模糊的方法名,或不知道功能的方法可使用此文档查看。
通过本文的介绍,你就会知道jquery都能做到什么。您可以根据实际需求选择适合自己的开发插件,很实用哦。
你可能听说过jquery能帮你为网站和应用增加交互性,但是不知道从哪里入手,是这样吗? 《head first jquery(中文版)》就是你的车票,拿到这张车票,你就能轻松地构建漂亮的交互式web网站,就像真正的应用一样。 ...
自从jQuery面世以来,它以其快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果等打动着所有关注它的人的心,本人也不例外,但长期以来,类似与本手册的(带查询功能),仅仅只有kuomart(这里...