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

178 阅读 0 评论 118 点赞

我是靠谱客的博主可耐大白，最近开发中收集的这篇文章主要介绍使用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>