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

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

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

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

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

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

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

$.fn.extend({
highLight() {
//讓實(shí)例對(duì)象的背景顏色和文字顏色發(fā)生改變
//highLight是一個(gè)原型方法，this表示的是實(shí)例
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");//藍(lán)底白字寬500
可選參數(shù)，意思就是不傳就用默認(rèn)的，傳參就用自定義的，

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

上一篇

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

下一篇

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