jQuery内置函数map和each的用法

简介:


$.map的运用

var arr1 = [0, 3, 5];
var arr2 = $.map(arr1, function (item) { return item * 2 });
alert(arr2);

结果:0 6 10

 


$.each的运用

 

普通数组
var arr1 = [0, 3, 5];

$.each(arr1,function (i) {

alert(arr1[i]);

});

结果:0,3,5

 

 

json对象

var jsonData = {"tom": 20, "jerry": 21 };

$.each(jsonData,function (key, value) {

     alert(key + "_" + value);
});

结果:tom_20, jerry_21

 

$.each(jsonData,function (i) {

     alert(jsonData[i]);

});

结果:20,21

 

 

json对象数组($.getJSON里面常用)

var jsonArray = [ { "tom": 20, "jerry": 21 }, { "tom": 22,"jerry": 23} ];

$.each(jsonArray,function (i) {

  alert(jsonArray[i].tom);

});

结果:20,22

 

 

看$.getJSON的一处应用:

$.getJSON(
    "stu/stu_toshowStu",
     {classNum:classNum},
     function(json,status)
    {
     $.each(json,function(i){
      $('#stuDiv').append("<div>学生学号:"+json[i].num+"</div>");
     }
   );
  });


jQuery对象可以直接调用each:

$("input").each(function(){

   $(this).val()........

});

each处理dom元素,此处以一个input表单元素作为例子。

<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden"  value="444"/>

$.each($("input:hidden"), function(i,element){  
     alert(val);
     alert(i);
     alert(element.name);
     alert(element.value);   
 });  

alert(element)将输出[object HTMLInputElement],是一个表单元素
alert(i);将输出为0,1,2,3
alert(element.name);将输出aaa,bbb,ccc,ddd,若使用this.name将输出同样的结果
alert(element.value);将输出111,222,333,444,若使用this.value将输出同样的结果
 
$("input:hidden").each(function(i,element){
    alert(i);
    alert(element.name);
    alert(element.value);       
});

输出结果相同

当然比如$("input").css()等封装好的操作自动有一个遍历,就不需要手动遍历了。

 

目录
相关文章
|
3月前
|
JavaScript
jQuery :nth-of-type(n)选择器的用法详解
jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如
40 5
|
6月前
|
JavaScript 前端开发 API
【前端用法】jQuery在线引用地址(全)
【前端用法】jQuery在线引用地址(全)
972 0
|
7月前
|
JavaScript 前端开发
jQuery each() 便利
jQuery each() 便利
20 0
|
6月前
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
51 0
|
3月前
|
JavaScript
jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery自定义动画-第8次课-animate-stop函数-附案例
21 0
|
3月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
19 0
|
8月前
|
JavaScript 前端开发
Jquery的$.each()如何使用
Jquery的$.each()如何使用
48 0
|
3月前
|
JavaScript 前端开发
jQuery的入口函数
jQuery的入口函数
14 0
|
4月前
|
JavaScript 前端开发 开发者
jquery常用的方法函数
jquery常用的方法函数
|
4月前
|
JavaScript 程序员
让我们一起抄代码,JQuery 用法整理
让我们一起抄代码,JQuery 用法整理
31 0