jQuery之多库共存、插件机制

多库共存

---

背景

我们在调用jQuery库时，可能会调用不同的版本，这就会产生一个问题——获取对象问题，这就是多库共存问题

解决方法——改名字

在jQuery中，我们获取DOM对象时，使用的是$和jQuery，程序默认的是两种都可以调用对象，而且使用这两种的版本是最新的版本，如果一个旧版本想要获取对象时则要分得其中一种方式，所以最新的版本需要放弃两者中的一个

获取jQuery版本编号：$.fn.jquery
放弃符号的使用权：$.noConflict()
用新的符号代替旧的符号，本质上还是用新的符号：
var sb=$.noConflict(true);
sb.fn.jquery 其获取的版本还是旧版本

---

jQuery插件机制

---

友情提示：插件尽量使用别人的已写好的，技术不够，复制来凑

插件

引用步骤：

1. 引包
2. 通过调用方法实现功能，参数不同，功能也不同

例一：懒加载

功能是只有你刷新到页面的固定位置，该位置下的内容才会加载，极大的省去了一些资源消耗
步骤是

1. 引入懒加载的包
2. 调用方法：$(selector).lazyload();

例二：背景变色

在我们利用jQuery作动画时，我们只能改变透明度、长宽、显示，无法改变背景颜色，此插件就可解决这个问题
步骤：

1. 引包
2. 调用：$(selector).css("backgroundColor","red") 此可以用于自定义动画

推荐插件下载地址：jQuery插件下载

自定义插件（方法集）（js类型）

格式：

1. $.fn.setColor=function(){
$.css();
}
----绑定到原型

2. $.setColor=function(e){
e.css();
}
----绑定到$上

调用方式

• 绑定到原型

  $("button").on("click",function()
{
$(this).setColor();
}

• 绑定到$上

  $("button").on("click",function()
{
$.setColor($(this));
}