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

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 style="height:3000px"></div>
<div style="display:none;">
    <div id="div" style="width:100px;height:200px;background:#000;"></div>
    <button id="btn">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" >‘
        }
        new Adv(defaults);
    }());
</script>
</body>
</html>

自己做到demo理解

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>

</head>
<body>
<div id="xid">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 id="xid"  style="width:200px; height:230px;">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

时间： 2024-11-03 15:01:10

jquery中的each用法以及js中的each方法实现实例的相关文章

document.body的一些用法以及js中的常见问题

document.body的一些用法以及js中的常见问题 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth    (包括边线的宽); 网页可见区域高: document.body.offsetHeight   (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: documen

iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项目,需要一个webView,同时这个webView会需要引入一些项目中的资源: 一个本地的html文件,作为webView的模板 两张loading图片,在图片未加载的时候进行占位 jquery.js,scrollLoading.js 也是本地的,实现滚动加载图片功能 然后就开始了漫长的Google历程. 在w

xcode,在webView中引入本地html,image,js,css文件的方法

http://www.shuizhongyueming.com/2014/01/load-local-image-js-css-file-to-webview-in-xcode/ xcode,在webView中引入本地html,image,js,css文件的方法

【juincen】Java中的接口interface类比js中的回调函数

前几天在左讯飞语音的时候,无意间意识到java中的接口和js中常用的回调函数有点类似,今天在这儿整理一下思路. interface,Java中的接口,为什么会有这个东西. 一,预留声明 比如两个程序员A和B,A要写一段程序,其中需要调用到B写的程序.这时候A可以写一个接口: public interface Demo{ void deal(); } A要调用的方法先“预留声明”在接口里:deal 然后B去完善这个接口,B写了一个实现类实现了这个Demo接口. A在自己的业务逻辑里面只用调用接口的

ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题

问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一个判断是 ajax 请求的常量 IS_AJAX: Ajax 请求常用的有两种情况:一种是原生 js 的 ajax 请求.一种是 jQuery 的 ajax 请求. 分析: 先看看使用 jQuery 中使用 ajax 发送请求的时候的头信息: Accept: application/json, tex

php中的for循环和js中的for循环

php中的for循环 循环100个0 for ($i=0;$i<=100;$i++){ $pnums.='0'.","; } js中的for循环,循环31个相同的数.循环日期时间 var list=[]; for(var i= 0;i < 31;i++){ list.push(620); }//日期时间 var list = []; for (var i = 1; i <= 31; i++) { list.push('2017.01.' + i); }

JS的三种使用方式/CSS的三种使用方式/JS中的DOM事件模型/JS中匿名函数的书写及调用/媒体查询@media的三种使用方式

一.JS的三种使用方式 1.html标签中内嵌JS(不提倡使用.)                <button onclick="javascript:alert('你真点啊.')" > 有本事点我呀!!!!</button>                                2.HTML页面中直接使用JS:                <script type="text/javascript">        

Java中的变量机制以及JS中的搜寻参数机制区别

JAVA: public class Hello { public static void changeInt(String str){ if (str == "blue") { str = "red"; } else{ str = "green"; } System.out.println(str); } public static void main(String[] args) { String str = "blue"

js的传值，table中tr的遍历，js中动态创建数组

1.这里关键是对页面中的传值,其次是动态的创建一个数组,用来存值 $(val).css("background-color", "rgb(251, 248, 233)");//取消选中var ary;if (crival_number.indexOf(fnumber) > 0) { var fnumbers = crival_number.split(",");//然后做的操作便是从crival_number中去掉相对应的numberary