Posted in Javascript onJune 15, 2014
jQuery为开发插件提拱了两个方法,分别是:
jQuery.fn.extend(object);
jQuery.extend(object);
jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。这个应该很好理解吧。举个例子。
<span style="font-size:18px;"><html> <head> <title></title> </head> <body> <h3 class="ye">new soul</h3> <h3 class="ye">new soul</h3> <h3 class="ye">new soul</h3> <h3 class="ye">new soul</h3> <script type="text/javascript" src="jquery.2.0.3.js"></script> <script type="text/javascript"> jQuery.fn.myPlugin = function(options) { $options = $.extend( { html: "no messages", css: { "color": "red", "font-size":"14px" }}, options); return $(this).css({ "color": $options.css.color, }).html($options.html); } $('.ye').myPlugin({html:"So easy,yes?",css:{"color":"green","font-size":"20px"}}); </script> </body> </html> </span>
好的,上面你也看到了一点点$.extend()的用法。
1.合并多个对象。
这里使用的就是$.extend()的嵌套多个对象的功能。
所谓嵌套多个对象,有点类似于数组的合并的操作。
但是这里是对象。举例说明。
<span style="font-size:18px;">//用法: jQuery.extend(obj1,obj2,obj3,..) var Css1={size: "10px",style: "oblique"} var Css2={size: "12px",style: "oblique",weight: "bolder"} $.jQuery.extend(Css1,Css2) //结果:Css1的size属性被覆盖,而且继承了Css2的weight属性 // Css1 = {size: "12px",style: "oblique",weight: "bolder"} </span>
2.深度嵌套对象。
<span style="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添加静态方法。
<span style="font-size:18px;"><html> <head> <title></title> </head> <body> <script type="text/javascript" src="jquery.2.0.3.js"></script> <script type="text/javascript"> $.extend({ add:function(a,b){return a+b;}, minus:function(a,b){return a-b}, multiply:function(a,b){return a*b;}, divide:function(a,b){return Math.floor(a/b);} }); var sum = $.add(3,5)+$.minus(3,5)+$.multiply(3,5)+$.divide(5,7); console.log(sum); </script> </body> </html></span>
jQuery $.extend()用法总结
- Author -
whsnow声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@