编写jQuery插件

最新推荐文章于 2024-07-04 12:16:35 发布
最新推荐文章于 2024-07-04 12:16:35 发布
阅读量1.2k 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenyonken/article/details/80982279
版权

一、插件的种类

1.1 封装对象方法的插件

    这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势。有相当一部分的jQuery的方法，都是在jQuery脚本库内部通过这种形式“插”在内核上的，例如parent()方法、appendTo()方法和addClass()方法等不少DOM操作方法

1.2 封装全局函数的插件

    可以将独立的函数加到jQuery命名空间下。例如jQuery.noConfilct()方法、常用的jQuery.ajax()方法以及去除首位空格的jQuery.trim()方法，都是jQuery内部作为全局函数的插件附加到内核上去的。

1.3 选择器插件

    扩展自己喜欢的选择器，例如用：color(red)来选择所有红色字的元素之类的想法。

二、插件的基本要点

  • jQuery插件的文件名推荐命令为jquery.[插件名].js，以免和其他的JavaScript库插件混淆。例如命名为jquery.color.js
  • 所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上。
  • 在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般的方法那样，例如click()方法，内部的this指向的是DOM元素
  • 可以通过this.each来遍历所有元素
  • 所有的方法或函数插件，都应当以分号结尾，否则压缩的时候可能出现问题。为了更稳妥些，甚至可以在插件头部先加上一个分号，以免他人的不规范代码给插件带来影响。
  • 插件应该返回一个jQuery对象，以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如字符串或者 数组等。
  • 避免在插件内部使用$作为jQuery对象的别名，而应使用完整的jQuery来表示。这样可以避免冲突。当然，也可以利用闭包这种技巧来回避这个问题，使插件内部继续使用$作为jQuery的别名。

三、插件中的闭包

    关于闭包，ECMAScript对其进行了简单的描述：允许使用内部函数（即函数定义和函数表达式位于另一个函数体内），而且，这些内部函数可以访问它们所在的外部函数中声明的所有全局变量、参数和声明的内部函数，当其中一个这样的内部函数在包含它们的外部外部函数之外被调用时，就会形成闭包。即内部函数会在外部函数返回后被执行。而当这个内部函数执行时，它仍然必须访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回的值，但也会受到内部函数的影响。
    利用闭包的特效，既可以避免内部临时变量影响全局空间，又可以在插件内部继续使用$作为jQuery的别名。常见的jQuery插件都是一下这种形式的：

（function(){
    /*这里放置代码*/
})();

    首先定义一个匿名函数function(){/这里放置代码/}，然后用括号括起来，变成（function(){/这里放置代码/})这种形式，最后通过()这个运算符来执行。可以传递参数进去，以供内部函数使用。

//注意为了更好的兼容性，开始前有个分号
;（function(){
    /*这里放置代码*/
})(jQuery);

    上段代码是一种常见的jQuery插件的结构。接下来看下面这段jQuery代码

;(function($){
    //这里编写插件的代码，可以继续使用$作为Query的别名
    //定义一个局部变量foo,仅函数内部可以访问，外部无法访问
    var foo;
    var bar=function(){
        // 在匿名函数内部的函数都可以访问foo,即便是在匿名函数的外部调用bar()的时候，也可以
        // 在bar()的内部访问到foo,但在匿名函数的外部直接访问foo是做不到的
    }

    // 下面的语句让匿名函数内部的函数bar()逃逸到全局可访问的范围内，
    // 这样就可以在匿名函数的外部通过调用jQuery.BAR()来访问内部定义
    // 的函数bar(),并且内部函数bar()也能访问匿名函数内的变量foo
    $.BAR=bar;
})(jQuery);

    简单介绍了闭包的概念。对于插件的制作来说，读者只需要知道所有的插件代码必须放置在下面的这两句代码中内就可以了。

;(function($){
    //此处编写jQuery插件代码
})(jQuery);

四、jQuery插件的机制

    jQuery提供了两个用于扩展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。前者用于扩展之气那提到的3种类型插件中的第一种，后者用于扩展后两种插件。这两个方法都接受一个参数，类型为Object。Object对象的“名/值对”分别代表“函数或方法名/函数主题”。具体内容将在下面讲解
    jQuery.extend()方法除了可以用于扩展jQuery对象之外，还有一个很强大的功能，就是用于扩展已有的Object对象。

