Home > Developer > JavaScript
JQuery provides two methods for development plug-ins:
JQuery. fn. extend (object );
JQuery. extend (object );
JQuery. extend (object); adds a new method to the class to extend the jQuery class itself.
JQuery. fn. extend (object); add a method to the jQuery object. This should be easy to understand. For example.
Copy codeThe Code is as follows:
<Span style = "font-size: 18px;"> <Head>
<Title> </title>
</Head>
<Body>
<H3 class = "ye"> new soul <H3 class = "ye"> new soul <H3 class = "ye"> new soul <H3 class = "ye"> new soul <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 outputs (this).css ({
"Color": $options.css. color,
Apps).html(javasoptions.html );
}
$ ('. Ye'). myPlugin ({html: "So easy, yes? ", Css: {" color ":" green "," font-size ":" 20px "}});
</Script>
</Body>
</Html>
</Span>
Okay. You also saw a little usage of $. extend.
1. Merge multiple objects.
The nested object function of $. extend () is used here.
Nesting multiple objects is similar to merging arrays.
But here is the object. Examples.
Copy codeThe Code is as follows:
<Span style = "font-size: 18px;"> // usage: jQuery. extend (obj1, obj2, obj3 ,..)
Var Css1 = {size: "10px", style: "oblique "}
Var Css2 = {size: "12px", style: "oblique", weight: "bolder "}
$. JQuery. extend (Css1, Css2)
// Result: the size attribute of Css1 is overwritten and inherits the weight attribute of Css2.
// Css1 = {size: "12px", style: "oblique", weight: "bolder "}
</Span>
2. Deep nested object.
Copy codeThe Code is as follows:
<Span style = "font-size: 18px;"> jQuery. extend (
{Name: "John", location: {city: "Boston "}},
{Last: "Resig", location: {state: "MA "}}
);
// Result:
// =>{ Name: "John", last: "Resig", location: {state: "MA "}}
// New deeper. extend ()
JQuery. extend (true,
{Name: "John", location: {city: "Boston "}},
{Last: "Resig", location: {state: "MA "}}
);
// Result
// => {Name: "John", last: "Resig ",
// Location: {city: "Boston", state: "MA "}}
</Span>
3. You can add a static method to jQuery.
Copy codeThe Code is as follows:
<Span style = "font-size: 18px;"> <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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
