jquery常用遍历工具函数

遍历在这里 http://my.oschina.net/u/2352644/blog/508397 

废话不多说,一个句话告诉你jq的遍历工具

我们对数组的循环一般是用for或者for in,这是原生js支持,同样既然用jq的了,咱jq也提供了对数组的遍历方法,也就是对原生js循环的封装

一、$.each()和for循环等不得不说的秘密

我们循环一个数组一般是下面的处理,利用for循环

 var arr=[0,1,2];
 for(var i=0;i<arr.length;i++){
  alert("第"+i+"项"+arr[i])
 };

会弹出第几项是几,这是我们最习惯的写法,我们下面看jq提供的方法,

 var arr=[0,1,2]; 
 $.each( arr, function(i, n){
  alert("第"+i+"项"+n)
 });

效果一样,这个就是jq提供的遍历方法,如果仅仅是对普通数组可以,那就没必要了,既然封装,肯定功能比较多的,我们还可以遍历对象类型数据({})的,看下面

var obj={"aa":1,"bb":2,"cc":3}; 
 $.each( obj, function(i, n){
  alert("第"+i+"项"+n)
 });

--觉醒了

我们突然醒悟,我们在上篇博客知道有for in循环,这个不就可以实现数组和对象类型的循环吗,既然已经醒悟,我们自己封装一个each方法吧!

 function each(obj,callback){
  for(var i in obj){
   callback(i,obj[i]);
  };
 };
 var obj={"aa":1,"bb":2,"cc":3}; 
 each( obj, function(i, n){  
  alert("第"+i+"项"+n) 
 });

万能的主已经靠近我们,在测试循环数组

 function each(obj,callback){
  for(var i in obj){
   callback(i,obj[i]);
  };
 };
 var arr=[0,1,2];
 each( arr, function(i, n){  
  alert("第"+i+"项"+n) 
 });

再不用jq的时候我们只要写了这个函数也就各种遍历了

二、$.extend()

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var newobj=$.extend(settings, options);
alert(newobj['validate'])  

函数会获取前后对象的所有属性(下表),出现相同下表后替换前原则,我们在一片jq插件很详细介绍过这个的使用原理,除了合成新的对象还可以做工具扩展

http://my.oschina.net/u/2352644/blog/487688

三、$.grep()

var aa=$.grep( [0,1,2], function(n,i){
   return n > 0;
 });
 alert(aa)

迭代方法,过滤出我们需要的内容

--模拟实现

 function grep(arr,callback){
  var temp=[];
  for(var i=0;i<arr.length;i++){
   if(callback(arr[i],i)){
    temp.push(arr[i]);
   }else{
    
   }   
  };
  return temp;
 };
 var aa=grep( [0,1,2], function(n,i){
   return n > 0;
 });
 alert(aa)

四、$.inArray()

var arr = [ 4, "Pete", 8, "John" ];
alert($.inArray("John", arr)); 

返回参数值在数组的位置,不存在返回-1

--模拟实现

 function inArray(rel,arr){
  var index=-1;
  for(var i=0;i<arr.length;i++){
   if(arr[i]==rel){
    index=i;
   }else{}
  }
  return index;
 };
 var arr = [ 4, "Pete", 8, "John" ];
 alert(inArray("John", arr));
 alert(inArray("aa", arr));

 五、$.merge()

alert($.merge( [0,1,2], [2,3,4] ));

把参数2数组和参数1数组拼接

--模拟实现

 function merge(arr1,arr2){
  return arr1.concat(arr2)
 };
 alert(merge( [0,1,2], [2,3,4] ));

 

 

你可能感兴趣的:(jquery)