jquery常用遍历循环处理
一、基本数组和for循环
最基本的遍历输出：
$(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结构：
<div class="box"> <table id="tab"> </table> </div>
二、基本数组和for in循环
$(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循环
$(function(){
var obj={'a':123,'b':456,'c':789};
for(var i in obj){
$("#tab").append("<tr><td>"+obj[i]+"</td></tr>");
};
});
四、基本数组和while循环
$(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;
}
});
五、二维数组和for循环
$(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)
};
});
六、json类型和for循环&&for in循环
$(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)
};
});
七、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;
};
});
总结：
for循环非常简单
for in要记住的就是定义的变量接收的是循环对象的下标
while循环要定义循环指针变量，通过条件成立（获取到内容）让指针下移动（+1），获取不到内容（指针指到最后一个的下一个）条件不成立不在进行循环
八、字符串和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)
});
九、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);
});
十、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)
});
十一、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>