jQuery自定义插件

╰半夏微凉° 2022-07-19 00:28 274阅读 0赞

jQuery是一个功能强大的库，提供了开发JavaScript项目所需的所有核心函数。然而，有时候我们还是需要使用自定义代码来扩展这些核心函数来提高开发效率。  
jQuery库是为了加快JavaScript的开发速度而设计的，通过简化编写JavaScript的方式，减少代码量。

**jQuery编写插件有两种方式**  
1.添加jQuery对象级别的插件，原理是给jQuery类添加方法。  
写法如下：

2.添加jQuery类级别的方法，也就是添加静态方法  
写法如下：

**jQuery插件的种类**  
1.对象级别插件开发，即给jQuery对象添加方法，封装对象方法的插件，例如：append()、val()。  
2.类级别插件开发，即给jQuery添加全局函数，相当于给类本身添加方法，例如：$.ajax();

**jQuery的插件机制**  
jQuery为开发插件提供了两种方法。  
1. jQuery.fn.extend(object)，给jQuery对象添加方法。  
2. jQuery.extend(object)，给jQuery类添加方法。  
这两个方法接收的参数都是一个对象，类型为Object，Object里面的”名/值”分别对应”函数名/函数主体”。

**fn是什么**  
查看jQuery源码：

<span style="font-size:12px;">jQuery.fn = jQuery.prototype = { init: function( selector, context ) { //....　 //...... }; </span>

从源码中查看，可以得出：

jQuery.fn=jQuery.prototype
    //fn指向jQuery对象的原型，即为jQuery类添加成员函数。

这里我写一个简单的例子来实现一个最简单的插件，仅仅是用来说明一下如何使用jQuery开发插件。

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>自定义jQuery插件</title>
    <script src="plugs/jquery-2.2.3.min.js"></script>
    <script> //这是一个自定义的jQuery插件 (function(){ $.fn.extend({ myFirst:function(){ var s="This is my first jQuery"; $(this).append(s); } }); })(jQuery); </script>
    </head>
    
    <body>
    <div id="i1"></div>
    <script> $("#i1").myFirst(); </script>
    </body>
    </html>

执行以后返回的页面为：  
![自定义jQuery插件][jQuery]

以上仅仅介绍如何使用jQuery开发自定义插件，会使用以后就可以开发更复杂的插件了。

[jQuery]: /images/20220718/e116c40180c74de6a39917145bcdc273.png