jquery插件

根據(jù)《jQuery高級編程》的描述缓苛,jQuery插件開發(fā)方式主要有三種:

通過$.extend()來擴展jQuery
通過$.fn 向jQuery添加新的方法
通過$.widget()應用jQuery UI的部件工廠方式創(chuàng)建

第一種方法:
$.extend({
log: function(message) {
var now = new Date(),
y = now.getFullYear(),
m = now.getMonth() + 1, //墙牌!JavaScript中月分是從0開始的
d = now.getDate(),
h = now.getHours(),
min = now.getMinutes(),
s = now.getSeconds(),
time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
console.log(time + ' My App: ' + message);
}
})
$.log('initializing...'); //調(diào)用

image.png

第二種:
基本方法
先看一下它的基本格式:

$.fn.pluginName = function() {
//your code goes here
}
基本上就是往$.fn上面添加一個方法,名字是我們的插件名稱。然后我們的插件代碼在這個方法里面展開熊昌。

比如我們將頁面上所有鏈接顏色轉(zhuǎn)成紅色女淑,則可以這樣寫這個插件:

$.fn.myPlugin = function() {
//在這里面,this指的是用jQuery選中的元素
//example :$('a'),則this=$('a')
this.css('color', 'red');
}
html代碼:
<ul>
<li>
<a >我的微博</a>
</li>
<li>
<a href="http://http://www.cnblogs.com/Wayou/">我的博客</a>
</li>
<li>
<a >我的小站</a>
</li>
</ul>
<p>這是p標簽不是a標簽,我不會受影響</p>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.myplugin.js"></script>
<script type="text/javascript">
$(function(){
$('a').myPlugin();//a元素的集合
})
</script>
下面進一步,在插件代碼里處理每個具體的元素伍派,而不是對一個集合進行處理江耀,這樣我們就可以針對每個元素進行相應操作。

我們已經(jīng)知道this指代jQuery選擇器返回的集合诉植,那么通過調(diào)用jQuery的.each()方法就可以處理合集中的每個元素了祥国,但此刻要注意的是,在each方法內(nèi)部倍踪,this指帶的是普通的DOM元素了系宫,如果需要調(diào)用jQuery的方法那就需要用$來重新包裝一下。

比如現(xiàn)在我們要在每個鏈接顯示鏈接的真實地址建车,首先通過each遍歷所有a標簽扩借,然后獲取href屬性的值再加到鏈接文本后面。

更改后我們的插件代碼為:
$.fn.myPlugin = function() {
//在這里面,this指的是用jQuery選中的元素
this.css('color', 'red');//這里的this是代表的是jq選中的元素缤至,表示的是一個集合
this.each(function() {
//對每個元素進行操作
$(this).append(' ' + $(this).attr('href'));//這里的this代表的是普通的DOM元素潮罪,所欲這里要把DOM元素轉(zhuǎn)化為jq對象。$(this)就是jq對象了领斥。
}))
}

這里要穿插進一個術(shù)語:鏈式調(diào)用
我們知道jq有一個非常好的特性就是鏈式調(diào)用嫉到,也就是我們通常在jquery代碼中常用到的類似于這樣:$('#div').css('background','#ccc').removeClass('box').stop().animate({width:300})。也就是通過.鏈接起來的可以直接調(diào)用其它的方法月洛。這樣的就可以稱為鏈式調(diào)用何恶。
其實鏈式調(diào)用主要是通過return this 實現(xiàn)的。
上面的為了不打破鏈式調(diào)用嚼黔,只需要return $(this).append(' ' + $(this).attr('href')).css('color', 'red');

讓插件接收參數(shù)
一個強勁的插件是可以讓使用者隨意定制的细层,這要求我們提供在編寫插件時就要考慮得全面些,盡量提供合適的參數(shù)唬涧。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末疫赎,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子碎节,更是在濱河造成了極大的恐慌捧搞,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件狮荔,死亡現(xiàn)場離奇詭異胎撇,居然都是意外死亡,警方通過查閱死者的電腦和手機殖氏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進店門创坞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人受葛,你說我怎么就攤上這事题涨≠怂” “怎么了?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵纲堵,是天一觀的道長巡雨。 經(jīng)常有香客問我,道長席函,這世上最難降的妖魔是什么铐望? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮茂附,結(jié)果婚禮上正蛙,老公的妹妹穿的比我還像新娘。我一直安慰自己营曼,他們只是感情好乒验,可當我...
    茶點故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蒂阱,像睡著了一般锻全。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上录煤,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天鳄厌,我揣著相機與錄音,去河邊找鬼妈踊。 笑死了嚎,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的廊营。 我是一名探鬼主播歪泳,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼赘风!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起纵刘,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤邀窃,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后假哎,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瞬捕,經(jīng)...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年舵抹,在試婚紗的時候發(fā)現(xiàn)自己被綠了肪虎。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,015評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡惧蛹,死狀恐怖扇救,靈堂內(nèi)的尸體忽然破棺而出刑枝,到底是詐尸還是另有隱情,我是刑警寧澤迅腔,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布装畅,位于F島的核電站,受9級特大地震影響沧烈,放射性物質(zhì)發(fā)生泄漏掠兄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一锌雀、第九天 我趴在偏房一處隱蔽的房頂上張望蚂夕。 院中可真熱鬧,春花似錦腋逆、人聲如沸婿牍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽牍汹。三九已至,卻和暖如春柬泽,著一層夾襖步出監(jiān)牢的瞬間慎菲,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工锨并, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留露该,地道東北人。 一個月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓第煮,卻偏偏與公主長得像解幼,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子包警,可洞房花燭夜當晚...
    茶點故事閱讀 44,969評論 2 355

推薦閱讀更多精彩內(nèi)容