您还不会创建jQuery插件 _Web前端

你还不会创建jQuery插件？

如何创建一个jQuery插件

为什么要创建jQuery插件？因为这样代码可以复用。

我们有这样一个页面，页面上面有如下的文字(看源码)，我们想要的效果是，当鼠标移到链接的时候，用一个浮动的div来显示a标签的title内容.

这是通过js来完成的。假设有一个方法tooltip(), 你只需要调用这个方法就能达成你的愿望，就像这样：

?? ? $('a.tooltip').tooltip({ ?

?? ? ? ? rounded: true ?

?? ? }); ?

假设我们把插件命名为tooltip，则需要定义一个jQuery.tooltip.js文件。这样命名只是为了说明这是jQuery的插件，实际上你可以随便命名这个文件名。下面来开始写我们的插件：

(function($){?

??# ? ...code?

})(jQuery);

插件的代码必须包含在这个格式里。这里要注意，要确保你没有使用别的js库，否则这个美元符$，会发生冲突，如果要避免产生这种冲突，你最好在插件里都使用jQuery字符来代替美元符。

我们首先来定义插件函数：

$.fn.tooltip = function(options) {

?? ? ...

}

然后设置默认的参数：

?? var ?

?? ? ?defaults = {?

?? ? ? ? ?background : '#e3e3e3',?

?? ? ? ? ?color : 'black',?

?? ? ? ? ?rounded: false?

?? ? },

然后再用setting变量来接收用户自定义的参数，使用extend方法来merge这些参数。

settings = $.extend({}, defaults, options);

现在要开始写方法了，用户如果使用这个插件的时候，传入的jquery dom对象可能不只是一个元素，我们需要给每个class为tooltip的a标签都绑定好这个事件，那么就需要迭代了，这里jquery提供了each方法：

?? ?this.each(function() {?

?? ? ? ? ?var $this = $(this);?

?? ? ? ? ?var title = this.title;?

?? ? ? ? ?... ...

?? ?}

这里为什么要用$this呢？这是为了提醒自己，正在和jQuery对象打交道。

然后写鼠标事件等等，来看最后的代码：

(function($){?

?? $.fn.tooltip = function(options) {?

?? ? ? ?

?? ? ? var?

?? ? ? ? defaults = {?

?? ? ? ? ? background: '#e3e3e3',?

?? ? ? ? ? color: 'black',?

?? ? ? ? ? rounded: false?

?? ? ? ? },?

?? ? ? ? ? settings = $.extend({}, defaults, options);?

?? ? ? ? ? ?

?? ? ? ? ? this.each(function() {?

?? ? ? ? ? ? var $this = $(this);?

?? ? ? ? ? ? var title = this.title;?

?? ? ? ? ? ? ?

?? ? ? ? ? ? if($this.is('a') && $this.attr('title') != '') {?

?? ? ? ? ? ? ? ? this.title = '';?

?? ? ? ? ? ? ? ? $this.hover(function(e) {?

?? ? ? ? ? ? ? ? ? ? // mouse over?

?? ? ? ? ? ? ? ? ? ? $('

')?

?? ? ? ? ? ? ? ? ? ? ? .appendTo('body')?

?? ? ? ? ? ? ? ? ? ? ? .text(title)?

?? ? ? ? ? ? ? ? ? ? ? .hide()?

?? ? ? ? ? ? ? ? ? ? ? .css({?

?? ? ? ? ? ? ? ? ? ? ? ? backgroundColor: settings.background,?

?? ? ? ? ? ? ? ? ? ? ? ? color: settings.color,?

?? ? ? ? ? ? ? ? ? ? ? ? top: e.pageY + 10,?

?? ? ? ? ? ? ? ? ? ? ? ? left: e.pageX + 20?

?? ? ? ? ? ? ? ? ? ? ? })?

?? ? ? ? ? ? ? ? ? ? ? .fadeIn(350);?

?? ? ? ? ? ? ? ? ? ? ? ?

?? ? ? ? ? ? ? ? ? if(settings.rounded) {?

?? ? ? ? ? ? ? ? ? ? $('#tooltip').addClass('rounded');?

?? ? ? ? ? ? ? ? ? }?

?? ? ? ? ? ? ? ? }, function() {?

?? ? ? ? ? ? ? ? ? ? // mouse out?

?? ? ? ? ? ? ? ? ? ? $('#tooltip').remove();?

?? ? ? ? ? ? ? ? }); ?

?? ? ? ? ? ? }?

?? ? ? ? ? ? ?

?? ? ? ? ? ? $this.mousemove(function(e) {?

?? ? ? ? ? ? ? ? $('#tooltip').css({?

?? ? ? ? ? ? ? ? ? ? top: e.pageY + 10,?

?? ? ? ? ? ? ? ? ? ? left: e.pageX + 20?

?? ? ? ? ? ? ? ? ?});?

?? ? ? ? ? ? });?

?? ? ? ? ? });?

?? ? ? ? ? // returns the jQuery object to allow for chainability.?

?? ? ? ? ? return this;?

?? ? }?

?})(jQuery);?

总结：

1. 这里有个小技巧，假如要定义多个变量：

var a = {};

var b = {};

var c = {};

可以这么写：

var

a = {},

b = {},

c = {};

2.插件代码里，循环内的this, 循环外的this，循环内的$(this)的关系，实际上是jQuery对象和dom对象的关系。

页面上调用插件方法，插件方法内部的each外的this，则是jQuery对象，这个对象是个集合对象，也就是$('a.tooltip')这个对象，页面上共有2个class为tooltip的a标签。

jquery对象的$方法，返回的是jquery集合对象，里面的元素，如果你用get方法去调用得到的是dom，你用eq方法调用得到的是jquery对象，比如：

$('a').eq(0)得到的是jquery对象

$('a').get(0)得到的是dom对象，

直接$('a')[0]得到的是dom对象，

而jquery的each方法，我认为是迭代的是dom对象，而不是jquery对象，所以在each里面this是dom对象，而需要$(this)来得到jquery对象来进行操作。把这个关系搞清楚就行了。?

本文出自 “{ :Alex Space => " Ruby Notes " }” 博客，请务必保留此出处http://blackanger.blog.51cto.com/140924/132338

本文出自 51CTO.COM技术博客