如何創(chuàng)建一個jQuery插件
為什么要創(chuàng)建jQuery插件 ？ 因為這樣代碼可以復(fù)用。我們有這樣一個頁面，頁面上面有如下的文字(看源碼)，我們想要的效果是，當鼠標移到鏈接的時候，用一個浮動的div來顯示a標簽的title內(nèi)容.

這是通過js來完成的。假設(shè)有一個方法tooltip(), 你只需要調(diào)用這個方法就能達成你的愿望，就像這樣：

$('a.tooltip').tooltip({ ?rounded: true ?}); ?

假設(shè)我們把插件命名為tooltip，則需要定義一個jQuery.tooltip.js文件。這樣命名只是為了說明這是jQuery的插件，實際上你可以隨便命名這個文件名。下面來開始寫我們的插件：

(function($){?# ? ...code?})(jQuery);

插件的代碼必須包含在這個格式里。這里要注意，要確保你沒有使用別的js庫，否則這個美元符$，會發(fā)生沖突，如果要避免產(chǎn)生這種沖突，你最好在插件里都使用jQuery字符來代替美元符。
我們首先來定義插件函數(shù)：

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


然后設(shè)置默認的參數(shù)：

var ?defaults = {?background : '#e3e3e3',?color : 'black',?rounded: false?},

然后再用setting變量來接收用戶自定義的參數(shù)，使用extend方法來merge這些參數(shù)。

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


現(xiàn)在要開始寫方法了，用戶如果使用這個插件的時候，傳入的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);?


總結(jié)：
1. 這里有個小技巧，假如要定義多個變量：var a = {};var b = {};var c = {};可以這么寫：vara = {},b = {},c = {};

2.插件代碼里，循環(huán)內(nèi)的this, 循環(huán)外的this，循環(huán)內(nèi)的$(this)的關(guān)系， 實際上是jQuery對象和dom對象的關(guān)系。
頁面上調(diào)用插件方法，插件方法內(nèi)部的each外的this，則是jQuery對象，這個對象是個集合對象，也就是$('a.tooltip')這個對象，頁面上共有2個class為tooltip的a標簽。
jquery對象的$方法，返回的是jquery集合對象，里面的元素，如果你用get方法去調(diào)用得到的是dom，你用eq方法調(diào)用得到的是jquery對象，比如：$('a').eq(0)得到的是jquery對象$('a').get(0)得到的是dom對象，直接$('a')[0]得到的是dom對象，而jquery的each方法，我認為是迭代的是dom對象，而不是jquery對象，所以在each里面this是dom對象，而需要$(this)來得到j(luò)query對象來進行操作 。把這個關(guān)系搞清楚就行了。?

轉(zhuǎn)載于:https://blog.51cto.com/blackanger/132338

總結(jié)

以上是生活随笔為你收集整理的你还不会创建jQuery插件 ？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。