jQuery是當(dāng)今使用最廣泛的js插件之一
jQuery之所以是使用率最高的第三方庫(kù)的原因就在于,jQuery 允許我們對(duì)其 擴(kuò)展額外的功能,也就是說(shuō)我們可以自定義編寫(xiě)插件
那么什么是jQuery插件
簡(jiǎn)單的說(shuō),就是給jQuery 擴(kuò)展 新方法
自定義插件的實(shí)現(xiàn)
jQuery自定義插件 方要有兩種方式:
1.通過(guò) $.extend() 來(lái)擴(kuò)展 jQuery,添加 的都是靜態(tài)方法
2.通過(guò) $.fn() 來(lái)擴(kuò)展 jQuery ,重點(diǎn)要掌握這個(gè)
//$.extenc() 等價(jià)于 jQuery.extend()
//利用$.extend() 擴(kuò)展的方法,都用$ 或者 jQuery直接調(diào)用
//擴(kuò)展一個(gè)打印方法
$.extend({
? ? staticPrint : function( message ){
? ? ? ? ? ? ?console.log(message);
? ? }
});
//使用 已經(jīng)擴(kuò)展好的方法
$.staticPrint(" 今晚 打考慮!");
//$.fn ?等價(jià)于 jQeury.fn
/*
? ? ? 重點(diǎn)
? ? ? ? ?$.fn 等價(jià)于 jQuery.prototype
? ? ? ? $.fn 相當(dāng)于 jQuery的構(gòu)造函數(shù)的 ?prototype 屬性 添加 了一個(gè)方法,也就是 ,所有jQuery對(duì)象 都可以通過(guò) $.fn擴(kuò)展方法
*/
//基本語(yǔ)法
$.fn.myPlugin = function(){
? ? ? ? ? console.log("我的插件!");
}
//只能用jQuery 調(diào)用?
$("body").myPlugin();
/*
注意:以上那種寫(xiě)法不好,以后寫(xiě)插件,要采用以下方法
$ ? ? ? ? ?window ? ? ? ?document ?是分別傳進(jìn)來(lái)的jQuery對(duì)象 ?window對(duì)象 ?document對(duì)象
這樣寫(xiě)的好處:可以加快 代碼的執(zhí)行速度
分號(hào); ?是防止 將來(lái)代碼壓縮 或者 ?和防止 插件沒(méi)有正確 結(jié)尾導(dǎo)致的一些問(wèn)題
*/
;( function( $ , window , document ){
//開(kāi)始寫(xiě)插件
$.fn.print = function( message ){
//this就是當(dāng)前對(duì)象,也就是所選元素,因?yàn)槲覀儠?huì)通過(guò) ?選擇器獲取 相應(yīng)的元素后 (jQuery對(duì)象),再調(diào)用 擴(kuò)展的print方法,原理來(lái)構(gòu)造函數(shù) 添加 原型方法 一模一樣
? ? ? ? ? ? ?console.log($(this).html() ?"---" + message);
? ? ? ? ? ? console.log("開(kāi)始,寫(xiě)插件!");
? ? ? ? ? //如果想要支持 鏈?zhǔn)秸Z(yǔ)法的話,那么 得返回 當(dāng)前對(duì)象 , 也就是 當(dāng)前所選的元素
? ? ? ? ? return this;
}
}( jQuery , window, document);
//使用
$("p").print("參數(shù)");
$("p").print("參數(shù)").html("更改內(nèi)容");
