What are the jQuery plug-ins? Sharing how to write jQuery plug-in
不言
Release： 2023-04-03 10:28:02
Original
1499 people have browsed it
What is the jQuery plug-in? Common jQuery plug-ins are mainly divided into three types: plug-ins that encapsulate object methods; plug-ins that encapsulate global functions; and selector plug-ins. So what is the writing and use of each jQuery plug-in based on these three jQuery plug-ins? Next, let’s talk about the use and writing of jQuery plug-ins.
jQuery plug-in classification:
1. Plug-in that encapsulates object methods
This kind of plug-in encapsulates object methods and is used to It is the most common plug-in to operate on jQuery objects obtained through selectors.
2. Plug-in that encapsulates global functions
You can add independent functions to the jQuery namespace. For example, the jQuery.noConflict() method, the commonly used jQuery.ajax() method, and the jQuery.trim() method that removes the first space are all plugins attached to the kernel as global functions within jQuery.
3. Selector plug-in
In some cases, you will need to use a selector plug-in.
Basic points of plug-ins
1. It is recommended that the file name of the jQuery plug-in be named jquery.[plug-in name].js to avoid confusion with other JavaScript library plug-ins.
2. All object methods should be attached to the jQuery.fn object, and all global functions should be attached to the jQuery object itself.
3. Inside the plug-in, this points to the jQuery object currently obtained through the selector, unlike general methods, such as the click() method, where the internal this points to the DOM element.
4. You can traverse all elements through this.each.
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 to the header of the plug-in to prevent other people's irregular code from affecting the plug-in.
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 quantity that needs to be obtained, such as a string or array, etc.
7. Avoid using $ as an alias for jQuery objects inside the plug-in. Instead, use complete jQuery to represent it. This can avoid conflicts. Of course, you can also use closure techniques to avoid this problem, so that the plug-in can continue to use $ as an alias for jQuery. Many plugins do this.
Closures in plug-ins
Regarding closures, ECMAScript briefly describes them: allowing the use of internal functions (that is, function definitions and function expressions located in another within the body of a function), furthermore, these inner functions have access to all local variables, parameters and other inner functions declared in the outer function in which they are contained, when one of such inner functions is called outside the outer function containing them , a closure will be formed. That is, the inner function will be executed after the outer function returns. When this internal function is executed, it still must access the local variables, parameters and other internal functions of its external function. The values of these local variables, parameters, and function declarations (initially) are the values when the outer function returns, but will also be affected by the inner function.
First define an anonymous function function(){/*Place code here*/}, and then enclose it in parentheses to become (function(){/*Place code here*/}). Finally, it is executed through the () operator. Parameters can be passed in for use by internal functions.
//Note that for better compatibility, there is a semicolon before the start:
The above is the structure of a common jQuery plug-in.
The mechanism of jQuery plug-in
jQuery provides two methods for extending jQuery functions, namely jQuery.fn.extend() method and jQuery.extend() method. The former is used for the first of the three plug-in types mentioned before, and the latter is used to extend the latter two plug-ins. Both methods accept one parameter, of type Object. The "name/value pairs" of the Object object respectively represent "function or method name/function body".
In addition to being able to extend jQuery objects, the jQuery.extend() method also has a powerful function, which is to use and extend existing Object objects.
The jQuery code is as follows:
jQuery.extend(target,obj1,…….[objN])
用一个或多个其它对象来扩展一个对象，然后返回被扩展的对象。
例如合并settings对象和options对象，修改并返回settings对象。
var settings={validate:false,limit:5,name:”foo”};
var options={validate:true,name:”bar”};
var newOptions=jQuery.extend(settings,options);
Copy after login
The result is:
newOptins={valitdate:true,limit:5,name:”bar”};
Copy after login
The jQuery.extend() method is often used to set a series of default parameters of the plug-in method, such as the following code Shown:
function foo(options){
options=jQuery.extend({
name:”bar”,
limit:5,
datatype:”xml”
},options);
};
Copy after login
If the corresponding value is set in the passed parameter options object when calling the foo() method, then the set value will be used, otherwise the default value will be used. The code is as follows:
By using the jQuery.extend() method, you can easily override the default value with the passed in parameters. At this point, the method call remains the same, except that a map is passed in instead of a parameter list. This mechanism is not only more flexible but also more concise than the traditional method of detecting each parameter. In addition, using named parameters means that adding new options will not affect the code written in the past, making it more intuitive and clear for developers to use.
Writing a jQuery plug-in
1. A plug-in that encapsulates the jQuery object method
Writing a plug-in that sets and gets the color
First introduce how Write a color() plug-in. This plug-in is used to implement the following two functions.
The above is the detailed content of What are the jQuery plug-ins? Sharing how to write jQuery plug-in. For more information, please follow other related articles on the PHP Chinese website!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
