Home > Developer > JavaScript
Copy codeThe Code is as follows :/*
1. The jQuery plug-in file name is recommended to be named jquery. [plug-in name]. js to avoid confusion with other javascript library plug-ins. For example, name jquery. color. js
2. All object method names should be appended to the jQuery. fn object, and all global functions should be appended to the jQuery object itself.
3. Inside the plug-in, this points to the jquery object that is currently obtained through the selector, unlike the general method, such as the chick () method, the internal dom element that this points
4. You can use this. each to traverse all elements.
5. All methods or function plug-ins should end with a semicolon. Otherwise, problems may occur during compression. To be more secure, you can even add a semicolon in the plug-in header,
To avoid the impact of others' nonstandard code on queries.
6. The plug-in should return a jquery object to ensure that the plug-in can be chained. Unless the plug-in needs to return some amount that needs to be returned, such as a string or Array
7. Avoid using $ as the alias of the jquery object in the plug-in. Instead, use the complete jquery representation to avoid conflicts. Of course, you can also use the closure technique to avoid
Here, let the plug-in continue to use $ as the alias of jquery.
*/
//; For better compatibility, start with a semicolon
; (Function ($) {// $ is used as the form parameter of the anonymous function.
// $. Fn. Extended Extension
$. Fn. extend ({
"Color": function (value) {// plug-in method name written by color
// Jqueryjavaserds can be directly written as this.css ("attribute", "value ");
Return this.css ("color", value );
}
});
}) (JQuery); // passing jquery as a real parameter to an anonymous Function
Function red (){
Alert ($ ("# div"). color () + "");
Alert ($ ("# div"). color ("red") + "proves that the plug-in returns a Jquery object ");
$ ("# Div"). color ("red ");
}
Example of using plug-ins in HTML:
Copy codeThe Code is as follows: <body>
<Div id = "div" onclick = "red ()"> dddddddddddddddddd </div>
</Body>
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
