jQuery 插件開發(fā)指南
那么首先我們來簡單的看一下最正統(tǒng)的 jQuery 插件定義方式:
(function ($) {
$.fn.插件名 = function (settings) {
//默認(rèn)參數(shù)
var defaultSettings = {
} /* 合并默認(rèn)參數(shù)和用戶自定義參數(shù) */
settings = $.extend(defaultSettings, settings);
return this.each(function () { //代碼 }); //插件在元素內(nèi)多次出現(xiàn)
} })(jQuery);
先來看模板中的第一行代碼(當(dāng)然我們要把這一行代碼的后半部分給揪出來一起看,不然第一行就完全無意義了):
(function ($) {
})(jQuery);
這行代碼其實(shí)是用于創(chuàng)建一個(gè)匿名函數(shù)。如果你對(duì)匿名函數(shù)和閉包不了解,將會(huì)對(duì)這種代碼非常疑惑,那么強(qiáng)烈建議您閱讀【詳談JavaScript 匿名函數(shù)及閉包】這篇文章。
jQuery 的繼承方法 $.extend —— $.extend 在jQuery 插件開發(fā)中有個(gè)很重要的作用,就是用于合并參數(shù)。
$.fn.tip = function (settings) {
var defaultSettings = {
//顏色
color: 'yellow',
//延遲
timeout: 200 }
/* 合并默認(rèn)參數(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)部實(shí)現(xiàn)略.........<br> return _index;
}
<br>})(jQuery);<br><br>調(diào)用 $("#team").tabpanel('add',"");
好了,上面介紹的這2種開發(fā)方式都是最常用的,小伙伴們先好好學(xué)習(xí)下吧,后續(xù)我們再介紹的更深入些
相關(guān)文章
jQuery使用之標(biāo)記元素屬性用法實(shí)例
這篇文章主要介紹了jQuery使用之標(biāo)記元素屬性用法,實(shí)例分析了jQuery如何控制頁面,包含元素的屬性、css樣式風(fēng)格、DOM模型、表單元素和事件處理等使用技巧,需要的朋友可以參考下2015-01-01jQuery Trim去除字符串首尾空字符的實(shí)現(xiàn)方法說明
本篇文章主要是對(duì)jQuery Trim去除字符串首尾空字符的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02JQuery判斷正整數(shù)整理小結(jié)(jQuery 文本框中只能輸入正整數(shù))
這篇文章主要介紹了JQuery判斷正整數(shù),附上詳細(xì)的代碼供大家查看具體的方法,需要的朋友可以參考下2017-08-08使用jQuery簡單實(shí)現(xiàn)模擬瀏覽器搜索功能
這篇文章主要介紹了使用jQuery簡單實(shí)現(xiàn)模擬瀏覽器搜索功能,需要的朋友可以參考下2014-12-12JQuery動(dòng)畫animate的stop方法使用詳解
這篇文章主要介紹了JQuery動(dòng)畫animate的stop方法使用,需要的朋友可以參考下2014-05-05jQuery實(shí)現(xiàn)table隔行換色和鼠標(biāo)經(jīng)過變色的兩種方法
這篇文章主要介紹jQuery實(shí)現(xiàn)table隔行換色和鼠標(biāo)經(jīng)過變色的兩種方法,需要的朋友可以參考下2014-06-06jquery判斷復(fù)選框選中狀態(tài)以及區(qū)分attr和prop
這篇文章主要介紹了jquery判斷復(fù)選框選中狀態(tài)以及區(qū)分attr和prop,感興趣的小伙伴們可以參考一下2015-12-12