JQuery $.extend () Usage Summary

jquery has two methods for developing plug-ins, namely:

JQuery.fn.extend (object);
Jquery.extend (object);

Jquery.extend (object); To extend the jquery class itself. Adds a new method to the class.
JQuery.fn.extend (object); Adds a method to a jquery object.

As an example,

[HTML]View PlainCopy

2. <h3 class="Ye">new soul</h3>
4. <h3 class="Ye">new soul</h3>
6. <h3 class="Ye">new soul</h3>
8. <h3 class="Ye">new soul</h3>
10. <script type="Text/javascript" src="Jquery.2.0.3.js"></Script >
12. <script type="Text/javascript">
14. JQuery.fn.myPlugin = function (options) {
16. $options = $.extend ({
18. HTML: "No Messages",
20. CSS: {
22. "Color": "Red",
24. "Font-size": "14px"
26. }},
28. Options);
30. return $ (this). CSS ({
32. "Color": $options. Css.color,
36. }). html ($options. html);
38. }
40. $ ('. Ye '). Myplugin ({html: "So easy,yes?", css:{"color": "Green", "font-size": "20px"});

OK, so you see a little bit of $.extend () usage.

1. Merge multiple objects.

This is where $.extend () is used to nest multiple objects.

The so-called nested multiple objects, a bit similar to the merging of arrays of operations.

But here is the object. To illustrate:

[JavaScript]View PlainCopy

1. Usage: jquery.extend (obj1,obj2,obj3,..)
2. var css1={size: "10px", Style: "Oblique"}
3. var css2={size: "12px", Style: "oblique", Weight: "bolder"}
4. $.jquery.extend (CSS1,CSS2)
5. Result: The Size property of the Css1 is overwritten, and the weight property of the Css2 is inherited
6. Css1 = {size: "12px", Style: "Oblique", Weight: "Bolder"}

2. Deep nested objects.

[JavaScript]View PlainCopy

1. Jquery.extend (
2. {Name: "John", Location: {City: "Boston"}},
3. {Last: ' Resig ', location: ' {state: ' MA '}}
4. );
5. Results:
6. = = {Name: ' John ', Last: ' Resig ', location: ' {state: ' MA '}}

[JavaScript]View PlainCopy

1. New more in-depth. Extend ()
2. Jquery.extend ( True,
3. {Name: "John", Location: {City: "Boston"}},
4. {Last: ' Resig ', location: ' {state: ' MA '}}
5. );
6. Results
7. = = {Name: "John", Last: "Resig",
8. Location: {city: ' Boston ', State: ' MA '}}

3. You can add static methods to jquery

[JavaScript]View PlainCopy

1. $.extend ({
2. Add:function (A, b) {return a+b;},
3. Minus:function (A, A, (a) {return a-B},
4. Multiply:function (A, b) {return a*b;},
5. Divide:function (A, b) {return Math.floor (A/b);}
6. });
7. var sum = $.add (3,5) +$.minus (3,5) +$.multiply (3,5) +$.divide (5,7);
8. Console.log (sum);

JQuery $.extend () Usage Summary