jQuery $.extend()用法总结
jQuery.fn.extend(object);
jQuery.extend(object);
jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。这个应该很好理解吧。举个例子。
<spanstyle="font-size:18px;"><html>
<head>
<title></title>
</head>
<body>
<h3>newsoul</h3>
<h3>newsoul</h3>
<h3>newsoul</h3>
<h3>newsoul</h3>
<scripttype="text/javascript"src="jquery.2.0.3.js"></script>
<scripttype="text/javascript">
jQuery.fn.myPlugin=function(options){
$options=$.extend({
html:"nomessages",
css:{
"color":"red",
"font-size":"14px"
}},
options);
return$(this).css({
"color":$options.css.color,
}).html($options.html);
}
$('.ye').myPlugin({html:"Soeasy,yes?",css:{"color":"green","font-size":"20px"}});
</script>
</body>
</html>
</span>
好的，上面你也看到了一点点$.extend()的用法。
1.合并多个对象。
这里使用的就是$.extend()的嵌套多个对象的功能。
所谓嵌套多个对象，有点类似于数组的合并的操作。
但是这里是对象。举例说明。
<spanstyle="font-size:18px;">//用法:jQuery.extend(obj1,obj2,obj3,..)
varCss1={size:"10px",style:"oblique"}
varCss2={size:"12px",style:"oblique",weight:"bolder"}
$.jQuery.extend(Css1,Css2)
//结果:Css1的size属性被覆盖,而且继承了Css2的weight属性
//Css1={size:"12px",style:"oblique",weight:"bolder"}
</span>
2.深度嵌套对象。
<spanstyle="font-size:18px;">jQuery.extend(
{name:“John”,location:{city:“Boston”}},
{last:“Resig”,location:{state:“MA”}}
);
//结果:
//=>{name:“John”,last:“Resig”,location:{state:“MA”}}
//新的更深入的.extend()
jQuery.extend(true,
{name:“John”,location:{city:“Boston”}},
{last:“Resig”,location:{state:“MA”}}
);
//结果
//=>{name:“John”,last:“Resig”,
//location:{city:“Boston”,state:“MA”}}
</span>
3.可以给jQuery添加静态方法。
<spanstyle="font-size:18px;"><html>
<head>
<title></title>
</head>
<body>
<scripttype="text/javascript"src="jquery.2.0.3.js"></script>
<scripttype="text/javascript">
$.extend({
add:function(a,b){returna+b;},
minus:function(a,b){returna-b},
multiply:function(a,b){returna*b;},
divide:function(a,b){returnMath.floor(a/b);}
});
varsum=$.add(3,5)+$.minus(3,5)+$.multiply(3,5)+$.divide(5,7);
console.log(sum);
</script>
</body>
</html></span>