扩展
编写jQuery插件
新方法是通过扩展$.fn对象实现的
$.fn对象绑定变量
$.fn.highlight1 = function () {
// this已绑定为当前jQuery对象:
this.css('backgroundColor', '#fffceb').css('color', '#d85030');
return this;
}
函数内部的this在调用时被绑定为jQuery对象,所以函数内部代码可以正常调用所有jQuery对象的方法
简单的说。新的方法绑定到了jQuery对象中,所以jq对象能使用新方法
我们得出编写一个jQuery插件的原则:
1 给$.fn绑定函数,实现插件的代码逻辑;
2 插件函数最后要return this;以支持链式调用;
3 插件函数要有默认值,绑定在$.fn.<pluginName>.defaults上;
4 用户在调用时可传入设定值以便覆盖默认值。
扩展jQuery对象的功能十分简单
但是我们要遵循jQuery的原则,编写的扩展方法能支持链式调用、具备默认值和过滤特定元素,使得扩展方法看上去和jQuery本身的方法没有什么区别。
链式调用:函数最后 return this;返回jq对象
具备默认值:使用$.extend(target, obj1, obj2, ...)
过滤特性元素:调用filter()// jQuery的filter()参数可以传入css选择器、函数
$.extend(target, obj1, obj2, ...),它把后面多个object对象的属性合并到第一个target对象中,遇到同名属性,总是使用靠后的对象的值,也就是越往后优先级越高
// 把默认值和用户传入的options合并到对象{}中并返回:
var opts = $.extend({}, {
backgroundColor: '#00a8e6',
color: '#ffffff'
}, options);