This series of articles is my summary After Reading & lt; jQueryPluginDevelopmentBeginnersGuide & gt;. If you are interested, you can read the structure skeleton of the original book definition plug-in:
The most used structural skeleton in the book is as follows:
The Code is as follows:
JQuery. fn. fluginmane = function (){
Return this. each (function (){
// Code...
})
}
This structure is not ideal. In particular, jQuery is used to prevent conflict examples from using $. Here, we use anonymous functions to implement the structure skeleton of the plug-in, so as to prevent possible conflicts. I also hope you will have a good understanding of anonymous functions.
The Code is as follows:
(Function ($ ){
$. Fn. fluginname = function (){
Return this. each (function (){
// Code...
});
}
}) (JQuery );
Note:
1. for uniformity and standardization, our plug-in files will all be named in the form of jquery. fluginname. js (fluginname represents the name of your plug-in ).
2. All the functions we use must be private and cannot be accessed from the outside. This ensures that the plug-in will not be affected or disturbed by the outside. (This is already guaranteed by anonymous functions ).
3. allow users to use options to control the actions of the plug-in.
4. The default options allow external access, so that users can customize with the least amount of code.
5. this. each () traverses all required objects. It is a jquery object and the plug-in returns the object. In fact, this method achieves the javascript chained mode.
Our first plug-in: txtHover
1. Code implementation:
The Code is as follows:
(Function ($ ){
2.16.fn.txt Hover = function (){
Return this. each (function (){
$ (This). text ('text changed! ');
});
}
}) (JQuery );
2. How to use:
Create an html file and add jquery and plug-in references. The Code is as follows:
The Code is as follows:
