Summary of the use of extend() in jQuery-JS Tutorial-php.cn

Summary of the use of extend() in jQuery

黄舟

Release： 2017-12-04 09:22:12

Original

1483 people have browsed it

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

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!