模仿jQuery each函数的链式调用


Posted in Javascript onJuly 22, 2009
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Each Document</title> 
<script type="text/javascript"> 
(function(){ //创建一个自执行函数 
function _$(el){ //声明一个类 
this.elements = []; //用于保存DOM元素的引用 
for (var i = 0; i < el.length; i++) { 
var element = el[i]; 
if (typeof element == string ) { 
element = document.getElementById(element); 
} 
this.elements.push(element); 
} 
} _$.prototype = { 
each: function(fn){ 
for (var i = 0; i < this.elements.length; i++) { 
fn.call(this, this.elements[i]); //第二个参数是fn函数的参数 
} 
}, 
setStyle: function(prop, val){ 
var that = this; 
this.each(function(el){ //注意参数的设置 
el.style[prop] = val; 
}); 
return this; 
} 
} 
window.$ = function(){ 
return new _$(arguments); 
}; 
})(); 
window.onload = function(){ 
$("p", "p2").setStyle("color", "red"); 
} 
</script> 
</head> 
<body> 
<p id="p"> 
Hello world 
</p> 
<p id="p2"> 
Welcome. 
</p> 
</body> 
</html>
Javascript 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
js 代码集(学习js的朋友可以看下)
Jul 22 #Javascript
javascript Base类 包含基本的方法
Jul 22 #Javascript
javascript 表单规则集合对象
Jul 21 #Javascript
一个可以随意添加多个序列的tag函数
Jul 21 #Javascript
一个cssQuery对象 javascript脚本实现代码
Jul 21 #Javascript
js计算页面刷新的次数
Jul 20 #Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 #Javascript
You might like
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
vue 解决computed修改data数据的问题
2019/11/06 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
Python函数返回不定数量的值方法
2019/01/22 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
Haggar官网:美国男装品牌
2020/02/16 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
大学生就业自荐信
2013/10/26 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
入党后的感想
2015/08/10 职场文书