This article mainly introduces the jquery plug-ins to write a concise tutorial, jquery plug-in development examples, need friends can refer to the following
Code as follows:/* 1.jquery plug-in file name recommended for jquery. [Plug-in name].js to avoid confusion with other JavaScript library Plug-ins.] For example, named Jquery.color.js 2. All object method names should be appended to the Jquery.fn object and all global functions should be attached to the jquery object itself. 3. Inside the plug-in, this refers to the jquery object currently fetched through the selector, unlike the general method, such as the Chick () method, where the internal this points to the DOM element 4. Can traverse all elements through This.each 5. All methods or function plug-ins, should be at the end of the semicolon, no person may be compressed when the problem, in order to be more secure, even in the plug-in head with a semicolon, to avoid other people's irregular code to the query impact. 6. The plugin 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 an alias for the JQuery object within the plug-in, rather than a full jquery representation, which avoids conflicts. Of course, this technique can also be used to circumvent the problem, so that the internal plug-ins continue to use the $ as a jquery alias. */ //; for better compatibility, start with a semicolon ;(function ($) {//here will be $ as the parameter //$.fn.extend extension $ for anonymous functions. Fn.extend ({ "COLOR": function (value) {//color's own plug-in method name // jquery provides CSS methods that can be written directly into THIS.CSS ("Attributes", "value"); return this.css ("Color", value); } }); &NBSP}) (jquery);//This passes jquery as an argument to the anonymous function function red () { Alert ($ ("#div"). ColoR () + "proof plugin available"); Alert ($ ("#div"). Color ("red") + "proof plugin returned with a jquery object"); $ ("#div"). Color ("red"); &NBSP} In HTML Use plug-in example: code:<body> <div id= "div" onclick= "red ()" > dddddddddddddddd</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
