jquery中的each用法以及js中的each方法实现实例

2024-03-30 05:19•javascript•阅读 556

each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等

在javaScript开发过程中使用$each可以大大的减轻我们的工作量。

下面提一下each的几种常用的用法

each处理一维数组

var arr1 = [ "aaa", "bbb", "ccc" ];      
  $.each(arr1, function(i,val){      
      alert(i);   
      alert(val);
  });

　alert(i)将输出0，1，2

alert(val)将输出aaa，bbb，ccc

each处理二维数组

var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
　　$.each(arr2, function(i, item){      
      alert(i);   
      alert(item);      
　　});

arr2为一个二维数组，item相当于取这二维数组中的每一个数组。

item[0]相对于取每一个一维数组里的第一个值

alert(i)将输出为0，1，2，因为这二维数组含有3个数组元素

alert(item)将输出为 ['a', 'aa', 'aaa']，['b', 'bb', 'bbb']，['c', 'cc', 'ccc']

对此二位数组的处理稍作变更之后

ar arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
 　　$.each(arr, function(i, item){      
      　　$.each(item,function(j,val){
       　　　　 alert(j);
        　　　　alert(val);
    　}); 
});

alert(j)将输出为0，1，2，0，1，2，0，1，2

alert(val)将输出为a，aa，aaa，b，bb，bbb，c，cc，ccc

each处理json数据，这个each就有更厉害了，能循环每一个属性

var obj = { one:1, two:2, three:3};      
 　　$.each(obj, function(key, val) {      
      　　alert(key);   
      　　alert(val);      
 　　});

这里alert(key)将输出one two three

alert(val)将输出one，1，two，2，three,3

这边为何key不是数字而是属性呢，因为json格式内是一组无序的属性-值，既然无序，又何来数字呢。

而这个val等同于obj[key]

