根據(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)用
第二種:
基本方法
先看一下它的基本格式:
$.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ù)唬涧。