Home >Web Front-end >JS Tutorial >Summary of the use of extend() in jQuery

Summary of the use of extend() in jQuery

黄舟Original: 2017-12-04 09:22:121467browse

In our daily development work, the use of jQuery is indispensable, so I believe many friends will use the use of extend() in jQuery, so we will give it to you today Let’s introduce in detail the summary of the use of extend() in jQuery!

jQuery provides two methods for developing plug-ins, namely:

jQuery.fn.extend(object); 
jQuery.extend(object);

jQuery.extend(object); to extend the jQuery class itself. Add new methods to the class.
jQuery.fn.extend(object); Add methods to jQuery objects. This should be easy to understand. for example.

The code is as follows:

<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>

Okay, you also saw a little usage of $.extend() above.

1. Merge multiple objects.
What is used here is the function of nesting multiple objects of $.extend().
The so-called nesting of multiple objects is somewhat similar to the operation of merging arrays.
But here is the object. for example.

The code is as follows:

<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. Deeply nested objects.

The code is as follows:

<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. You can add static methods to jQuery.

The code is as follows:

<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>

Summary:

This article introduces jQuery to everyone through detailed introduction of examples. In the use of extend(), I believe that my friends have a better understanding of the use of extend. I hope it will be helpful to your work!

Related recommendations:

jquery’s extend method analysis

Detailed introduction and use of extend usage in JQuery

Detailed explanation of usage examples of jQuery.extend function

The above is the detailed content of Summary of the use of extend() in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jquery dom learningNext article：jquery dom learning

See more

Summary of the use of extend() in jQuery

Related articles