jQuery插件的作用：完善、扩充jQuery库中的功能.
比如用于创建自定义动画的函数animate并没有提供颜色改变的功能。我们便可以引入一个简单的颜色插件如jquery.animate-colors.js
引用顺序如下
<script src="js/jquery-3.1.0.js"></script>
//必须要在jquery之后引用，以防插件中获取不到一些jQuery方法
<script src="js/jquery.animate-colors.js"></script>
<script type="text/javascript">
$(function(){
//引入之后我们便可以自定义颜色改变的动画了
$("#div1").animate({backgroundColor:"pink"},3000);
})
</script>
在插件开发前先介绍一个jQuery工具
$.extend([d],tgt,obj1,[objN])
用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
举例
var obj1 = {
name: 'Jay',
age: 88
}
var obj2 = {
name: 'yxt',
size: 100
}
// 使用extend（）方法合并多个对象：会把多个对象的属性合并在第一个对象里，并返回。如果有同名属性，则属性值是最后一个对象的值
var obj = $.extend(obj1, obj2);
console.log(obj);//age:88 name:"yxt" size:100
console.log(obj1);//age:88 name:"yxt" size:100
//可以看出obj1被修改了
怎么才能不修改呢？
只需在传参的时候 前置一个空对象
var obj = $.extend({}，obj1, obj2);
console.log(obj1);//age:88 name:"Jay"
使用extend给jQuery扩展新功能.
参数类型是一个对象，属性名就是新方法的名字，属性的值就是新方法的功能函数
//通过$.extend()向jQuery添加了一个sayHello函数，
//然后通过$直接调用。这就算是一个小插件
$.extend({sayHello: function(name){
console.log('hello' + (name ? name : 'World'));
}
});
$.sayHello();//helloWorld
$.sayHello("Jay");//helloJay
下面自定义console，输出特定格式的信息，定义一次后可以通过jQuery在程序中任何需要的地方调用它。
$.extend({
log: function(message){
// 1、获取到当前的年月日、时分秒
var now = new Date(),
y = now.getFullYear(), // 年
m = now.getMonth()+1, // 月
d = now.getDate(), // 日
h = now.getHours(), // 时
min = now.getMinutes(), // 分
s = now.getSeconds(), // 秒
time = y+"/"+m+"/"+d+" "+h+":"+min+":"+s;
console.log(time + message);
}
});
$.log("飘移青春");
//2016/9/12 22:13:49飘移青春
另一种方式的jQuery插件开发
$.fn.方法名 = 方法函数
//给jQuery添加一个新插件，传入颜色关键字，让标签字体变色
$.fn.setColor = function(color) {
// this 指代的是当前调用者，也就是方法操作的jQuery对象
// 当插件内部调用了jQuery方法实现功能时，
//可以直接把操作函数返回出去，
//因为jQuery中的方法执行完毕后会返回这个操作对象，
//也就间接的把当前操作的对象返回出去。
//如果没有使用jQuery来实现功能，则需要手动把this指针返回出来
// 我们把操作对象返回出去的目的是
//为了让自定义的插件能够像jQuery方法那样支持链式语法
return this.css('color', color);
}
jQuery里有链式操作
链式操作仅仅是通过对象上的方法最后 return this
例:取出a标签中的href属性的值，然后显示在a标签中
$.fn.readHref = function (){
// .each(function):遍历调用者的数据方法
return this.each(function(){
$(this).append(':' + $(this).attr('href'));
})
}
//注意 这里 this的指向 以及 return语句是为了支持链式调用
让插件支持传参
// 通过传递一个对象，包含color属性及fontSize属性来修改便签的
//字体颜色和字号
$.fn.setFont = function(option) {
// 定义一个对象，当没有传参时，字体的样式就是这个对象里保存的样式
var defaultStyle = {
color: 'black',
fontSize: '16px'
}
// 判断当前有没有参数，有则用参数中的样式，没有则用默认样式
var setting = $.extend({},defaultStyle, option);
// 修改当前标签的CSS样式
return this.css({
'color': setting.color,
'fontSize': setting.fontSize
});
}
// 调用setFont插件实现修改字体效果
$('p').setFont({color: 'red'});
