使用JavaScript链式编程实现模拟Jquery函数


Posted in Javascript onDecember 21, 2014

代码很简单,主要是给大家提供个思路,也算是学习javascript这么长时间的一个小小的练手。

链式编程 是将多个操作(多行代码)通过点号"."链接在一起成为一句代码。链式代码通常要求操作有返回值,但对于很多操作大都是void型,什么也不返回,这样就很难链起来了,当然也有解决办法,可能不太优雅。链式编程的新思想在jQuery中已流行使用

<span>Hello,World!</span>

 <script type="text/javascript">

     Jq = function (tagName) {

         var tagArr = document.getElementsByTagName(tagName);

         var ret = {

             tag: tagArr,

             css: function (attribute, value) {

                 for (var i = 0; i < this.tag.length; i++) {

                     this.tag[i].style[attribute] = value;

                 }

                 return this;

             }

         }

         return ret;

     }

     window.onload = function () {

         Jq("span").css("color", "red")

                   .css("border", "1px solid green")

                   .css("padding", "10px");

     }

 </script>

有意问的话,就留言,大家共同进步

Javascript 相关文章推荐
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
angularJS 中input示例分享
Feb 09 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 #Javascript
编写简单的jQuery提示插件
Dec 21 #Javascript
不使用ajax实现无刷新提交表单
Dec 21 #Javascript
webapp框架AngularUI的demo改造之路
Dec 21 #Javascript
浅析webapp框架AngularUI的demo
Dec 21 #Javascript
AngularJS基础知识
Dec 21 #Javascript
javascript关于继承的用法汇总
Dec 20 #Javascript
You might like
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
PHP7内核之Reference详解
2019/03/14 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
使用jQuery实现动态添加小广告
2017/07/11 jQuery
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
Python类定义和类继承详解
2015/05/08 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
学校万圣节活动方案
2014/02/13 职场文书
电工技术比武方案
2014/05/11 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
python 批量压缩图片的脚本
2021/06/02 Python
详解 TypeScript 枚举类型
2021/11/02 Javascript