jquery經常使用遍歷循環處理

時間 2019-11-10

原文原文鏈接

‍‍1、基本數組和for循環‍‍javascript

最基本的遍歷輸出：css

$(function(){
	var arr=[111,222,333,444,555,666];
	for(var i=0;i<arr.length;i++){
		$("#tab").append("<tr><td>"+arr[i]+"</td></tr>");
	};
	
});

html結構：html

   <div class="box">
    	<table id="tab">
    		
    	</table>
    </div>

2、基本數組和for in循環java

$(function(){
	var arr=[111,222,333,444,555,666];
	for(var i in arr){
		$("#tab").append("<tr><td>"+arr[i]+"</td></tr>");
	};
	
});

三、object類型和for in循環jquery

$(function(){
	var obj={'a':123,'b':456,'c':789};
	for(var i in obj){
		$("#tab").append("<tr><td>"+obj[i]+"</td></tr>");
	};

	
});

四、基本數組和while循環ajax

$(function(){
	var arr=[111,222,333,444,555,666];
	var index=0;
	while(arr[index]){		
		$("#tab").append("<tr><td>"+arr[index]+"</td></tr>");
		index+=1;
	}
	
});

5、二維數組和for循環json

$(function(){
	var arr=[[1,1111],[2,222],[3,333]];
	for(var i=0;i<arr.length;i++){
		var tr=$("<tr></tr>")
		for(var j=0;j<arr[i].length;j++){
			tr.append("<td>"+arr[i][j]+"</td>")
		};
		$("#tab").append(tr)
	};
	
});

6、json類型和for循環&&for in循環canvas

$(function(){
	var arr=[{'姓名':111,'性別':0},{'姓名':888,'性別':0},{'姓名':999,'性別':1}];
	for(var i=0;i<arr.length;i++){
		var tr=$("<tr></tr>")
		for(var j in arr[i]){
			tr.append("<td>"+arr[i][j]+"</td>")
		};
		$("#tab").append(tr)
	};
	
});

7、json類型和while循環&&for in循環數組

$(function(){
	var arr=[{'姓名':111,'性別':0},{'姓名':888,'性別':0},{'姓名':999,'性別':1}];
	var i=0;
	while(arr[i]){
		var tr=$("<tr></tr>")
		for(var j in arr[i]){
			tr.append("<td>"+arr[i][j]+"</td>")
		};
		$("#tab").append(tr);
		i+=1;
	};
	
});

總結：app

for循環很是簡單

for in要記住的就是定義的變量接收的是循環對象的下標

while循環要定義循環指針變量，經過條件成立（獲取到內容）讓指針下移動（+1），獲取不到內容（指針指到最後一個的下一個）條件不成立不在進行循環

8、字符串和while循環

var str="好11111111，人222222222，在3333333333，那4444444444，裏55555555"；
var val="在";

如何輸出：‘在’後面的全部‘3’？？

方法一：數組處理

$(function(){
	var str="好11111111，人222222222，在3333333333，那4444444444，裏55555555";
	var val="在";
	var changearr=str.split('，');
	var rres;
	for(var i=0;i<changearr.length;i++){
		var temp=changearr[i].split('');
		if(temp[0]==val){
			rres=temp;
		}
	};
	var res='';
	for(var i=0;i<rres.length;i++){
		if(i==0){

		}else{
			res+=rres[i];
		}
	};
	alert(res)
	
});

方法2：while處理

$(function(){
	var str="好11111111，人222222222，在3333333333，那4444444444，裏55555555";
	var val="在";
	var index=str.search(val);
	var i=1;
	var res='';
	while(str.charAt(index+i)!="，"){
		res+=str.charAt(index+i);
		i+=1;
	};
	alert(res)
	
});

9、for循環跳躍式

差值爲3的跳躍

$(function(){
	var arr=[11,22,33,111,22,33,111,22,33];
	var newarr=[];
	for(var i=0;i<arr.length;i+=3){
		newarr+=arr[i];
	};
	alert(newarr);
	
});

咱們在作canvas的時候，2d畫布有一個getimagedata方法，能夠返回一個對象獲得他的data值，爲一維數組，按照[r,g,b,a,r,g,b,a,......]形式

