jquery-210812-06---jquery函数&each()方法

最新推荐文章于 2023-01-23 15:56:00 发布

原创最新推荐文章于 2023-01-23 15:56:00 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

白光一

文章标签：

#jquery

jquery 专栏收录该内容

14 篇文章

订阅专栏

这篇博客介绍了jQuery的each()方法，用于遍历数组、JSON对象和DOM元素集合。通过示例展示了如何在点击按钮时分别循环显示数组元素、JSON属性值和文本输入框的值，强调了each()方法在处理集合时的灵活性。

jquery-210812-06—jquery函数&each()方法

each()介绍

	each
	each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。
			比如：var arr = {1,2,3};
			      var json = {"name":"bgy","age":22};
			      var obj = $(":text");
			    
        语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
        语法 2：$jQuery对象.each( function( index, element ) { 处理程序 } )
		index: 数组的下标
		element: 数组的对象

演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery函数---each()方法</title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			
			$(function(){
				$("#btnCircularArray").click(function(){
					var arr = [1,2,3,4];
					$.each(arr,function(index,element){
						alert("arr["+index+"] ---> "+element);
					})
				})
			})
			
			$(function(){
				$("#btnCircularJson").click(function(){
					var json_obj = {"name":"bgy","age":22};
					$.each(json_obj,function(index,element){
						alert("key:"+index+" ---> "+"value:"+element);
					})
				})
			})
			
			$(function(){
				$("#btnCircularDomArray01").click(function(){
					var domObj_array = $(":text");
					$.each(domObj_array,function(index,element){
						alert(element.value);
					})
				})
			})
			
			$(function(){
				$("#btnCircularDomArray02").click(function(){
					// var domObj_array = $(":text");
					// $(domObj_array).each(function(index,element){
					// 	alert(element.value);
					// })
					
					$(":text").each(function(index,element){
						alert(element.value);
					})
				})
			})
			
		</script>
	</head>
	<body>
		<input type="text" value="txt01" />
		<br/>
		<input type="text" value="txt02" />
		<br/>
		<input type="text" value="txt03" />
		<br/>
		<br/>
		<br/>
		<input type="button" id="btnCircularArray" value="循环数组" />
		<br/>
		<input type="button" id="btnCircularJson" value="循环json" />
		<br/>
		<input type="button" id="btnCircularDomArray01" value="循环dom数组01" />
		<br/>
		<input type="button" id="btnCircularDomArray02" value="循环dom数组02" />
	</body>
</html>