javascript基础拾遗(十三)-CSDN博客

1.jQuery的特点
jQuery是目前非常流行的javascript库，理念是“Write Less,Do More”
1)消除浏览器差异
2)简洁的操作DOM方法
3)轻松实现动画，修改CSS等各种操作

2.$符号
$是著名的jQuery符号，jQuery把所有功能都封装在一个全局函数jQuery中，$是全局函数jQuery的别名。

window.jQuery; // jQuery(selector, context)
window.$; // jQuery(selector, context)
$ === jQuery; // true
typeof($); // 'function'

$本质上是一个函数，但是函数本身也是对象，于是$除了可以直接调用外，还有很多其他属性

3.编写jQuery插件

$.fn.highlight1 = function () {
    // this已绑定为当前jQuery对象:
    this.css('backgroundColor', '#fffceb').css('color', '#d85030');
    return this;
}
$("#test-id").highlight1()

通过$.fn对象扩展jQuery方法
this在调用时，被绑定为调用的jQuery对象
return this的作用：因为jQuery对象支持链式操作，如$("#test-id").highlight1().slideDown()，因此jQuery对象返回的仍是jQuery对象

4.$.extend
如果jQuery插件，需要传入参数，该怎么办呢？

$.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;
}

可以看到传入参数和默认参数需要做合并处理，$.extend函数封装了这个操作，如下所示：

var options = {
    color: '#000000'
}
var opts = $.extend({},{
    backgroundColor:'#00a8e6',
    color:'#ffffff'
},options)
// {backgroundColor:'#00a8e6',color:'#000000'}
console.log(opts)

jQuery插件传入参数示例如下：

$.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'
}