咱們的理想狀態就是[rgba,rgba,......],咱們就會用到差值爲4的循環處理

$(function(){
	var arr=[0,0,255,255,0,0,255,255,0,0,255,255,0,0,255,255,0,0,255,255];
	var rgbaarr=[];
	for(var i=0;i<arr.length;i+=4){
		var r=arr[i];
		var g=arr[i+1];
		var b=arr[i+2];
		var a=arr[i+3];
		var rgba=r+" "+g+" "+b+" "+a;
		rgbaarr.push(rgba);
	};
	alert(rgbaarr);
	
});

10、for循環遞減式，實現數組反轉

有一個這樣的數組

var arr=[9,8,7,6,5,4,3,2,1,0];

反轉處理1：數組提供的reverse方法

$(function(){
	var arr=[9,8,7,6,5,4,3,2,1,0];
	alert(arr.reverse())
	
});

反轉處理2：數組降序循環

$(function(){
	var arr=[9,8,7,6,5,4,3,2,1,0];
	var rearr=[];
	for(var i=(arr.length-1);i>=0;i--){
		rearr.push(arr[i]);
	}
	alert(rearr)
	
});

11、for循環跳躍減式

同增長跳躍同理

$(function(){
	var arr=[9,8,7,6,5,4,3,2,1,0];
	var rearr=[];
	for(var i=(arr.length-1);i>=0;i-=3){
		rearr.push(arr[i]);
	}
	alert(rearr)
	
});

十二、do while循環

把上面while的改爲do while 先執行程序，在判斷條件是否爲真

$(function(){
	var arr=[111,222,333,444,555,666];
	var index=0;
	do{
		$("#tab").append("<tr><td>"+arr[index]+"</td></tr>");
		index+=1;
	}while(arr[index]);
	
});

十三、利用for循環實現加載更多效果（假若有35條數據，開始顯示10條，點擊‘加載更多’在顯示10條，依次到最後）

咱們建立35條數據，json類型，相似模擬ajax的加載跟多處理

var jsondata=[
		{'aa':111,'bb':111111},
		{'aa':222,'bb':111111},
		{'aa':333,'bb':111111},
		{'aa':444,'bb':111111},
		{'aa':555,'bb':111111},
		{'aa':666,'bb':111111},
		{'aa':777,'bb':111111},
		{'aa':888,'bb':111111},
		{'aa':999,'bb':111111},
		{'aa':123,'bb':111111},
		{'aa':456,'bb':111111},
		{'aa':789,'bb':111111},
		{'aa':987,'bb':111111},
		{'aa':654,'bb':111111},
		{'aa':321,'bb':111111},
		{'aa':556,'bb':111111},
		{'aa':223,'bb':111111},
		{'aa':112,'bb':111111},
		{'aa':889,'bb':111111},
		{'aa':778,'bb':111111},
		{'aa':998,'bb':111111},
		{'aa':447,'bb':111111},
		{'aa':852,'bb':111111},
		{'aa':741,'bb':111111},
		{'aa':963,'bb':111111},
		{'aa':369,'bb':111111},
		{'aa':258,'bb':111111},
		{'aa':147,'bb':111111},
		{'aa':753,'bb':111111},
		{'aa':159,'bb':111111},
	];

咱們靜態html結構，添加加載更多按鈕，

<div class="box">
    	
    </div>
    <button id="more">加載更多</button>

咱們的總體實現，核心是（page-1）*limit 咱們當前的頁數減去1乘以顯示個數

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
 *{ margin:0; padding:0;}  
</style>
<script src="js/jquery-min.js"></script>
<title>demo</title>
</head>
<body> 
    <div class="box">
    	
    </div>
    <button id="more">加載更多</button>
