JQuery的扩展

发表于 | 分类于

JQuery的扩展

[TOC]

  1. 给jQuery对象绑定一个新方法是通过扩展$.fn对象

    1
    2
    3
    4
    5
    6
    $.fn.hello() = function () {
        // this已绑定为当前jQuery对象:
        this.css('backgroundColor', '#fffceb').css('color', '#d85030');
        return this;
    }
    //函数内部的this在调用时被绑定为jQuery对象，所以函数内部代码可以正常调用所有jQuery对象的方法。

    返回的时候仍然要返回this，保证返回的对象仍然支持链式调用。

  2. 同时我们可以给我们自定义的函数增加参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $.fn.highlight2 = function (options) {
        // 要考虑到各种情况:
        // options为undefined
        // options只有部分key
        var bgcolor = options && options.backgroundColor || '#fffceb';
        var color = options && options.color || '#d85030';
        this.css('backgroundColor', bgcolor).css('color', color);
        return this;
    }

    当然这种考虑各种情况实在有些麻烦，所以JQuery为我们提供了更好的办法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 把默认值和用户传入的options合并到对象{}中并返回:
    var opts = $.extend({}, {
        backgroundColor: '#00a8e6',
        color: '#ffffff'
    }, options);
    //它把多个object对象的属性合并到第一个target对象中，遇到同名属性，总是使用靠后的对象的值，也就是越往后优先级越高
    $.fn.highlight = function (options) {
        // 合并默认值和用户设定值:
        var opts = $.extend({}, $.fn.highlight.defaults, options);
        this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
        return this;
    }
    // 设定默认值:
    $.fn.highlight.defaults = {
        color: '#d85030',
        backgroundColor: '#fff8de'
    }

    ​