jQuery.extend(target,obj1,......[objN])

    用一个或多个其他对象来扩展一个对象，然后返回被扩展的对象。

var settings={validate:false,limit:5,name:"foo"};
var options={validate:true,name:"bar"};
var newOptions=jQuery.extend(settings,options);

    结果为

var newOptions={validate:true，limit:5,name:"bar"};

    jQuery.extend()方法经常被用于设置插件方法的一系列默认参数，如下面的代码所示

function foo(option){
    options=jQuery.extend({
        name:"bar",
        length:5,
        dataType:"xml"/*默认参数*/
},options);         /*options为传递的参数
};

    如果用户调用foo()方法的时候，在传递的参数options对象中设置了相应的值，那么就使用设置的值，否则就使用默认值。代码如下

foo({name:"a",length:"4",dataTyep:"json"});
foo({name:"a",length:"4"});
foo({name:"a"});

    通过使用jQuery.extend()方法，可以很方便地用传入的参数来覆盖默认值。此时，对方法的调用依旧保持一致，只不过要传入的是一个映射而不是一个参数列表。这种机制比传统的每个参数都去检测的方式不仅灵活而且更简洁。此外，使用命名参数意味着再添加新选项也不会影响过去编写的代码。

五、编写jQuery插件

5.1 封装jQuery对象方法的插件
  • 编写设置和获取颜色的插件:color()

功能：

  1. 设置匹配元素的颜色
  2. 获取匹配的元素（元素集合中的第1个）的颜色

（1）在JavaScript文件里搭好框架

;(function($){
    /*这里写插件代码*/
})(jQuery);

（2）对jQuery对象的方法扩展。因为是对对象的方法进行扩展，因此采用第1类 插件的方法jQuery.fn.extend()来编写

    ;(function($) {
        jQuery.fn.extend({
            /*这里写插件代码*/
        });
    })(jQuery);
    ;(function($) {
        jQuery.fn.extend({
            "color":function(value){
                return this.css("color",value);
            }
        });
    })(jQuery);

代码解析：插件内部的this指向的是jQuery对象，而非普通的DOM对象。插件如果不需要放回字符串之类的特定值，应当使其具有可链接性，为此，直接返回这个this对象。

（3）接下来实现第2个功能。如果没有给方法传递参数，那么就是获取集合对象中的第1个对象的color值。由于css方法本身就具有返回第1个匹配元素的样式值得功能，因此此处无需通过eq()来获取第1个元素。只要将这两个功能合起来，判断一下value是否是undefined即可

    ;(function($) {
        jQuery.fn.extend({
            if(value==undefined){
                return this.css("color");
            }else{
                "color":function(value){
                return this.css("color",value);
                }
            }
        });
    })(jQuery);

代码解析：
     css()方法内部已经有判断value()是否为undefined的机制，所以才可以根据传递参数的不同而返回不同的值。因此，可以借助css()方法的这个特性来处理该问题，删除if（）部分，最终剩余的代码实际上与先前的那一段是一样的。

    ;(function($) {
        jQuery.fn.extend({
            "color":function(value){
                return this.css("color",value);
            }
        });
    })(jQuery);

（4）插件以及测试代码（将上面编写的插件代码复制到jquery.color.js文件中，然后引入）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript" src="jquery.color.js"></script>
    <script type="text/javascript">
    //插件应用
    $(function(){
       $("div").click(function(){
            var color = $(this).text();
            $("div").color( color ); //设置所有的div的字体颜色
       })
    })
    </script>
</head>

<body>
    <div class="a">red</div>
    <div >blue</div>
    <div >green</div>
    <div >yellow</div>
</body>
</html>

（5）运行效果：点击不同的div，会将所有的div的字体颜色切换


这里写图片描述

5.2 封装全局函数的插件

    这类插件是在jQuery命名空间内部添加一个函数 。这类插件很简单，只是普通的函数，没有特别需要注意的地方。
    例如新增两个函数，用于去除左侧和右侧的空格。虽然jQuery已经提供了jQuery.trim()方法来去除空格，但在某些情况下，会只希望去除某一侧的空格

