jQuery 插件開發(fā)指南
那么首先我們來簡單的看一下最正統(tǒng)的 jQuery 插件定義方式:
(function ($) {
$.fn.插件名 = function (settings) {
//默認參數(shù)
var defaultSettings = {
} /* 合并默認參數(shù)和用戶自定義參數(shù) */
settings = $.extend(defaultSettings, settings);
return this.each(function () { //代碼 }); //插件在元素內(nèi)多次出現(xiàn)
} })(jQuery);
先來看模板中的第一行代碼(當然我們要把這一行代碼的后半部分給揪出來一起看,不然第一行就完全無意義了):
(function ($) {
})(jQuery);
這行代碼其實是用于創(chuàng)建一個匿名函數(shù)。如果你對匿名函數(shù)和閉包不了解,將會對這種代碼非常疑惑,那么強烈建議您閱讀【詳談JavaScript 匿名函數(shù)及閉包】這篇文章。
jQuery 的繼承方法 $.extend —— $.extend 在jQuery 插件開發(fā)中有個很重要的作用,就是用于合并參數(shù)。
$.fn.tip = function (settings) {
var defaultSettings = {
//顏色
color: 'yellow',
//延遲
timeout: 200 }
/* 合并默認參數(shù)和用戶自定義參數(shù) */
settings = $.extend(defaultSettings, settings);
alert(settings.input); <br>}
jQuery 插件定義第二種方式:
(function ($) {
//插件定義--更換名字
$.fn.tabpanel = function (method) {
var methods = $.fn.tabpanel.methods;
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
}
}
//支持的方法
$.fn.tabpanel.methods =
{
//初始化
init: function (p_options) {
tabpanelBind(p_options, this);
},
add: function (p_options) {
addTab(p_options, this);
tabpanelBind(p_options, this);
// debugger
} }
function add(p_options) {
var _defaults = {
id: ""
}
<br> //內(nèi)部實現(xiàn)略.........<br> return _index;
}
<br>})(jQuery);<br><br>調(diào)用 $("#team").tabpanel('add',"");
好了,上面介紹的這2種開發(fā)方式都是最常用的,小伙伴們先好好學習下吧,后續(xù)我們再介紹的更深入些
相關文章
jQuery Trim去除字符串首尾空字符的實現(xiàn)方法說明
本篇文章主要是對jQuery Trim去除字符串首尾空字符的實現(xiàn)方法進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02
JQuery判斷正整數(shù)整理小結(jié)(jQuery 文本框中只能輸入正整數(shù))
這篇文章主要介紹了JQuery判斷正整數(shù),附上詳細的代碼供大家查看具體的方法,需要的朋友可以參考下2017-08-08
jQuery實現(xiàn)table隔行換色和鼠標經(jīng)過變色的兩種方法
這篇文章主要介紹jQuery實現(xiàn)table隔行換色和鼠標經(jīng)過變色的兩種方法,需要的朋友可以參考下2014-06-06
jquery判斷復選框選中狀態(tài)以及區(qū)分attr和prop
這篇文章主要介紹了jquery判斷復選框選中狀態(tài)以及區(qū)分attr和prop,感興趣的小伙伴們可以參考一下2015-12-12

