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 ...
随机推荐
- Asp.net MVC 中超链接的三个方法及比较
在Asp.net WebForm开发中,我们通过a标签进行跳转时,通常的写法是:<a href="index.aspx">首页</a>, 在Asp.net ...
- 【转】Http Cache最基本的一些东西
Http Cache最基本的一些东西 Cache浏览器IEwebkitApache Http的Cache机制总共有4个组成部分: Cache-Control: max-age=N(seconds) ...
- 让DIV中的内容水平和垂直居中
让一个层水平垂直居中是一个非常常见的布局方式,但在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的.(页面设置height:100%;是无效的),这 ...
- 设置tomcat的编码为utf-8
<Connector URIEncoding="UTF-8" connectionTimeout="20000" port="8080" ...
- 利用css做扇形
html和css每一块的边边角角都是直来直去,除了border-raius,要怎么做扇形了?当然,你如果只想要得到直角扇形,和半圆,那就很简单?那么做小于180的直角扇形,如何做了(大于180的直角无 ...
- 呛口大话APP 移动端到底怎么玩
[上海站]活动概况 时间:2016年04月09日13:30-16:30 地点:上海市黄浦区黄陂北路227号中区广场105室WE+联合办公空间 主办:APICloud.七牛.听云 报名网址:http:/ ...
- Java静态代码分析工具——FindBugs插件的安装与使用
1 什么是FindBugs FindBugs 是一个静态分析工具,它检查类或者 JAR 文件,将字节码与一组缺陷模式进行对比以发现可能的问题.有了静态分析工具,就可以在不实际运行程序的情况对软件进行分 ...
- python_递归
1. 递归示例 #coding:utf-8 #递归进行阶乘 def mm(num): if(num == 1): return 1 else: return mm(num-1) * num prin ...
- PHP导出CSV UTF-8转GBK不乱码的解决办法
折腾了几次 搜索了好久 终于找到办法 /** * http://yige.org/php/ * @ string 需要转换的文字 * @ encoding 目标编码 **/ function conv ...
- linux：磁碟与档案系统管理
档案系统特性:为什么磁碟分割完需要格式化(format)才能使用吗? 答:因为每种作业系统所设定的档案属性和权限并不相同,为了存放这些档案所需的资料(所以需要格式化成作业系统能够利用的档案系统格式fi ...