jquery插件編寫簡單總結(jié)

jquery插件開發(fā)一般有兩種方法:

創(chuàng)新互聯(lián)建站成立與2013年，先為東鄉(xiāng)族等服務(wù)建站，東鄉(xiāng)族等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為東鄉(xiāng)族企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

1?通過$.extend()來擴展,寫成jQuery.extend()也可以的

2?通過$.fn.extend()來進行擴展,也可以寫成jQuery.fn.extend()

第一種方法，相當于在$身上添加了一個全局函數(shù)，如果和后臺java、c#類比的話，就是相當于在

$或jQuey這個類上添加了一個靜態(tài)的方法(函數(shù))

那怎么寫?

把通過第一種方法擴展的插件寫在這個common.js文件里，然后在index.html頁面去測試

代碼：

非常簡單的一行代碼

然后看index.html頁面調(diào)用

然后看控制臺輸出:

一切都是妥妥的，沒毛病，而且其他頁面如果引用了，都能使用這個方法。

但是如果需要定義多個全局的函數(shù)，通常我們用面向?qū)ο蟮乃枷雭砭帉憽?/p>

例如：

將所有的成員都掛在一個對象上，或者說是放在一個命令空間里。這樣做的好處就是，不用定義太多的外部變量，避免引起沖突。

調(diào)用:

調(diào)用的話就是: $.對象名.成員。

結(jié)果:

當然我們也可以用jQuery提供給我們用于擴展用的行數(shù)extend()

例如:

調(diào)用:

結(jié)果:

前面的這些都屬于第一種方法的范疇，本質(zhì)就是在$上添加全局函數(shù)就可以了。

再看第二種方式$.fn.extend()，這種方式相當于給$的每一個實例對象添加方法(函數(shù))

首先我們要知道fn是個什么鬼，查看jQuery源代碼，會發(fā)現(xiàn)這樣的一行代碼:

說明我們就是在原型上去做的擴展。

例如:

注意:index是對應(yīng)的索引，ele對應(yīng)的是每一個dom元素對象

最后一樣的return是用于支持鏈式調(diào)用的。

調(diào)用:

最后的效果:

如果要擴展多個方法，這個時候就需要這樣寫了

顯然比較麻煩！

還是一樣可以使用jQuery提供給我們的方法(函數(shù))$.fn.extend()

如果要擴展多個就可以這樣寫了

調(diào)用:

能夠鏈式操作。

效果如圖所示:

總結(jié):

jQuey插件編寫的兩種方式:

1 $.extend();???? // 在全局上添加函數(shù) 相當于靜態(tài)方法(類比C#)

2 $.fn.extend();??? // 相當于給jquey對象添加?? 相當于實例方法(類比C#)

再補充一點:

這個外面的this和里面的這個this不是同一個對象

查看其結(jié)果:

注意里面的每一個this對象都是dom對象

文章名稱：jquery插件編寫簡單總結(jié)
新聞來源：http://muchs.cn/article44/jejihe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、自適應(yīng)網(wǎng)站、App設(shè)計、App開發(fā)、響應(yīng)式網(wǎng)站、手機網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)