深入学习jQuery自定义插件
原文地址： jQuery自定义插件学习
1、定义插件的方法
对象级别的插件扩展 ，即为jQuery类的实例增加方法，
调用：$(选择器).函数名(参数); $(‘#id’).myPlugin(options);
定义的方式：
$.fn.extend({ "函数名":function(自定义参数){ //这里写插件代码 } }); //或者是 $.fn.函数名 = function(options){ //这里写插件代码 } 类级别的方法 ，就是扩展jQuery类本身的方法，为它增加新的方法，
调用：$.函数名(arguments); $.add(3,4);
$.extend({ "函数名":function(自定义参数){ //这里写插件代码 } }); //或者是 $.函数名=function(自定义参数){ //这里写插件代码 } 你会发现他们的区别仅仅是少了一个fn而已，而jQuery.fn = jQuery.prototype，Javascript中对象的prototype属性的解释是：返回对象类型原型的引用。
如果A.prototype = new B();就相当于A.prototype是B的实例，A可以使用B中的所有方法。
那么在我们这里，不就正是扩展了对象的方法么，使对象能够使用我们所定义的方法。
关于prototype，可以参考这篇文章：JS中的prototype
那么extend又是什么意思呢？在我们这里extend就只有一个参数，
"函数名:function(自定义参数){ //这里写插件代码 } 此时，我们的这个函数就被合并到jquery的全局对象中去，就相当于扩展了jQuery类的方法。
因为，extend是有多个参数的，extend的所用就是合并参数到一个新的参数中，例如
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}); //结果就是 result={name:"Jerry",age:21,sex:"Boy"} 关于extend可以参考这篇文章： jQuery.extend 函数详解
以上还参考： jquery的extend和fn.extend
2、实例分析，定义一个带参数的插件。
一般我们都会在很多地方看到，不要js污染全局环境，其实也对，要不然你定义一个变量，在你引用别人的插件中也定义了，那就冲突了，这就涉及到了js作用域的问题，我们得“封装”作用域，于是我们知道一个函数的作用域仅仅在一个函数中，但函数执行完毕，变量也就会被注销。
于是这里我们得用到立即执行函数，用一个函数将我们定义的插件代码包裹起来，这样就形成了一个局部的作用域，从而不会影响到全局的环境，关于立即执行函数，可以参考这篇： js中(function(){…})()立即执行函数写法理解
那么，我们的写法将是：
(function($){ $.fn.extend({ 函数 : function(options){ } }); })(jQuery); 我想自定义一个弹出层插件，可以设置背景颜色，宽和高，不设置即为默认的。
首先，在html元素中，我想设置按钮点击，
<a id="dialog">点击弹出层</a> <div class="dialog"></div>
其实这里的div.dialog是可以动态创建的，在这里就没有。动态创建可参考： jQuery – 添加元素
$('body').append($('<div></div>').addClass('dialog'));//后面有疑问 css样式当然最初是隐藏的
.dialog{ width:300px; height: 200px; background:green; position: absolute; left:50%;top:30%; margin-left: -150px; display: none; } 最后就是定义插件的js
(function($){ $.fn.extend({ dialog : function(options){ //$('body').append($('<div></div>').addClass('dialog')); //此处有疑问，我如果在这里动态创建元素后，为什么要点击2次才能看到效果？不理解，求告知。 var setting = $.extend({}, {background:'green', width:300, height:200}, options); return this.css({'width':setting.width, 'height':setting.height, 'background':setting.background}).show('slow'); } }); })(jQuery); 这里的return this的作用是使我们定义的插件方法可以链式调用，也就是维护链接性。
插件内部的this指向的是jQuery对象，而非普通的DOM对象。因为DOM对象是没有css()方法的，这是jQuery对象的方法，那么，jQuery对象的写法不应该是$(this)吗？在这里我们把this换成$(this)一样可以用，关于$(this)和this的区别，可以参考： jQuery中this与$(this)的区别 ，但我还是不清楚这里用this和$(this)为什么是一样的？
最后调用初始化就可以了。
$('#dialog').click(function(){ $('.dialog').dialog({ background:'red', width:500, height:100 }); }); 效果可以查看代码演示，上面的疑问希望给出解释。
以上还参考： 创建一个自定义 jQuery 插件
jQuery自定义插件
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
