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>