jQuery插件开发初探
最简单的插件
$.fn.changeStyle = function (colorStr) {
$(this).css('color',colorStr);
}
应用如下：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jquery插件开发</title>
</head>
<body>
<p>Hello jQuery!</p>
</body>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.extend.js"></script>
<script type="text/javascript">
$('p').changeStyle('red');
</script>
</html>
但是如果想连续使用，就不好用了，比如：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jquery插件开发</title>
</head>
<body>
<p>Hello jQuery!</p>
</body>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.extend.js"></script>
<script type="text/javascript">
$('p').changeStyle('red').css('font-size','20px');
</script>
</html>
这里的设置字体大小就没有效果了。
需要简单处理一下上面的拓展程序。
$.fn.changeStyle = function (colorStr) {
this.css('color',colorStr);
return this;
}
加上return this;就可以了。
进一步扩展
(function ($) {
$.fn.changeStyle = function (colorStr) {
this.css('color',colorStr);
return this;
}
}(jQuery));
这样处理会更加安全，防止被污染
支持更多参数
(function ($) {
$.fn.changeStyle = function (colorStr,fontSize) {
this.css('color',colorStr).css('font-size',fontSize);
return this;
}
}(jQuery));
这里传递了两个参数
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jquery插件开发</title>
</head>
<body>
<p>Hello jQuery!</p>
</body>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.extend.js"></script>
<script type="text/javascript">
$('p').changeStyle('red','25px');
</script>
</html>
灵活处理参数
(function ($) {
$.fn.changeStyle = function (option) {
this.css('color',option.colorStr).css('font-size',option.fontSize);
return this;
}
}(jQuery));
这里用json对象传递参数,更加灵活。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jquery插件开发</title>
</head>
<body>
<p>Hello jQuery!</p>
</body>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.extend.js"></script>
<script type="text/javascript">
$('p').changeStyle({colorStr:'red',fontSize:'25px'});
</script>
</html>
支持默认参数处理
(function ($) {
$.fn.changeStyle = function (option) {
var defaultSetting = {colorStr:'blue',fontSize:'12px'};
var setting = $.extend(defaultSetting,option);
this.css('color',setting.colorStr).css('font-size',setting.fontSize);
return this;
}
}(jQuery));
这里会合并给定的参数和默认的参数,
如果只传一个参数，就会启用默认的参数。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jquery插件开发</title>
</head>
<body>
<p>Hello jQuery!</p>
</body>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.extend.js"></script>
<script type="text/javascript">
$('p').changeStyle({fontSize:'25px'});
</script>
</html>
后记
也可以这样处理
(function ($) {
$.fn.extend({
changeStyle:function (option) {
var defaultSetting = {colorStr:'blue',fontSize:'12px'};
var setting = $.extend(defaultSetting,option);
this.css('color',setting.colorStr).css('font-size',setting.fontSize);
return this;
}
});
}(jQuery));
$.fn $.fn.extend $.extend 的理解
(function ($) {
$.fn.extend({
changeStyle: function (option) {
var defaultSetting = {colorStr: 'blue', fontSize: '12px'};
var setting = $.extend(defaultSetting, option);
this.css('color', setting.colorStr).css('font-size', setting.fontSize);
return this;
}
});
// 静态方法，直接通过$调用，不可以通过元素调用
$.extend({
min: function (a, b) {
return a < b ? a : b;
},
max: function (a, b) {
return a > b ? a : b;
}
});
// 可以通过元素调用
$.fn.extend({
min: function (a, b) {
return a < b ? a : b;
},
max: function (a, b) {
return a > b ? a : b;
}
});
}(jQuery));
调用如下，
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jquery插件开发</title>
</head>
<body>
<p>Hello jQuery!</p>
</body>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.extend.js"></script>
<script type="text/javascript">
$('p').changeStyle({fontSize:'25px'});
$.min('3','5'); // 3
$('p').min('3','5'); // 3
</script>
</html>
1. $.fn 和 $.fn.extend 都是针对成员进行扩展的，$.extend扩展的是静态方法。
2. jQuery.fn.extend拓展的方法，你得用在jQuery对象上面才行啊！
3. jQuery.extend()，是扩展的jQuery这个类。
