函数2 





each


可以对数组，json，dom数组循环处理；数组，json中的每个成员都会调用一次处理函数


例如：var arr = [1,2,3]   ;var json = {"name":"lisi","age":10} ; var obj = $(":text")


语法：


　　$.each(循环的内容，处理函数)


　　解释：$相当于java的类名，each相当于静态方法


　　处理函数： function（index，element）{}；  index：循环的索引，element：数组中的成员


 


　　js中对数组的循环


　　for(var i=0;i<arr.length;i++){


　　　　var item = arr[i];　　


　　　　shuchu(i,item);


　　}


 


　　function shuchu(index，element){


　　　　输出index，element


　　}




<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数练习</title>
		<script type="text/javascript" src="js/jquery-3.4.1.js">
			
		</script>
		<script type="text/javascript">
			$(function(){
				//删除dom数组所有对象及其子对象
				$("#btn1").click(function(){
					$("select").remove();
				})
				
				$("#btn2").click(function(){
					$("select").empty();
				})
				
				$("#btn3").click(function(){
					$("#div1").append("<input type='button' value='添加的按钮' />");
				})
				
				//获取数组中第一个对象的文本值
				$("#btn4").click(function(){
					alert($("span").html());
				})
				
				
				//设置所有对象的文本值
				$("#btn5").click(function(){
					$("span").html("我是设置后的文本");
				})
				
				$("#btn6").click(function(){
					var arr = ['a','b','c','d'];
					$.each(arr,function(index,element){
						alert("第"+index+"个元素为："+element);
					})
				})
			
			})
		</script>
	</head>
	<body>
		<input type="text" value="text1">
		<input type="text" value="text2">
		<input type="text" value="text3">
		<br>
		<select name="s1">
			<option value="java">java</option>
			<option value="python">python</option>
			<option value="go">go</option>
		</select>
		<br>
		<div id="div1">我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div>
		
		<span>我是mysql<b>数据库</b></span>
		<span>我是啊哈哈哈哈</span>
		<br>
		<select name="s2">
			<option value="smoke">smoke</option>
			<option value="drink">drink</option>
			<option value="hair">hair</option>
		</select>
		<br>
		<input type="button" value="测试remove方法" id="btn1">
		<br>
		<input type="button" value="测试empty方法" id="btn2">
		<br>
		<input type="button" value="测试append方法" id="btn3">
		
		<br>
		<input type="button" value="测试html方法" id="btn4">
		<br>
		<input type="button" value="测试html方法2" id="btn5">
		<br>
		<input type="button" value="测试each方法" id="btn6">
	</body>
</html>





　　


each循环json




<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>each循环json</title>
		<script type="text/javascript" src="js/jquery-3.4.1.js">			
		</script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					var json = {"name":"mike","age":20};
					$.each(json,function(k,v){
						alert(k+"=="+v);
					})
				})
			})
			
		</script>
	</head>
	<body>
		
		<input type="button" id="btn1" value="each对json的循环" />
	</body>
</html>





　　


each对dom数组遍历




<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js">
			
		</script>
		<script type="text/javascript">
			$(function(){
				$("#btn").click(function(){
					var obj = $(":text");
					//e是dom对象
					$.each(obj,function(i,e){
						alert(i+"==="+e.value);
					})
				})
			})
		</script>
	</head>
	<body>
		<input type="text" name="text1" id="text1" value="刘备" />
		<input type="text" name="text2" id="text2" value="关于" />
		<input type="text" name="text3" id="text3" value="张飞" />
		
		<br>
		<input type="button" name="btn" id="btn" value="测试each对dom对象遍历" />
	</body>
</html>





　　


语法2：


　　jQuery对象.each（function（index，element）{ ...}）；




<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js">
			
		</script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					$(":text").each(function(index,ele){
						alert("i:"+index+",ele:"+ele.value);
					})
				})
			})
		</script>
	</head>
	<body>
		//使用jQuery对象.each（function（index，element）{...}）语法格式
		<input type="text" name="t1" id="t1" value="刘备" /><br>
		<input type="text" name="t2" id="t2" value="关羽" /><br>
		<input type="text" name="t3" id="t3" value="张飞" /><br>
		
		<br>
		<input type="button" name="btn1" id="btn1" value="测试each" />
	</body>
</html>





　　


 







    
posted on 
2021-03-13 13:02 
暮雨轻风 
阅读(49) 
评论(0) 
 
收藏 
举报