文档章节

jQuery中$.each()方法的使用-Json对象-dom元素

imzchloe
 imzchloe
发布于 02/27 18:36
字数 642
阅读 151
收藏 0

 

对于循环我们首先会想到for循环,但是在前端对数组我们可以使用,但是对于json对象,想把对象中的属性的key-value循环去取出,那么for循环提供不了的。而each方法则给我们提供了便利,下面介绍对一维数组、二维数组、json对象以及页面元素进行便利。

 

Jquery提供$.each方法对变量进行循环

1、 遍历 一维数组:

 var arr1=['aa','bb','cc','dd'];

    $.each(arr1,function(i,val){
         console.log(i+':'+val);

    });

输出结果为:

0:aa
1:bb
2:cc
3:dd

2、遍历二维数组

var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']];


 $.each(arr2,function(i,val){
         console.log(i+':'+val);

    });

输出结果为:

0:aaa,bbb
1:ccc,ddd
2:eee,fff

  此时可以对输出的一维数组进行遍历

如: 

var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']];
    $.each(arr2,function(i,val){
        console.log(i+':'+val);
        $.each(val,function(i,v){
               console.log(i+':'+v);
        });
    });

输出结果为:

3、Json对象:

var person={"name":"shily","sex":"女","age":"23"}//json对象
	$.each(person,function(i,val){
		console.log(i);
		console.log(val);
	})

 输出结果为:

 4、当二位数组中有json对象时

var team=[{"name":"shily","sex":"female","age":"44"},{"name":"Chloe","sex":"female","age":"23"},{"name":"Peter","sex":"male","age":"27"}];//json对象
	$.each(team,function(i,val){
		console.log(i);
		console.log(val);
	})

输出结果为:

 

 

var team=[{"name":"shily","sex":"female","age":"44"},{"name":"Chloe","sex":"female","age":"23"},{"name":"Peter","sex":"male","age":"27"}];//json对象
	$.each(team,function(i,val){
		console.log(i);
		console.log(val.name);//获取每一个json里面的name值
	})

输出结果为:

 

 

var team=[{"name":"shily","sex":"female","age":"44"},{"name":"Chloe","sex":"female","age":"23"},{"name":"Peter","sex":"male","age":"27"}];//json对象
	$.each(team,function(i,val){
		$.each(val,function(k,v){
			console.log(k +':' + v);
		})
	})

输出结果为:

注意: Json对象

  • 最显著的特征:对象的值可以用 “对象.属性” 进行访问;
  • typeOf(json对象)       ===>    Object类型

json字符串不能使用“对象.属性” 进行访问,要将其JSON.parse()转化为json对象,再对其进行遍历!

5、处理dom元素

<!DOCTYPE html>
<html>
<head>
	<title>$.each遍历</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	 
		
</head>
<body>
	<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">
		 
	
</body>
<script type="text/javascript">
	$.each( $('input:hidden'),function(i,v){
		console.log(i);
		console.log(v);
		console.log(v.value);
	})
</script>
</html>

输出结果:

 

© 著作权归作者所有

imzchloe
粉丝 1
博文 59
码字总数 43085
作品 0
私信 提问
加载中

评论(0)

jQuery对象与DOM对象的相互转换

下面介绍jquery对象和DOM对象的相互转换: 在使用jquery框架进行处理时,当我们使用$(expression)方法时,如:获取id="jquery_a"的div元素对象时,实际上获取到的值不是DOM对象,而是jquery对...

Sandy_wu
2013/03/27
1.7K
2
Python全栈 Web(jQuery 一条龙服务)

jQuery 1.jQuery介绍 jQuery是一个轻量级的JS库 - 是一个被封装好的JS文件,提供了更为简便的元素操作方式 核心理念:Write Less Do More jQuery版本: jQuery 2.x 不再支持IE6.7.8 jQuery 1.11...

巴黎香榭
2018/09/17
0
0
JQuery 使用技巧

jQuery技巧大放送 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接...

晨曦之光
2012/03/09
172
0
jQuery 语法总结和注意事项

1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法...

无锋不起浪
2012/02/06
0
0
Java程序员从笨鸟到菜鸟之(八十五)跟我学jquery(一)爱之初体验jquery

一、Jquery简介 Jquery是一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。 Jquery应用到我们...

长平狐
2012/11/12
153
0

没有更多内容

加载失败,请刷新页面

加载更多

PHP中Session ID的实现原理

Session 的工作机制是:为每个访问者创建一个唯一的 id (UID),并基于这个 UID 来存储变量。UID 存储在 cookie 中,亦或通过 URL 进行传导。 PHPSESSIONID的生产算法原理如下: hash_func = ...

php开源社区
23分钟前
9
0
MySQL设置允许用户远程登录

项目中需要连接虚拟机上面的MySQL数据库,但是总是出错,怀疑本机是否有连接远程数据库的权限。 执行命令: mysql> use mysql;mysql> select host,user from user; 查看结果是不是root用...

imzchloe
30分钟前
17
0
TI达芬奇系列TMS320DM8148浮点DSP C674x + ARM Cortex-A8USB OTG/USB HUB接口、SATA接口(仅DM8148)V

处理器 DM8148 TI TMS320DM8148是一款高性能嵌入式32位工业级ARM Cortex-A8+DSP C674x处理器。拥有多种工业接口资源,以下是DM8148 CPU资源框图: USB OTG/USB HUB接口 CON13、CON14为Micro...

Tronlong创龙
32分钟前
11
0
一个对二维数组进行多字段多顺序排序的方法

1,代码 <?php/** * 对二维数组依次按照排序规则数组指定的字段和顺序进行排序,在有相同的情况下按下一个字段和顺序进行排序 * @param array $arr 待排序的数组 * @param array $...

vinci321
32分钟前
19
0
2019阿里技术专家面试题大汇总(内含答案)

为帮助开发者们提升面试技能、有机会入职阿里,云栖社区特别制作了这个专辑——阿里巴巴资深技术专家们结合多年的工作、面试经验总结提炼而成的面试真题这一次整体放出。并通过这些笔试真题开...

白楠楠
33分钟前
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部