js中each实现，首先感谢豪情哥提供的跟随对联广告实例，让我有机会知道这么多我欠缺的知识点。代码里有我个人的理解标注了解释。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>跟随对联广告-豪情</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <style type="text/css">
        *{margin:0;padding:0;}
        body{ font:12px/1.125 Microsoft YaHei; background:#fff; }
        ul,li{list-style:none;}
        a{text-decoration:none;}
        .wrap{width:600px;height:350px;margin:10px auto;border:1px solid #ccc;}
        .inner{padding:15px;}
        .clearfix{overflow:hidden;_zoom:1;}
        .none{display:none;}
        .banner{width:100px;height:300px;position:absolute;top:200px;}
        .banner:nth-child(1){left:100px;}
        .banner:nth-child(2){right:100px;}
    </style>
</head>
<body>
<div ></div>
<div >
    <div  ></div>
    <button >test</button>
</div>
<script>
    (function(){
    //dog是一个方法类 就是一个简短的自定义的类jquery库
        var dog = {
            $ : function(id){
                return document.querySelector(id);
            },
            tpl : function(html, data){
                return html.replace(/{{(\w+)}}/g, function(item, a){
                    return data[a];
                });
            },
            pos : function(obj, attr){
                if(obj){
                    return obj.getBoundingClientRect()[attr];    
                } else {
                    alert('对象不存在！');
                }
            },
            viewSize: function(){
                var de = document.documentElement;
                var doc = document;
                return {
                    'width': (window.innerWidth || (de && de.clientWidth) || doc.body.clientWidth),
                    'height': (window.innerHeight || (de && de.clientHeight) || doc.body.clientHeight)
                };
            }(),
            on: function(el, type, handler){
                el.addEventListener(type, handler, false);//监听事件
            },
            off: function(el, type, handler){
                el.removeEventListener(type, handler, false);//移除监听
            },
            css : function(obj, attr){
                if(obj.currentStyle){
                    return obj.currentStyle[attr];
                } else {
                    return getComputedStyle(obj, false)[attr];
                } 
            },
            act : function(obj, attr, target){
                var that = this;
                clearInterval(obj.timer);
                obj.timer = setInterval(function(){
                    var stop = true;
                    var cur = parseInt(that.css(obj, attr));
                    var speed = (target - cur) / 8;
                    speed = speed < 0 ? Math.ceil(speed) : Math.floor(speed);
                    if(target != speed){
                        stop = false;
                    }
                    obj.style[attr] = speed + cur + 'px';
                    if(stop){
                        clearInterval(obj.timer);
                    }
                }, 55);
            },
            //自己实现each方法
            each : function(arr, callback){//数组，回调函数 arr大约等于opt
                if(Array.isArray(arr)){
                    for(var i = 0, l = arr.length; i < l; i++){
                    //出现false即出错情况下出现
                        if(callback.call(arr[i], i, arr[i++]) == false){//元素对象存在 i相当于下面function(i,m)中的i,arr[i++]相当于m
                            break;
                        }
                    }
                } else {
                    for(var name in arr){
                        if(callback.call(arr[name], name, arr[name]) == false){//元素对象存在 name相当于下面function(i,m)中的i,arr[name]相当于m
                            break;
                        }
                    }
                }
            },
            create : function(opt){//传入一个对象
                var el = document.createElement(opt.tag || 'div');
                this.each(opt, function(i, m){
                    el[i] = this;//
                });
                return el;
            }
        }
        function Adv(){
            var args = arguments[0];
            for(var i in args){
                this[i] = args[i];
            }
            this.init();
        }
        Adv.prototype = {
            init : function(){
                this.render();
                this.bind();
            },
            render : function(){
                var div = dog.create({ className : 'out'}),
                    a = dog.create({ className : 'banner'}),
                    b = null;
                a.innerHTML = this.tpl;
                b = a.cloneNode(true);
                div.appendChild(a);
                div.appendChild(b);
                document.body.appendChild(div);
                this.a = a;
                this.b = b;
            },
            bind : function(){
                var that = this,
                    doc = document,
                    scrollTop = 0,
                    t = 0;
                //调用dog类
                dog.on(window, 'scroll', function(){//监听scroll事件
                    scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
                    t = scrollTop + (doc.documentElement.clientHeight - that.a.offsetHeight) / 2;
                    dog.act(that.a, 'top', t);
                    dog.act(that.b, 'top', t);
                });
            },
            getDom : function(){
                
            }
        }
        var defaults = {
            id : 'dialog',
            tpl : '<img src="images/ad.jpg" alt="">'
        }
        new Adv(defaults);
    }());
</script>
</body>
</html>

自己做到demo理解

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    
</head>
<body>
<div >dddddddddddddd</div>
</body>
<script type="text/javascript" language="javascript">
    (function(){
     var test={
      $:function(id){
      return document.querySelector(id);
      },
      xx:function(obj){
      //alert(obj);
       var obd= document.getElementById(obj);
      // obd.innerHTML="wo test";
      obd.style.backgroundColor='red';
      }
     }
     function demo(){
        var args = arguments[0];
            for(var i in args){
                this[i] = args[i];
            }
            this.init();
     }
      demo.prototype = {
            init : function(){
                this.render();
            },
            render : function(){
            var that =this;
            // alert(that.id));
             var b= test.xx(that.id);
            }
    }
     var test2={
        id:'xid'
     };
        new demo(test2);    
    })();
    </script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    
</head>
<body>
<div   >dddddddddddddd</div>
</body>
<script type="text/javascript" language="javascript">
//HTML DOM querySelector()  关键是这个方法的语法和用法
    (function(){
     var test={
      $:function(id){
      return document.querySelector(id);
      },
      xx:function(){ 
       //that.abc()
       //alert(that.id);
       //var obd= document.getElementById(that.id);
      // obd.innerHTML="wo test";
      
      //obd.style.backgroundColor='red';
      },
      css : function(obj, attr){
                if(obj.currentStyle){
                    return obj.currentStyle[attr];
                } else {
                    return getComputedStyle(obj, false)[attr];
                } 
            },
     }
     function demo(){
        var args = arguments[0];
            for(var i in args){
                this[i] = args[i];
            }
            this.init();
     }
      demo.prototype = {
            init : function(){
                this.render();
            },
            render : function(){
             var that=this;
             var target=test.$("#"+that.id);
             target.style.backgroundColor='red';
             alert(test.css(target,'width'));
            }
    }
     var dddd={
        id:'xid'
     };
        new demo(dddd);    
    })();
    </script>
</html>

由于对js了解甚少，又不知道从哪些地方入手，于是打算从理解+模仿来学习。希望有所获。

模仿学习案例链接：http://www.kancloud.cn/jikeytang/qq/81141

上一篇 »javascript中forEach，和jquery中each
下一篇 »Javascript/Jquery 中each，和forEach

jquery中的each用法以及js中的each方法实现实例

相关推荐

cocos2d JS 源生js实现each方法 javascript笔记——源生js实现each方法

jquery each函数对应的continue 和 break方法

jQuery .each 用于遍历页面元素

Jquery的集合方法EACH，

jQuery $.each用法

jquery的$，.each,$.each的区别

【jquery】find，方法和each

Jquery两个比较常用的方法each和data