一、编写插件
编写一个jQuery插件的原则:
- 给$.fn绑定函数,实现插件的代码逻辑;
- 插件函数最后要return this;以支持链式调用;
- 插件函数要有默认值,绑定在$.fn..defaults上;
- 用户在调用时可传入设定值以便覆盖默认值。
一、$.fn
给jQuery对象绑定一个新方法是通过扩展$.fn对象实现的。
$.fn.highlight1 = function () {
// this已绑定为当前jQuery对象:
this.css('backgroundColor', '#fffceb').css('color', '#d85030');
return this;
}
注意到函数内部的this在调用时被绑定为jQuery对象,所以函数内部代码可以正常调用所有jQuery对象的方法。
最后要return this;,因为jQuery对象支持链式操作,我们自己写的扩展方法也要能继续链式下去
$('#test-highlight1 span').highlight1(); //调用插件
二、手动传参
$.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;
}
$('#test-highlight2 span').highlight2({ //调用插件
backgroundColor: '#00a8e6',
color: '#ffffff'
});
三、$.extend(target, obj1, obj2, …)
使用jQuery提供的辅助方法$.extend(target, obj1, obj2, …),它把多个object对象的属性合并到第一个target对象中,遇到同名属性,总是使用靠后的对象的值,也就是越往后优先级越高:
// 把默认值和用户传入的options合并到对象{}中并返回:
var opts = $.extend({}, {
backgroundColor: '#00a8e6',
color: '#ffffff'
}, options);
四、传入默认值(最终版)
$.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'
}
//调用插件
$.fn.highlight.defaults.color = '#659f13';
$.fn.highlight.defaults.backgroundColor = '#f2fae3';
$('#test-highlight p:first-child span').highlight();
五、针对特定元素的扩展
助filter()方法来过滤来实现针对特定元素的扩展。
例:给所有指向外链的超链接加上跳转提示
先写出用户调用的代码:
$('#main a').external();
然后按照上面的方法编写一个external扩展:
$.fn.external = function () {
// return返回的each()返回结果,支持链式调用:
return this.filter('a').each(function () {
// 注意: each()内部的回调函数的this绑定为DOM本身!
var a = $(this);
var url = a.attr('href');
if (url && (url.indexOf('http://')===0 || url.indexOf('https://')===0)) {
a.attr('href', '#0')
.removeAttr('target')
.append(' <i class="uk-icon-external-link"></i>')
.click(function () {
if(confirm('你确定要前往' + url + '?')) {
window.open(url);
}
});
}
});
}