jQuery插件篇

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'});