插件是對具體業(yè)務(wù)邏輯的一個針對性封裝，在代碼層面，就是一個函數(shù)或者方法，按需調(diào)用。jQuery里提供了兩種兩種類型的插件實現(xiàn)方法。一個是擴展jQuery類方法，一個是擴展jQuery實例方法。下面長沙前端培訓(xùn)班給大家分享：一看就會的jQuery插件實現(xiàn)方法：

jQuery類方法的擴展(jQuery.extend())
類方法是就jQuery自身的方法，如果foo是jQuery自身方法，就可以這樣調(diào)用$.foo()；實現(xiàn)起來也超級簡單的，就跟平常給一個對象添加方法一樣：

jQuery.foo = function(){
console.log("我是jQuery類方法foo");
}
jQuery.foo();
在jQuery里，專門提供了用于擴展類方法的寫法jQuery.extend()，可以一次擴展多個方法，用法如下：

$.extend({
fn1: function () {},
fn2: function () {},
});
$.fn1();
$.fn2();
$.fn3(); //報錯
jQuery實例方法的擴展(jQuery.fn.extend())
實例方法就是jQuery實例對象訪問的方法，我們知道，按照面向?qū)ο髮ο笤O(shè)計思想，實例訪問的方法通常是放到原型對象prototype上的。jQuery提供的用于擴展實例方法的寫法是$.fn.extend()，這就意味著有這樣一個等式關(guān)系成立:

jQuery.prototype === $.fn //true
所以我們只需把擴展的方法寫到$.fn.extend()的小括號里即可：

$.fn.extend({
fn1:function(){},
fn2:function(){}
})
//jquery實例對象$("div")訪問情況
$("div").fn1();
$("div").fn2();
$("div").fn3(); //報錯
對jQuery實例方法的擴展，有一個需要我們注意的地方，就是參數(shù)。大家知道，參數(shù)的設(shè)計分為三種情況，那就是不帶參數(shù)，必傳參數(shù)，可選參數(shù)。接下來我們以一個高亮顯示的例子給大家演示下。

<!-- html結(jié)構(gòu) -->
<div>高亮顯示</div>
不帶參數(shù)

$.fn.extend({
highLight() {
//讓實例對象的背景顏色和文字顏色發(fā)生改變
//highLight是一個原型方法，this表示的是實例
this.css({ "background-color": "yellow", color: "red" });
return this;//形成鏈?zhǔn)秸{(diào)用
},
});
$("div").highLight().width("500px");//黃底紅字寬500
必傳參數(shù)

$.fn.extend({
highLight(bgColor, color) {
this.css({ "background-color": bgColor, color });
return this;
},
});
$("div").highLight("blue", "white").width("500px");//藍底白字寬500
可選參數(shù)，意思就是不傳就用默認(rèn)的，傳參就用自定義的，

//多個參數(shù)逐一列出
$.fn.extend({
highLight(bgColor = "yellow", color = "red") {
this.css({ "background-color": bgColor, color });
return this;
},
});
$("div").highLight(); //黃底紅字
$("div").highLight("blue"); //藍底紅字
$("div").highLight("blue", "white"); //藍底白字
//一個參數(shù)對象
$.fn.extend({
highLight(opts) {
let defaults = { bgColor: "yellow", color: "red" }; //默認(rèn)值
//取到實際的值 options
let options = $.extend({}, defaults, opts);//將一個或多個源對象復(fù)制給目標(biāo)對象
this.css({
"background-color": options.bgColor,
color: options.color,
});
return this;
},
});
$("div").highLight();//黃底紅字
$("div").highLight({ bgColor: "blue"});//藍底紅字
$("div").highLight({ bgColor: "blue", color: "white" });//藍底白字
       怎么樣，是不是超級簡單！如果想要更多學(xué)習(xí)資料歡迎來長沙千鋒官網(wǎng)咨詢領(lǐng)取。

上一篇

長沙Java培訓(xùn)班怎么學(xué)習(xí)java項目？

下一篇

長沙前端培訓(xùn)班分享：使用Dplayer實現(xiàn)Vue3中的視頻及彈幕播放