function ltrim(text){
    return (text || "").replace(/^\s+/g,"");
}
function rtrim(text){
    return (text || "").replace(/\s+$/g,"");
}
  • (text || “”)部分是用于防止传递进来的text这个字符串变量处于未定义之类的特殊状态。如果text是undefined，则返回字符串“”，否则 返回字符串text，这个处理是为了保证接下来的字符串替换方法replace()不会出错
  • 运用了正则表达式替换首末的空格

    函数写完之后，就可以放到 jQuery命名空间之下 。代码很简单，而且可以批量完成。
    首先构建一个Object对象，把函数名和函数都放进去，其中的名/值对分别为函数名和函数主题，代码如下：

{
    ltrim:function ltrim(text){
        return (text || "").replace(/^\s+/g,"");
    },
    rtrim:function rtrim(text){
        return (text || "").replace(/\s+$/g,"");
    }
});

    然后，利用jQuery.extend()方法直接对jQuery对象进行扩展。jQuery代码如下：(jquery.trim.js)

;(function($){
    $.extend(
    {
        ltrim:function ltrim(text){
            return (text || "").replace(/^\s+/g,"");
        },
        rtrim:function rtrim(text){
            return (text || "").replace(/\s+$/g,"");
        }
    });
})(jQuery);

    测试代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript" src="jquery.trim.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#trimText").val(
            jQuery.trim("   text    ")+"\n"+
            jQuery.ltrim("   text    ")+"\n"+
            jQuery.rtrim("   text    ")
        );
        })
    </script>
</head>

<body>
    <textarea id="trimText" rows="5" cols="20">
    </textarea>
</body>

</html>


这里写图片描述

5.3 自定义选择器

    jQuery提供了一套方法让用户可以通过制作选择器插件来使用自定义选择器，从而使jQuery的选择器功能更加完善。
    jQuery的选择符解析器首先会使用一组正则表达式来解析选择器，然后针对解析出的每个选择符执行一个函数，称为选择器函数。最后根据根据这个选择器函数的返回值为ture还是false来决定 是否保留这个 元素。这样就可以找到匹配的元素节点。
    下面是一个选择器的例子

$("div.gt(1)")

    该选择器首先会获取所有的< div > 元素，然后隐式遍历这些< dvi >元素，并逐个将这些< div >元素作为参数，连同括号里的“1”等一些参数（具体见下文）一起传递给gt对应的选择器函数进行判断。如果这个函数返回true，则这个< div >元素保留，如果返回false，则不保留这个< div >元素。这样得到的结果就是一个符合要求的< div >元素的集合。
    :gt()选择器在jQuery源文件中的代码如下：

gt:function(a,i,m){
    return i>m[3]-0;
}

代码解析：

（1）第1个参数为a:指向的是当前遍历到的DOM元素
（2）第2个参数为i，指的是当前遍历到的DOM元素的索引值，从0开始
（3）第3个参数m最为特别，它是由jQuery正则解析引擎进一步解析后的产物（用match匹配出来 的），是一个数组

  • m[0]：以上面的$(“div:gt(1)”)这个例子来讲，是:gt(1)这一部分。它是jQuery选择器进一步将要匹配的内容
  • m[1]：这里是选择器的引导符，匹配例子中的“：”，即冒号。并非只能使用“：”,后面跟上选择器，用户还可以自定义其他的选择器引导符。
  • m[2]：即例子中的gt，确定究竟是调用哪个选择器函数
  • m[3]：即例子中括号里的数字“1”，它非常有用，是编写选择器函数最重要的一个参数。

  • m[4]：上面的例子没有体现出来，这个比较罕见，例如“div:l(ss(dd))”这样一个选择器中，m[4]就指向了（dd）这部分，注意是带括号的（dd），而不只是dd。同时要注意，此时的m[3]的值是ss(dd)而非ss。

        接下来编写一个between选择器，例如使用$(“div:between(2,5)”)能实现获取索引值为3、4元素的功能。

（1）首先构造选择器函数

function(a,i,m){
            var tmp=m[3].split(",");    //以逗号为分隔符，切成一个数组
            return tmp[0]-0<i && i<tmp[1]-0;    //
        }

    代码解析：
    第1行，将传递进来的m[3]以逗号为分隔符，转成一个数组。m[3]此时的值应该是”2，5“，是一个字符串。随后放入临时变量tmp中待用。
    第2行，直接将得到的2和5与i进行比较，i大于2并且小于5的元素都将得以保留。注意，此处用了一个小技巧，通过tmp[0]-0将本来的”2“这个字符串转换成了数字2，然后再与i进行比较。

