本篇教程介绍了jQuery教程之$.extend()用法总结，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

<

jQuery为开发插件提拱了两个方法，分别是： 
 
jQuery.fn.extend(object); jQuery.extend(object); 
jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象添加方法。
举个例子


[html] view plain copy
 







<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"}});  




好的，上面你也看到了一点点$.extend()的用法。 1.合并多个对象。 这里使用的就是$.extend()的嵌套多个对象的功能。 所谓嵌套多个对象，有点类似于数组的合并的操作。 但是这里是对象。举例说明：


[javascript] view plain copy
 







//用法: 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"}   



 

2.深度嵌套对象。


[javascript] view plain copy
 







 jQuery.extend(   
{ name: “John”, location: { city: “Boston” } },   
{ last: “Resig”, location: { state: “MA” } }   
);   
// 结果:   
// => { name: “John”, last: “Resig”, location: { state: “MA” } }   





[javascript] view plain copy
 







// 新的更深入的 .extend()   
jQuery.extend( true,   
{ name: “John”, location: { city: “Boston” } },   
{ last: “Resig”, location: { state: “MA” } }   
);   
// 结果   
// => { name: “John”, last: “Resig”,   
// location: { city: “Boston”, state: “MA” } }   




3.可以给jQuery添加静态方法


[javascript] view plain copy
 







$.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);   
   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！