</body>
<script type="text/javascript"> 
$(function(){
	var jsondata=[
		{'aa':111,'bb':111111},
		{'aa':222,'bb':111111},
		{'aa':333,'bb':111111},
		{'aa':444,'bb':111111},
		{'aa':555,'bb':111111},
		{'aa':666,'bb':111111},
		{'aa':777,'bb':111111},
		{'aa':888,'bb':111111},
		{'aa':999,'bb':111111},
		{'aa':123,'bb':111111},
		{'aa':456,'bb':111111},
		{'aa':789,'bb':111111},
		{'aa':987,'bb':111111},
		{'aa':654,'bb':111111},
		{'aa':321,'bb':111111},
		{'aa':556,'bb':111111},
		{'aa':223,'bb':111111},
		{'aa':112,'bb':111111},
		{'aa':889,'bb':111111},
		{'aa':778,'bb':111111},
		{'aa':998,'bb':111111},
		{'aa':447,'bb':111111},
		{'aa':852,'bb':111111},
		{'aa':741,'bb':111111},
		{'aa':963,'bb':111111},
		{'aa':369,'bb':111111},
		{'aa':258,'bb':111111},
		{'aa':147,'bb':111111},
		{'aa':753,'bb':111111},
		{'aa':159,'bb':111111},
		{'aa':000,'bb':00000},
		{'aa':0,'bb':000},
		{'aa':00,'bb':000},
		{'aa':0000,'bb':0}
	];
	var page=1;
	var limit=10;
	for(var i=0;i<limit;i++){
		$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
	}

	$("#more").click(function(){
		page+=1;
		for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
		$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
		}
	});
	
});
</script>

</html>

十四、利用for循環實現分頁效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
 *{ margin:0; padding:0;}  
 p span{ margin: 0 5px;color: blue; cursor:pointer;}
p span.fou{color: red; }
.box{height: 200px;}
</style>
<script src="js/jquery-min.js"></script>
<title>demo</title>
</head>
<body> 
    <div class="box">
    	
    </div>
    <p id="page"></p>
</body>
<script type="text/javascript"> 
$(function(){
	var jsondata=[
		{'aa':111,'bb':111111},
		{'aa':222,'bb':111111},
		{'aa':333,'bb':111111},
		{'aa':444,'bb':111111},
		{'aa':555,'bb':111111},
		{'aa':666,'bb':111111},
		{'aa':777,'bb':111111},
		{'aa':888,'bb':111111},
		{'aa':999,'bb':111111},
		{'aa':123,'bb':111111},
		{'aa':456,'bb':111111},
		{'aa':789,'bb':111111},
		{'aa':987,'bb':111111},
		{'aa':654,'bb':111111},
		{'aa':321,'bb':111111},
		{'aa':556,'bb':111111},
		{'aa':223,'bb':111111},
		{'aa':112,'bb':111111},
		{'aa':889,'bb':111111},
		{'aa':778,'bb':111111},
		{'aa':998,'bb':111111},
		{'aa':447,'bb':111111},
		{'aa':852,'bb':111111},
		{'aa':741,'bb':111111},
		{'aa':963,'bb':111111},
		{'aa':369,'bb':111111},
		{'aa':258,'bb':111111},
		{'aa':147,'bb':111111},
		{'aa':753,'bb':111111},
		{'aa':159,'bb':111111},
		{'aa':000,'bb':00000},
		{'aa':0,'bb':000},
		{'aa':00,'bb':000},
		{'aa':0000,'bb':0}
	];
	var page=1;
	var limit=10;
	var allapge=(jsondata.length%limit==0)?jsondata.length/limit:Math.floor(jsondata.length/limit)+1;
	for(var i=1;i<=allapge;i++){
		if(i==1){
			$("#page").append('<span class="fou">'+i+'</span>');
		}else{
			$("#page").append('<span>'+i+'</span>');
		}
		
	}
	for(var i=0;i<limit;i++){
		$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
	}

	$("#page").children().click(function(){
		$(this).addClass('fou').siblings().removeClass('fou');
		page=$(this).html();
		$(".box").children().remove();
		for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
			$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
		}
	});
});
</script>

</html>

與加載跟多分頁的難度就是總頁數的處理

var page=1;
	var limit=10;
	var allapge=(jsondata.length%limit==0)?jsondata.length/limit:Math.floor(jsondata.length/limit)+1;

記錄總個數與顯示個數取餘數（模）判斷是否整除，不整除+1頁

咱們的分頁添加其餘頁面處理按鈕：第一頁，最後一頁，跳頁，上一頁，下一頁；

基本功能完善的分頁實現：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
 *{ margin:0; padding:0;}  
 p span{ margin: 0 5px;color: blue; cursor:pointer;}
