jQuery 迭代器
在 叶小钗 的博客中看到一段关于遍历的代码
var ajQuery = {}; function dir(elem, dir, until) {
var matched = [],
truncate = until !== undefined;
while ((elem = elem[dir]) && elem.nodeType !== 9) {
if (elem.nodeType === 1) {
if (truncate) {
if (elem.nodeName.toLowerCase() == until || elem.className == until) {
break;
}
}
matched.push(elem);
}
}
return matched;
} // 迭代器
jQuery.each({
parent: function(elem) {
var parent = elem.parentNode;
return parent && parent.nodeType !== 11 ? parent : null;
},
parents: function(elem) {
return dir(elem, "parentNode");
},
parentsUntil: function(elem, until) {
return dir(elem, "parentNode", until);
}
}, function(name, fn) {
ajQuery[name] = function(until, selector) {
return fn(until, selector);
};
}); $("#test1").click(function() {
var item = $('.item-1');
alert(item.parent()[0])
alert(item.parents().length)
alert(item.parentsUntil('body').length)
}) $("#test2").click(function() {
var item = document.querySelectorAll('.item-1')[0]
alert(ajQuery.parent(item))
alert(ajQuery.parents(item).length)
alert(ajQuery.parentsUntil(item, 'body').length)
})
jQuery 中的each 不仅仅是用来遍历jQuery对象,还可以用来作为合并接口。
jQuery.each({
parent: function(elem) {},
parents: function(elem) {},
nextAll: function(elem) {},
prevAll: function(elem) {},
................
}, function(name, fn) {
api[name] = function(until, selector){
};
});
其中就利用了$.each(fn)的特性,jQuery 源码中 :
each: function( obj, callback, args ){}
为obj 执行回调函数 callback。
里面的巧妙之处在于:
在为obj执行回调函数的时候,回调函数为新的对象 ajQuery{},绑定了新的属性(或方法)
function(name, fn) {
ajQuery[name] = function(until, selector) {
return fn(until, selector);
};
}
测试:
jQuery.each({
say: function(cont){
console.log(cont);
}
}, function(name, fn) {
ajQuery[name] = function(until, selector) {
// 传递fn参数
return fn(until, selector);
};
});
$("#test1").click(function() {
ajQuery.say('oooooooo'); // oooooooo
})
所以根据这个推论,总结each的原理:
1. 遍历obj对象;
2. 为callback传参;
3. 为每个obj[i],绑定callback
模拟写了个版本:
o = {};
test = {
fn1: function(){},
fn2: function(){},
getDom: function(dom, fn){
var t = document.getElementById(dom)
return t.onclick = function(){
fn()
}
},
each: function(c, fn){
for(k in c){
fn.call(c[k],k,c[k]);
}
return c;
}
} test.each({
say: function(cont){
console.log(cont)
},
walk: function(length){
console.log('walk '+length);
}
}, function(name, fn) {
o[name] = function(name){
return fn(name);
}
})
// 调用
test.getDom('btn', function(){
o.say('aaaaa');
})
jQuery 迭代器的更多相关文章
- jQuery迭代器
http://www.imooc.com/code/3417 迭代器 迭代器是一个框架的重要设计.我们经常需要提供一种方法顺序用来处理聚合对象中各个元素,而又不暴露该对象的内部,这也是设计模式中的迭代 ...
- javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)
类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...
- JQuery操作类数组的工具方法
JQuery学习之操作类数组的工具方法 在很多时候,JQuery的$()函数都返回一个类似数据的JQuery对象,例如$('div')将返回div里面的所有div元素包装的JQuery对象.在这中情况 ...
- JQuery常用函数及功能小结
1.文档加载完成执行函数$(document).ready(function(){ alert("开始了");});2.添加/删除CSS类$("#some-id&quo ...
- 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类(一)
本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
- js/jquery/html前端开发常用到代码片段
1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...
- JQuery常用方法一览
$(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/ ...
- js设计模式总结-迭代器模式
迭代器模式 要解决的问题 迭代器要解决的问题很简单很单纯,就是进行遍历操作. 实现原理 基本所有语言都实现了迭代器,javascript也不例外,如Array.prototype.forEach,fo ...
随机推荐
- 全国计算机等级考试二级教程-C语言程序设计_第15章_位运算
位运算,不适用于实数,仅仅适用于整数.字符. C语言的位运算只能操作整数.字符,实数是指数方式表示的,不适用于位运算. #define _CRT_SECURE_NO_WARNINGS #include ...
- 扑克k,你知道的人物吗?
在扑克牌中,黑桃K——大卫王(以色列联合王国第二任国王):红桃K——查里曼大帝(法兰克国王,后加冕为罗马人的皇帝):梅花K——亚历山大大帝(马其顿帝国国王):方块K——凯撒大帝(罗马共和国终生执政官) ...
- ssm+easyUI datagrid 不能显示后台controller层返回的json数据
后台打印查询出来的数据: {"total":29,"rows":[{"department_id":0,"department_n ...
- 底层由于接收到操作系统的信号而停止(the inferior stopped because it triggered an exception)
QT开发内存管理问题: 在linux上提示:底层由于接收到操作系统的信号而停止: 在windows上提示:the inferior stopped because it triggered an ex ...
- Linux学习之给指定用户发邮件
发送邮件 进入 mail 程序后的操作都很简单,但是可以不进入 mail 的 & 操作提示符界面,下面举几个实用例子: 1.给 snailwarrior@qq.com 发信 [root@pps ...
- jQuery中的类型判断
在JQuery中有一个type方法,在1.11.2中是这样写的 var class2type = {}; var toString = class2type.toString; jQuery.each ...
- 微博发布效果jq版
大家都看过新浪微博的发状态功能,我模拟了一下类似的效果,包括发布时间,删除效果等.代码如下: <!DOCTYPE HTML> <html> <head> <m ...
- 通过 IP 访问谷歌
最近貌似谷歌都不能访问,对于我等经常使用谷歌的人说不是件好事,毕竟谷歌比百度专业,好在有解决办法: 1. 找到文件:C:\Windows\System32\drivers\etc\hosts 2. 把 ...
- js 报错 :object is not a function
object is not a function 我遇到的具体问题是:js命名方法重复了,找到了别的地方,改个方法名就可以了 var h2_price = document.getElementByI ...
- SQL Server 行的删除与修改-------------(未完待续P222 deep SQL Server 222 )
删除: 1.堆表:当行被删除时,不会自动重新组织页面上的空间.删除行时不会从物理页面上删除, 而只是把行偏移设置为 0 .表示空间没有使用.除了页面上没有被回收空间之外,堆中的 空白页也常常不会被回收 ...