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

代码很简单，主要是给大家提供个思路，也算是学习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>

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

赞 (0)

相关推荐

  • 浅析jQuery的链式调用之each函数

    话说回来,虽然jQuery让学习前端技术的越来越多了起来,(本人就是因为学校图书馆偶然间遇到了一本jQuery基础教程(二)开始想深入的学习前端技术),关于jQuery的博文甚至多于javascript,它让编程的门槛大大的降低了,但是它隐藏了太多细节了,形如$('#id').append('<p>xxx</p>').clone().appendTo(x).end().css(...)................这样操作的模式已经很难找到常规javascript的影子.浏览器的

  • jQuery的链式调用浅析

    jQuery的链式调用浅析

    jQuery式的方法链核心部分是三点: 1)jquery的包装器函数(也就是jQuery(),以此来构建包装器对象),以此构造函数可以产生饱含了原生DOM对象的包装器对象. 它大概是这个样子的-(当然跟官方库的规模跟功能以及实现方式都差很多,我只是写了个大概的实现方式): 呃----我的失误,请大家如果有兴趣尝试下代码记得不要引入jQuery库,命名冲突了 复制代码 代码如下: (function(){ //简化起见不支持子类选择器属性选择器等等,只接受形如".className"或者

  • jQuery对象的链式操作用法分析

    本文实例讲述了jQuery对象的链式操作用法.分享给大家供大家参考,具体如下: jQuery对象的链式操作 首先来看一个例子: 复制代码 代码如下: $("#myphoto").css("border","solid 2px#FF0000").attr("alt"," good"); 对一个jQuery对象先调用了css()函数修改样式,然后使用attr()函数修改属性,这种调用方式象链一样,所以称为&qu

  • JavaScript对象链式操作代码(jquery)

    虽然现在慢慢减少了对jQuery的使用(项目上还是用,效率高点.平时基本不用了),希望从而减少对jQuery的依赖度. 但是这链式操作的方式实在吸引人(貌似现在不少新库都采用了链式操作). 新手无畏嘛,所以写了以下代码.主要是避免以后又忘了,呵呵. 复制代码 代码如下: window.k = function() { return new k.fn.init(arguments); } k.fn = k.prototype = { init:function() { this.length =

  • jQuery链式调用与show知识浅析

    jQuery链式调用与show知识浅析

    上篇文章给大家介绍了jQuery的框架,有关jquery的基础知识可以参考下. jQuery使用许久了,但是有一些API的实现实在想不通.下面将使用简化的代码来介绍,主要关注jQuery的实现思想. 相较于上一篇,代码更新了:21~78 (function(window, undefined){ function jQuery(sel){ return new jQuery.prototype.init(sel); } jQuery.prototype = { constructor: jQue

  • jQuery链式操作实例分析

    本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <script type="text/javascript"> $(function() { $("div").addClass("css1").filter(function(index) { return index == 1 || $(this).

  • jQuery链式操作如何实现以及为什么要用链式操作

    两个问题 1.jQuery的链式操作是如何实现的? 2.为什么要用链式操作? 大家认为这两个问题哪个好回答一点呢? 链式操作 原理相信百度一下一大把,实际上链式操作仅仅是通过对象上的方法最后 return this 把对象再返回回来,对象当然可以继续调用方法啦,所以就可以链式操作了.那么,简单实现一个: 复制代码 代码如下: //定义一个JS类 function Demo() { } //扩展它的prototype Demo.prototype ={ setName:function (name

  • jquery链式操作的正确使用方法

    糟糕的使用方法 复制代码 代码如下: $second.html(value);$second.on('click',function(){alert('hello everybody');});$second.fadeIn('slow');$second.animate({height:'120px'},500); 建议使用方法 复制代码 代码如下: $second.html(value);$second.on('click',function(){alert('hello everybody'

  • Javascript 链式调用实现代码(参考jquery)

    Javascript链式调用 function ele(){ this.elements=[]; var element; if(typeof arguments[0]=="string"){ element=arguments[0]; if (element.slice(0, 1) == '#') { element = document.getElementById(element.slice(1)); this.elements.push(element); }else if(e

  • 模仿jQuery each函数的链式调用

    复制代码 代码如下: <!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"> &l

随机推荐