p span.fou{color: red; }
.box{height: 200px;}
</style>
<script src="js/jquery-min.js"></script>
<title>demo</title>
</head>
<body> 
    <div class="box">
    	
    </div>
    <p id="page"></p>
    <p id="other">
    	<span id="first">第一頁</span>
    	<span id="prev">上一頁</span>
    	<span id="next">下一頁</span>
    	<span id="last">最後一頁</span>
    	<input type="text" id="sum" /><span id="skip">跳轉</span>
    </p>
</body>
<script type="text/javascript"> 
$(function(){
	var jsondata=[
		{'aa':111,'bb':111111},
		{'aa':222,'bb':111111},
		{'aa':333,'bb':111111},
		{'aa':444,'bb':111111},
		{'aa':555,'bb':111111},
		{'aa':666,'bb':111111},
		{'aa':777,'bb':111111},
		{'aa':888,'bb':111111},
		{'aa':999,'bb':111111},
		{'aa':123,'bb':111111},
		{'aa':456,'bb':111111},
		{'aa':789,'bb':111111},
		{'aa':987,'bb':111111},
		{'aa':654,'bb':111111},
		{'aa':321,'bb':111111},
		{'aa':556,'bb':111111},
		{'aa':223,'bb':111111},
		{'aa':112,'bb':111111},
		{'aa':889,'bb':111111},
		{'aa':778,'bb':111111},
		{'aa':998,'bb':111111},
		{'aa':447,'bb':111111},
		{'aa':852,'bb':111111},
		{'aa':741,'bb':111111},
		{'aa':963,'bb':111111},
		{'aa':369,'bb':111111},
		{'aa':258,'bb':111111},
		{'aa':147,'bb':111111},
		{'aa':753,'bb':111111},
		{'aa':159,'bb':111111},
		{'aa':000,'bb':00000},
		{'aa':0,'bb':000},
		{'aa':00,'bb':000},
		{'aa':0000,'bb':0}
	];
	var page=1;
	var limit=10;
	var allapge=(jsondata.length%limit==0)?jsondata.length/limit:Math.floor(jsondata.length/limit)+1;
	for(var i=1;i<=allapge;i++){
		if(i==1){
			$("#page").append('<span class="fou">'+i+'</span>');
		}else{
			$("#page").append('<span>'+i+'</span>');
		}
		
	}
	for(var i=0;i<limit;i++){
		$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
	}

	$("#page").children().click(function(){
		$(this).addClass('fou').siblings().removeClass('fou');
		page=$(this).html();
		$(".box").children().remove();
		for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
			$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
		}
	});

	$("#first").click(function(){
		$("#page").children().eq(0).addClass('fou').siblings().removeClass('fou');
		page=1;
		$(".box").children().remove();
		for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
			$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
		}
	});
	$("#last").click(function(){
		$("#page").children().eq($("#page").children().length-1).addClass('fou').siblings().removeClass('fou');
		page=$("#page").children().length;
		$(".box").children().remove();
		for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
			$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
		}
	});
	$("#prev").click(function(){
		if(page==1){
			$("#page").children().eq(0).addClass('fou').siblings().removeClass('fou');
			page=1;
			$(".box").children().remove();
			for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
				$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
			}
		}else{
			$("#page").children().eq(page-2).addClass('fou').siblings().removeClass('fou');
			page=page-1;
			$(".box").children().remove();
			for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
				$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
			}
		}
		
	});
	
	$("#next").click(function(){
		if(page==$("#page").children().length){
			$("#page").children().eq($("#page").children().length-1).addClass('fou').siblings().removeClass('fou');
			page=$("#page").children().length;
			$(".box").children().remove();
			for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
				$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
			}
		}else{
			$("#page").children().eq(page).addClass('fou').siblings().removeClass('fou');
			page=page+1;
			$(".box").children().remove();
			for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
			$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
		}
		}
		
	});
	$("#skip").click(function(){
		if($("#sum").val()>0 && $("#sum").val()<=$("#page").children().length){
			$("#page").children().eq($("#sum").val()-1).addClass('fou').siblings().removeClass('fou');
			page=$("#sum").val();
			$(".box").children().remove();
			for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
				$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
			}
		}else{

		}
		
	});

});
</script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。