插件是对具体业务逻辑的一个针对性封装，在代码层面，就是一个函数或者方法，按需调用。jQuery里提供了两种两种类型的插件实现方法。一个是扩展jQuery类方法，一个是扩展jQuery实例方法。下面长沙前端培训班给大家分享：一看就会的jQuery插件实现方法：

jQuery类方法的扩展(jQuery.extend())
类方法是就jQuery自身的方法，如果foo是jQuery自身方法，就可以这样调用$.foo()；实现起来也超级简单的，就跟平常给一个对象添加方法一样：

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实例对象访问的方法，我们知道，按照面向对象对象设计思想，实例访问的方法通常是放到原型对象prototype上的。jQuery提供的用于扩展实例方法的写法是$.fn.extend()，这就意味着有这样一个等式关系成立:

jQuery.prototype === $.fn //true
所以我们只需把扩展的方法写到$.fn.extend()的小括号里即可：

$.fn.extend({
fn1:function(){},
fn2:function(){}
})
//jquery实例对象$("div")访问情况
$("div").fn1();
$("div").fn2();
$("div").fn3(); //报错
对jQuery实例方法的扩展，有一个需要我们注意的地方，就是参数。大家知道，参数的设计分为三种情况，那就是不带参数，必传参数，可选参数。接下来我们以一个高亮显示的例子给大家演示下。

<!-- html结构 -->
<div>高亮显示</div>
不带参数

$.fn.extend({
highLight() {
//让实例对象的背景颜色和文字颜色发生改变
//highLight是一个原型方法，this表示的是实例
this.css({ "background-color": "yellow", color: "red" });
return this;//形成链式调用
},
});
$("div").highLight().width("500px");//黄底红字宽500
必传参数

$.fn.extend({
highLight(bgColor, color) {
this.css({ "background-color": bgColor, color });
return this;
},
});
$("div").highLight("blue", "white").width("500px");//蓝底白字宽500
可选参数，意思就是不传就用默认的，传参就用自定义的，

//多个参数逐一列出
$.fn.extend({
highLight(bgColor = "yellow", color = "red") {
this.css({ "background-color": bgColor, color });
return this;
},
});
$("div").highLight(); //黄底红字
$("div").highLight("blue"); //蓝底红字
$("div").highLight("blue", "white"); //蓝底白字
//一个参数对象
$.fn.extend({
highLight(opts) {
let defaults = { bgColor: "yellow", color: "red" }; //默认值
//取到实际的值 options
let options = $.extend({}, defaults, opts);//将一个或多个源对象复制给目标对象
this.css({
"background-color": options.bgColor,
color: options.color,
});
return this;
},
});
$("div").highLight();//黄底红字
$("div").highLight({ bgColor: "blue"});//蓝底红字
$("div").highLight({ bgColor: "blue", color: "white" });//蓝底白字
       怎么样，是不是超级简单！如果想要更多学习资料欢迎来长沙千锋官网咨询领取。

上一篇

长沙Java培训班怎么学习java项目？

下一篇

长沙前端培训班分享：使用Dplayer实现Vue3中的视频及弹幕播放