jQuery是当今使用最广泛的js插件之一
jQuery之所以是使用率最高的第三方库的原因就在于,jQuery 允许我们对其 扩展额外的功能,也就是说我们可以自定义编写插件
那么什么是jQuery插件
简单的说,就是给jQuery 扩展 新方法
自定义插件的实现
jQuery自定义插件 方要有两种方式:
1.通过 $.extend() 来扩展 jQuery,添加 的都是静态方法
2.通过 $.fn() 来扩展 jQuery ,重点要掌握这个
//$.extenc() 等价于 jQuery.extend()
//利用$.extend() 扩展的方法,都用$ 或者 jQuery直接调用
//扩展一个打印方法
$.extend({
staticPrint : function( message ){
console.log(message);
}
});
//使用 已经扩展好的方法
$.staticPrint(" 今晚 打考虑!");
//$.fn 等价于 jQeury.fn
/*
重点
$.fn 等价于 jQuery.prototype
$.fn 相当于 jQuery的构造函数的 prototype 属性 添加 了一个方法,也就是 ,所有jQuery对象 都可以通过 $.fn扩展方法
*/
//基本语法
$.fn.myPlugin = function(){
console.log("我的插件!");
}
//只能用jQuery 调用
$("body").myPlugin();
/*
注意:以上那种写法不好,以后写插件,要采用以下方法
$ window document 是分别传进来的jQuery对象 window对象 document对象
这样写的好处:可以加快 代码的执行速度
分号; 是防止 将来代码压缩 或者 和防止 插件没有正确 结尾导致的一些问题
*/
;( function( $ , window , document ){
//开始写插件
$.fn.print = function( message ){
//this就是当前对象,也就是所选元素,因为我们会通过 选择器获取 相应的元素后 (jQuery对象),再调用 扩展的print方法,原理来构造函数 添加 原型方法 一模一样
console.log($(this).html() "---" + message);
console.log("开始,写插件!");
//如果想要支持 链式语法的话,那么 得返回 当前对象 , 也就是 当前所选的元素
return this;
}
}( jQuery , window, document);
//使用
$("p").print("参数");
$("p").print("参数").html("更改内容");
