cari

Rumah >hujung hadapan web >tutorial js >jQuery中关于extend()的使用总结

jQuery中关于extend()的使用总结

黄舟
黄舟asal
2017-12-04 09:22:121467semak imbas

在我们日常开发工作中，我们对jQuery的使用必不可少，那么在jQuery中extend()的使用相信很多小伙伴都会用到的吧，那我们今天就给大家来详细介绍下关于jQuery中关于extend()的使用总结！

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); 
} 
$(&#39;.ye&#39;).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;}, 
pide:function(a,b){return Math.floor(a/b);} 
}); 
var sum = $.add(3,5)+$.minus(3,5)+$.multiply(3,5)+$.pide(5,7); 
console.log(sum); 
</script> 
</body> 
</html>
</span>

总结：

本文通过实例的详细介绍为大家介绍了jQuery中extend()的使用、相信小伙伴们对extend的使用理解更为了解、希望对你的工作有所帮助！

相关推荐：

jquery的extend方法解析

JQuery中extend用法的详细介绍和使用

有关jQuery.extend函数的用法实例详解

Atas ialah kandungan terperinci jQuery中关于extend()的使用总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya： jquery之dom学习Artikel seterusnya：如何能让js模块变得更好用

Artikel berkaitan

Lihat lagi