（2）接下来，将这个函数扩展成jQuery的选择器

;(function($){
    $.extend(jQuery.expr[":"],{
        between:function(a,i,m){
            var tmp=m[3].split(",");    //以逗号为分隔符，切成一个数组
            return tmp[0]-0<i && i<tmp[1]-0;    //
        }
    });
})(jQuery);

    代码解析：这里再次利用jQuery.extend()方法来对jQuery对象的一部分就行扩展。选择器仅仅是jQuery.expr[“:”]对象的一部分（expr[“:”]的相关介绍https://blog.csdn.net/Q846169253/article/details/79964201），同时也是一个Object对象，因此可以直接利用jQuery.extend()对其进行扩展。

（3）最后就可以把选择器放入页面中来选取元素了，这里导入的jQuery版本要低点，高版本效果出不来，代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-1.3.1.js"></script>
    <script type="text/javascript" src="jquery.between.js"></script>
    <script type="text/javascript">
        $(function(){
            $("div:between(2,5)").css("background","white");   
        })
    </script>
</head>

<body>
   <div style="background:red">0</div>
   <div style="background:blue">1</div>
   <div style="background:green">2</div>
   <div style="background:yellow">3</div>
   <div style="background:gray">4</div>
   <div style="background:orange">5</div>
</body>

</html>

（4）效果：3、4行的背景颜色变成了白色


这里写图片描述

