jquery has two methods for developing Plug-ins, respectively:
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); Add methods to the JQuery object. This should be very well understood. Give an example.
Copy Code code as follows:
<span style= "FONT-SIZE:18PX;" > <title></title>
<body>
<script type= "Text/javascript" src= "Jquery.2.0.3.js" >& lt;/script>
<script type= "Text/javascript" >
JQuery.fn.myPlugin = function (options) {
$options = $.extend ({
HTML: "No Messages",
CSS: {
"color": "Red",
"font-size": "14px"
}},
option s);
Return $ (this). css ({
"color": $options. Css.color,
}). html ($options. html);
}
$ ('. Ye '). Myplugin ({html: "So easy,yes?", css:{"color": "Green", "font-size": "20px"});
</script>
</body>
</span>
OK, so you've seen a little bit of $.extend ().
1. Merge multiple objects.
This is the function of nesting multiple objects for $.extend ().
Nesting multiple objects is a bit like an array-merging operation.
But this is the object. An example is provided.
Copy Code code 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 property of the Css1 is overwritten and inherits the Css2 weight property
Css1 = {size: "12px", Style: "Oblique", Weight: "Bolder"}
</span>
2. Deep nested objects.
Copy Code code as follows:
<span style= "FONT-SIZE:18PX;" > Jquery.extend (
{Name: "John", Location: {City: "Boston"}},
{Last: ' Resig ', location: {state: ' MA '}}
);
Results:
=> {name: ' John ', Last: ' Resig ', location: {state: ' MA '}}
New and deeper. Extend ()
Jquery.extend (True,
{Name: "John", Location: {City: "Boston"}},
{Last: ' Resig ', location: {state: ' MA '}}
);
Results
=> {name: "John", Last: "Resig",
Location: {city: ' Boston ', State: ' MA '}}
</span>
3. You can add a static method to jquery.
Copy Code code as follows:
<span style= "FONT-SIZE:18PX;" > <title></title>
<body>
<scr IPT 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) {retur n 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>
