您的位置：首页 > Web前端 > JQuery

jQuery插件开发

2016-07-19 11:33 543 查看

主要是使用$.extend()和$.fn.extend()两个方法扩展对象的方法和属性

API文档上的示例：

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<input type="radio">单选框
<input type="checkbox">多选框

<script src="jquery.min.js"></script>
<script src="jq.fn.extend.js"></script>

</body>
</html>

jq.fn.extend.js：

jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});

$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

index.html:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<div></div>

<ul>
<li>
<a href="http://weibo.com/">我的微博</a>
</li>
<li>
<a href="http://www.baidu.com">百度</a>
</li>
<li>
<a href="http://www.google.com">谷歌</a>
</li>
</ul>

<span>我是span标签</span>
<span>我是span标签</span>
<span>我是span标签</span>

<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>

<script src="jquery.min.js"></script>
<script src="jq.fn.extend.js"></script>
<script>
$(function () {
$.sayWord();
$.sayWord('erbao');
setInterval(function () {
$('div').text('当前的时间是：' + $.log());
}, 1000);

$('a').changeColor().css('font-weight', 'bold');
$('span').myPlugin({
/*'color': 'lightpink',*/
'fontSize': '20px'
});

$('p').myPlugin();
});

</script>

</body>
</html>

jq.fn.extend.js：

/**
* $.extend()这种方式开发无法运用jq强大的选择器，只能做简单的对象扩展
* @param  {[type]} name) {        console.log((name ?  name    :                                             'Alan')       + ' say some word.');    }

[description]
* @param  {Date}   log:  function              () {        var date,year,month,day,hour,minute,second;        date [description]
* @return {[type]}       [description]
*/
$.extend({
sayWord: function (name) {
console.log((name ? name : 'Alan') + ' say some word.');
},
log: function () {
var date,year,month,day,hour,minute,second;

date = new Date();
year = date.getFullYear();
month = parseInt(date.getMonth() + 1);
day = date.getDate();
hour = date.getHours();
minute = date.getMinutes();
second = date.getSeconds();

return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}
});

// 最常用的jq插件开发格式
$.fn.changeColor = function () {
this.css({'color': 'red'});
// 返回，使其支持链式调用
return this.each(function () {
// 对每个元素进行对应的操作
$(this).append(' ' + $(this).attr('href'));
});
};

// 支持自定义传参
$.fn.myPlugin = function (options) {
var defaults = {
'color': 'green',
'fontSize': '12px'
};

// 写一个空对象，都合并到空对象，保护defaults里面的值
var settings = $.extend({}, defaults, options);

return this.each(function () {
$(this).css({
'color': settings.color,
'fontSize': settings.fontSize
});
});
};

$.extend(obj1, obj2) 合并和覆盖到第一个对象

一个好的做法是将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，这样做的好处是所有值被合并到这个空对象上，保
护了插件里面的默认值。

$.extend({}, defaults, settings);

在处理插件参数的接收上，通常使用jQuery的extend方法，上面也提到过，但那是给extend方法传递单个对象的情况下，这个对象会合并到jQuery身上，所

以我们就可以在jQuery身上调用新合并对象里包含的方法了，像上面的例子。当给extend方法传递一个以上的参数时，它会将所有参数对象合并到第一个里

。同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。
利用这一点，我们可以在插件里定义一个保存插件参数默认值的对象，同时将接收来的参数对象合并到默认对象上，最后就实现了用户指定了值的参数使用指

定的值，未指定的参数使用插件默认值。
为了演示方便，再指定一个参数fontSize，允许调用插件的时候设置字体大小。

面向对象模式开发插件（最好的方式，当代码量特别大的时候，易于维护）

;(function ($, win, doc, undefined) {
// 创建一个构造函数
var Butterfly = function (element, options) {
this.$element = element;
this.defaults = {
'color': 'lightpink',
'fontSize': '20px',
'fontWeight': 'bold'
};

this.options = $.extend({}, this.defaults, options);
};

Butterfly.prototype = {
_init: function () {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'fontWeight': this.options.fontWeight
});
}
};

$.fn.myPlugin = function (options) {
var butterfly = new Butterfly(this, options);
butterfly._init();
};

})(jQuery, window, document);

// 调用方式

$(ele).myPlugin();

$(ele).myPlugin({

　　// ...传参

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航