jquery中的each用法以及js中的each方法实现实例
each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等
在javaScript开发过程中使用$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
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="data: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 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
jquery中的each用法以及js中的each方法实现实例的更多相关文章
- document.body的一些用法以及js中的常见问题
document.body的一些用法以及js中的常见问题 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight ...
- iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项 ...
- JavaScript 基础——使用js的三种方式，js中的变量，js中的输出语句，js中的运算符；js中的分支结构
JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...
- ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题
问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...
- 【2017-06-27】Js中获取地址栏参数、Js中字符串截取
一.Js中获取地址栏参数 //从地址栏获取想要的参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" ...
- php中的for循环和js中的for循环
php中的for循环 循环100个0 for ($i=0;$i<=100;$i++){ $pnums.='0'.","; } js中的for循环,循环31个相同的数.循环日期 ...
- 【微信小程序】--小程序中循环遍历（包括js中遍历和wxml中的遍历）
文章为博主原创,纯属个人见解,如有错误欢迎指出. 如需转载,请注明出处. 在js中遍历 for (var index in res.data.infos) { res.data.infos[index ...
- js的传值，table中tr的遍历，js中动态创建数组
1.这里关键是对页面中的传值,其次是动态的创建一个数组,用来存值 $(val).css("background-color", "rgb(251, 248, 233)&q ...
- asp.net中json格式化及在js中解析json
类: public class UploadDocumentItem { public UploadDocumentItem() { } public string DocMuid { get; se ...
随机推荐
- 一个短小的JS函数，用来得到仅仅包含不重复元素的数组
下面函数主要利用了数组的sort方法,之后的逻辑是看最后一个元素是否等于要添加的元素,如果不是就往尾后加. 这个做法的效率等于sort方法的效率,还过得去. 代码: <!DOCTYPE HTML ...
- iis7.5应用程序池模板永久性缓存初始化失败解决方法
错误: 针对应用程序池的模板永久性缓存初始化失败,这是由以下错误导致的: 无法为应用程序池创建磁盘缓存子目录.数据可能包含其他错误代码. 解决办法如下: 网上搜索的答案全都是修改3个目录的权限,给II ...
- 由单例模式学到：Lazy<T>
http://www.cnblogs.com/zhangpengshou/archive/2012/12/10/2811765.html http://www.cnblogs.com/anytao/a ...
- Android --Search界面样式
Lay_Weight 权重属性的使用 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android ...
- yaffs文件系统
1. 概述yaffs文件系统专为Nandflash设计的日志文件系统,占用page中oob区域.目前有两个版本的yaffs文件系统.nandflash不可靠,存在坏块,存在数据错误,需要软件弥补纠正此 ...
- 抽取AWR数据
使用$ORACLE_HOME/rdbms/admin/awrextr.sql $ sqlplus '/as sysdba' SQL*Plus: Release Production on Fri No ...
- js - ajax中的get和post说明
转自:http://www.cnblogs.com/hateyoucode/archive/2009/12/09/1620050.html 一.谈Ajax的Get和Post的区别 Get方式: 用 ...
- mongodb的连接和开启安全验证
首先是启动mongodb a.打开cmd,cd进入mongodb的安装目录下的bin目录下面,执行 mongod --dbpath D:\MongoDBdata(数据存放的目录) 或者将mongodb ...
- mysql：键缓存
myisam的主要优化参数: key_buffer_size - 这对MyISAM表来说非常重要,是用来设置整个MySQL中常规Key Cache的大小.一般来说,如果MySQL运行在32位平台,此值 ...
- Azure 负载均衡和可用性集
首先要2台以上的虚拟机,一开始我找了好久都没找到如何在一个云服务里添加多个虚拟机. 因为我使用的是快速创建,快速创建的界面是要新建一个云服务的,如果你输入现有的云服务名字,它会提示你重名了. 你要用[ ...