jquery插件的几种写法
/**
* Created by peng on 2016/12/8.
*/
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options,function(){
//return settings;
});
jQuery.extend({
foo: function() {
alert('类级别使用extend');
},
bar: function(param) {
alert('类级别使用extend');
}
});
jQuery.foo = {
ajax:function() {
alert('类级别使用命名空间');
},
bar:function(param) {
alert('类级别使用命名空间'+param);
}
};
$.fn.extend({
foo:function(){
alert('对象级别使用extend');
},
bar:function(){
alert('对象级别使用extend');
}
})
$.fn.foo = {
fun1:function(){
alert('对象级别使用命名空间');
},
fun2:function(){
alert('对象级别使用命名空间');
}
};
jQuery.fn.name1 = {
fun:function() {
alert('name1的fun');
},
bar:function(param) {
alert('类级别使用命名空间'+param);
}
};
jQuery.fn.extend({
fun:function() {
alert('name2的fun');
},
bar:function(param) {
alert('类级别使用命名空间'+param);
}
})
var n={};
n.f={};
n.f.a={};
n.f.a.b={};
n.f.a.b.foo = function(s){alert("哈哈 多么奇妙"+s);}
// plugin definition 定义插件
$.fn.hilight = function(options) { var defaults = { foreground: 'red', background: 'yellow' };
var opts = $.extend(defaults, options);
return opts;
};
(function ($) {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step02 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性，默认属性
var options = $.extend(defaults, options);
return defaults;
}
})(jQuery);
以下是测试所用页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.js"></script>
<script src="js/chajian1.js"></script>
</head>
<body>
<div id="content">
</div>
<div id="myDiv" style="height:20px;width:30px;border:1px solid ">
</div>
<script type="text/javascript">
//jQuery.min(2,3); // 2
//jQuery.max(4,5); // 5
//console.log(jQuery.min(2,3));
// console.log(jQuery.max(4,5));
//$("#content").html(jQuery.min(2,3)+jQuery.max(4,5));
// console.log(settings);
//$.foo.bar();
// jQuery.myPlugin.bar("1");
//$.foo("ff");
// n.f.a.b.foo("zhazha ");
//$("div").fun();
// $.name1.fun();
// $.name2.fun();
// $("#content").name1.fun();
// $("#content").name2.fun();
//$('#myDiv').hilight({foreground: 'blue' });
//console.log($('#myDiv').hilight({foreground: 'blue' }));
// var obj01 = { name: "英文名：Sam Xiao", age: 29, girlfriend: { name: "Yang", age: 29} }
// var obj02 = { name: "中文名：XiaoJian", girlfriend: { name: "YY"} };
// var a = $.extend(obj01, obj02);
// var b = $.extend(true, obj01, obj02);
// var c = $.extend({}, obj01, obj02);
// var d = $.extend(true,{}, obj01, obj02);
// console.log(a);
// console.log(b);
// console.log(c);
// console.log(d);
console.log($("<div id='notheone'/>").easySlider( {prevId: 'aa',prevText:'bb'}));
</script>
</body>
</html>
