jquery plug-in production tutorial txtHover_jquery

Define the structural skeleton of the plug-in:
The structural skeleton initially used in the book is as follows:

Copy the code The code is as follows:

jQuery.fn.fluginmane=function(){
return this.each(function(){
　 //code...
　})
}　

This structure is not very ideal. In particular, it is mentioned in the book that in order to prevent conflicts, the example does not use $, but uses jQuery. Here, we use anonymous functions to implement the structural skeleton of the plug-in, so as to prevent possible conflicts. I also hope that everyone will have a good understanding of anonymous functions.

Copy code The code is as follows:

(function($){
　$.fn .fluginname=function(){
　 return this.each(function(){
　　 //code...
　});
　}
})(jQuery);

Notes:
1. For the sake of unification and standardization, our plug-in files will be named in the form of jquery.fluginname.js (fluginname represents the name of your plug-in).
2. The functions we use need to be private and cannot be accessed by the outside. This ensures that the plug-in will not be affected and interfered by external factors (anonymous functions have guaranteed this).
3. Allow users to control the behavior of plug-ins using options.
4. The default options allow external access, so users can customize them with minimal code.
　5.this.each() will traverse all objects that meet the requirements. It itself is a jquery object, and the plug-in finally returns the object. In fact, the chain mode of javascript is realized in this way.
Our first plug-in: txtHover
　1. Code implementation:

Copy code The code is as follows:

(function($){
$.fn.txtHover=function(){
return this.each(function(){
$(this).text('text changed!');
　});
　}
})(jQuery);

2. How to use:
Create an html file, add jquery and plug-ins Reference, the code is as follows:

Copy code The code is as follows:

this is test.

Add hover event:

Copy code The code is as follows:

(function ($) {
$.fn.txtHover = function () {
return this.each(function () {
var temp = $(this).text();
$(this).hover(function () {
$(this).text('text changed!');
}, function () {
$(this).text(temp);
});
});
}
})(jQuery);

First In this version, when the page is loaded, the content of the div is modified. This design is of little use. What we most commonly use is to produce some changes when the mouse moves over the text. Improved plugin adds hover event. First, we save the original value of the div in the variable temp. When the mouse moves over the div, the text is replaced. When the mouse moves out, the text is replaced.
Add custom options
In order to facilitate users to use it more flexibly, we need to add custom functions and modify the plug-in code:

Copy code The code is as follows:

(function ($) {
$.fn.txtHover = function (options) {
var defaults = { txt: 'text changed!' };
var opt = $. extend(defaults, options);
return this.each(function () {
var self = $(this);
var temp = self.text();
self.hover(function () {
self.text(opt.txt);
}, function () {
self.text(temp);
});
});
}
})(jQuery);

The plug-in defines a variable defaults and sets the default text information. We use the $.extend() (Friends who don’t know this function can check the information) method to expand a new variable opt. If the options variable passed in by the user contains txt, then opt will use the one passed in by the user, otherwise the system will be used. Default. We defined var self = $(this) in the system to replace the this object. This is a very annoying object in JavaScript. The object represented in different function contexts will be different. Passing this to another variable will avoid some errors in the program. It is necessary for those who are not familiar with it to master this knowledge point.
When users call the plug-in on the HTML page, they can customize the text content when the mouse moves over the div.
$(document).ready(function () {
　$('#test').txtHover({ txt: 'test' });
}); Okay, that’s it for today’s example until.