使用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 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 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
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
php读取3389的脚本
2014/05/06 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
原生js实现购物车
2020/09/23 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
python递归查询菜单并转换成json实例
2017/03/27 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
python读写文件write和flush的实现方式
2020/02/21 Python
python属于解释语言吗
2020/06/11 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
《认识钟表》教学反思
2016/02/16 职场文书
php去除数组中为0的元素的实例分析
2021/11/17 PHP
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技