chenyonken
关注
专栏目录
学习JQuery插件开发教程
we
07-10 718
如果你跟我一样，jQuery属于入门级的，那么我建议你看我下一篇jQuery教程：自己动手开发jquery插件 ，这篇插件比较容易理解和模范，适合新手开发jQuery插件。推荐你去看一看。 在逛codeproject网站的时候，突然看到一篇文章：How to write plugin in Jquery. 如果对E文好的同学 ，可以看上面的连接。 现在我把上面网站的及结合自己的想法写这篇文章。希望能得到大牛们的支持和谅解。。。大鸟飞过。。。欢迎拍装。 插件编写的目的是给已经有的一系列方法或函数做一个封装，以
jquery插件编写指南
10-08
这里提供最基础的jquery插件编辑方法，为jquery插件学习者提供帮助。
jQuery编写插件()
weixin_30566063的博客
08-08 371
引言： 　　在项目中不同页面经常要用到已经写好的交互，比如弹窗，比如下拉菜单，比如选项卡，比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情，而且个人认为有些low了，我们可是要追寻 高大上的90后有为青年呢~可是该如何高大上呢？这时jQuery自定义插件开发来了，第一次听到插件开发觉得如此happy， 遂动手网上查找资料进行学习，如下，我用自己的语言...
jQuery 常用方法详解及示例
最新发布
abments的博客
07-04 1494
jQuery 是一个快速、简洁的 JavaScript 库，它极大地简化了 HTML 文档操作、事件处理、动画效果以及 AJAX 交互。本文将详细介绍 jQuery 的一些常用方法，并通过示例说明它们的使用方法。用于选择 DOM 元素。示例： 筛选出与选择器匹配的元素。示例： 移除与选择器匹配的元素。示例： 选择具有指定索引值的元素。示例： 2. 操作 DOM 元素 获取或设置元素的 HTML 内容。示例： 获取或设置元素的文本内容。示例： 获取或设置元素的属性。示例： 移除元素的属性。示例：
Jquery插件写法
xiaolang827的专栏
12-18 367
最近很多网友说Jquery插件是什么啊？怎么写的啊？我不会写啊？   一大堆的问题一时都不知道怎么回答他们，个人认为是网友们把问题复杂化了。 其实就是把一些常用、实用、通用的功能封装起来而以，简单的来讲就是把这些代码放在一个方法里面，可以达到重复使用的效果，这样就可以不需要每次要用此功能的时候都去重新写一遍。   现在Jquery里面加入了插件的概念，只要按照它特
【原】jQuery编写插件
weixin_30521161的博客
01-08 118
分享一下编写设置和获取颜色的插件，首先我将插件的名字命名为jquery.color.js。该插件用来实现以下两个功能1.设置元素的颜色。2.获取元素的颜色。 先在搭建好如下编写插件的框架： ;(function($){ //这里编写插件代码 })(jQuery); 我这里采用jQuery.fn.extend().这种方法来编写，代码如下： ;(functi...
编写自己的jquery插件
ahe87275的博客
12-02 139
如何编写自己的jquery插件 Jquery的插件主要分为三类： 1、封装对象方法的插件：大部分插件都是封装对象的插件 2、封装全局函数的插件：将独立的函数添加到jquery的命名空间之下。Jquery.ajax()和jquery.trim()就是jquery内部作为全局函数的插件添加到内核上去的。 3、选择器插件：扩充自己喜欢的一些选择器。 编写Jquery插件的基本...
如何编写jquery插件
10-20
如何编写jQuery插件 在JavaScript开发中，jQuery库因其简洁的API和强大的DOM操作能力而深受开发者喜爱。为了提升代码的复用性和可维护性，编写jQuery插件是常见的实践。下面将详细介绍如何编写不同类型的jQuery插件...
jquery-plugin-typescript-example：示例项目，演示如何使用TypeScript编写jQuery插件
02-04
本项目“jquery-plugin-typescript-example”正是为了展示如何利用TypeScript来编写高效、健壮的jQuery插件。 **TypeScript的优势** 1. **静态类型**：TypeScript引入了静态类型系统，可以在编译阶段捕获许多潜在...
用JS编写JQuery插件版的动画播放器
03-27
我们将深入理解jQuery插件的构造，动画原理，并通过分析`player.js`文件中的代码来学习如何创建和控制动画。 首先，jQuery插件的基本结构通常包含两个部分：封装和扩展。封装是为了保持原有jQuery对象的干净，而...
jQuery插件编写
越努力，越幸运！
07-15 8918
jQuery插件编写的一些总结
JQuery插件编写方法
红星娃娃头
06-03 412
一：普及JQuery知识 知识1：用JQuery写插件时，最核心的方法有如下两个： $.extend(object) 可以理解为JQuery 添加一个静态方法。 $.fn.extend(object) 可以理解为JQuery实例添加一个方法。 基本的定义与调用： /* $.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * *
跟我一起学JQuery插件开发
weixin_34214500的博客
04-06 213
以前一直比较好奇，jquery插件是怎么开发的，怎么写属于自己的插件？ 昨天在逛codeproject网站的时候，突然看到一篇文章：How to write plugin in Jquery. 如果对E文好的同学 ，可以看上面的连接。 现在我把上面网站的及结合自己的想法写这篇文章。希望能得到大牛们的支持和谅解。。。大鸟飞过。。。欢迎拍装。 资料来源： 【1】How to write pl...
如何编写jQuery插件
Dear_Mr的博客
04-11 772
如何编写jQuery插件1. jQuery插件的介绍首先，得明白编写插件的目的：给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护和提高开发效率。接下来，你就需要知道jQuery插件的分类： 封装对象方法的插件：将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，在jQuery内库中许多方法都是通过这种方式的，如parent()方法，appendTo()方法，
为jQuery写插件
weixin_33881050的博客
12-24 57
很多场合，我们都会调用jQuery的插件去完成某个功能，比如slider。 如下图，做一个div，通过“$( "#slider" ).slider();”的方式直接将div变成slider，比起slider($('#slider'))更贴近jQuery的链式调用写法，可读性和通用性更好些。   那么，我们也来为jQuery写插件。便于项目中的组件化。 方法是非常简单的，那就写一个测试的...
如何编写Jquery插件？
编码行者的博客
02-27 478
创建插件 看来 jQuery 你已经用得很爽了，想学习如何自己编写插件。非常好，这篇文档正适合你。用插件和方法来扩展 jQuery 非常强大，把最聪明的功能封装到插件中可以为你及团队节省大量开发时间。 开始 要编写一个 jQuery 插件，需要为 jQuery.fn 对象增加一个新的函数属性，属性名就是插件的名字 jQuery.fn.myPlugin = function() { //...
如何编写一个Jquery插件
weixin_34014555的博客
05-04 89
为什么80%的码农都做不了架构师？>>> ...
jQuery插件编写全攻略：步骤详解与实践
本文详细介绍了jQuery插件的编写步骤，并着重讲解了如何利用jQuery的核心功能扩展其功能。首先，让我们理解jQuery插件的作用，它允许开发者将自定义的功能封装为可复用的模块，方便其他开发者在项目中集成和调用。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值