博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深入学习jQuery自定义插件
阅读量:6086 次
发布时间:2019-06-20

本文共 2302 字,大约阅读时间需要 7 分钟。

原文地址:

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,可以参考这篇文章:

那么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可以参考这篇文章:

以上还参考:

2、实例分析,定义一个带参数的插件。

一般我们都会在很多地方看到,不要js污染全局环境,其实也对,要不然你定义一个变量,在你引用别人的插件中也定义了,那就冲突了,这就涉及到了js作用域的问题,我们得“封装”作用域,于是我们知道一个函数的作用域仅仅在一个函数中,但函数执行完毕,变量也就会被注销。

于是这里我们得用到立即执行函数,用一个函数将我们定义的插件代码包裹起来,这样就形成了一个局部的作用域,从而不会影响到全局的环境,关于立即执行函数,可以参考这篇:

那么,我们的写法将是:

(function($){ $.fn.extend({ 函数 : function(options){ } }); })(jQuery);

  

我想自定义一个弹出层插件,可以设置背景颜色,宽和高,不设置即为默认的。

首先,在html元素中,我想设置按钮点击,

其实这里的div.dialog是可以动态创建的,在这里就没有。动态创建可参考:

$('body').append($('
').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($('
').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的区别,可以参考:,但我还是不清楚这里用this和$(this)为什么是一样的?

最后调用初始化就可以了。

$('#dialog').click(function(){$('.dialog').dialog({background:'red',width:500,height:100});});

  

效果可以查看代码演示,上面的疑问希望给出解释。

以上还参考:

 

转载于:https://www.cnblogs.com/jhmydear/p/4615667.html

你可能感兴趣的文章
POJ 2110 二分+暴搜
查看>>
线程锁Lock
查看>>
SpringMvc 文件上传后台处理
查看>>
WEB框架Django之Form组件
查看>>
spring cloud学习(一) 服务注册
查看>>
Java多线程
查看>>
洛谷P3296 刺客信条
查看>>
vue-cli2 和vue-cli3
查看>>
python 清空list的几种方法
查看>>
2.03 按子串排序
查看>>
gridview单元格合并解决方法
查看>>
Android深入浅出系列之服务机制—1.Android中的Service
查看>>
Android深入浅出系列之Android开发环境搭建—配置Eclipse(五)
查看>>
设计模式漫谈之中介者模式
查看>>
ubuntu18.04 and Linux mint 19安装virtualbox
查看>>
ElasticSeaarch 遇到的问题 (-)
查看>>
CMD中文乱码之另解决方案
查看>>
内存对齐
查看>>
工作周记 - 第六周 (2016/06/27 - 2016/07/01)
查看>>
我们为何要使用多线程,它有什么优点?
查看>>