Share the learning notes of the jQuery plug-in and the learning notes of the jquery plug-in

Share the learning notes of the jQuery plug-in and the learning notes of the jquery plug-in

Plugin has also become the Extension of jQuery. It is a program written by following certain specifications of application interfaces. Currently, there are more than thousands of jQuery plug-ins, which are compiled, verified, and improved by developers from all over the world. For jQuery developers, the direct use of these plug-ins will quickly stabilize the architecture system, saving project costs.

1. Plug-In overview

Based on the core code of jQuery, the plug-in compiles application programs that compose certain specifications. That is to say, the plug-in is also jQuery code, which can be embedded by introducing js files.

There are many types of plug-ins, which can be roughly divided: UI class, form and verification class, input class, special effect class, Ajax class, slide class, graphic image class, navigation class, integrated tool class, animation class, etc.

Some steps are required to introduce the plug-in:

• 1. The jquery. js file must be introduced before all plug-ins;
• 2. Introduce the plug-in;
• 3. Introduce the plug-in perimeter, such as skin and Chinese package.
  

For example, the most commonly used form verification plug-in: validate, in addition to the most basic plug-in file jquery. validate. min. js, there are also messages_zh.js and other language packages available for you to use.

Here we will not describe how to use this plug-in. You can go to the video jQuery plug-in -- Validation Plugin on MOOC, which details the configuration items and extensions of this plug-in.

By analogy, a good plug-in, detailed instructions are essential, detailed instructions can be read, and local testing allows you to quickly get started with the use of various plug-ins.

There are also a variety of plug-ins compiled by others for you to use, such as plug-ins for cookie management-cookies and so on.

Plug-ins can go to The plug-in module on The jQuery official website to find The jQuery Plugin Registry

Ii. custom plug-ins

Previously, we used a good plug-in provided by others, which is very convenient to use. If you cannot find a plug-in that you are satisfied with, and want to encapsulate a plug-in for others to use. You need to compile a jQuery plug-in by yourself.

1. Plug-ins

Plug-ins can be classified into three categories by function:

• Plug-ins that encapsulate object methods (that is, jQuery Objects Based on a DOM element, with the most locality used)
• Plug-ins that encapsulate global functions; (Global encapsulation)
• Selector plug-in. (Similar to. find (), for example, color (red) to select all the red elements)

2. Key points of the plug-in

It is mainly used to solve various plug-ins-related conflicts and errors, including:

• JQuery is recommended for plug-in names. [plug-in name]. javaScript to avoid conflicts with other js files or libraries (you can use alert ($. [plug-in name]) check whether the global method exists );
• The local object is appended to the jQuery. fn object, and the global function is appended to the jQuery object itself (alert ($ (selector). [plug-in name]) can be used to verify whether the local method exists );
• Inside the plug-in, this points to the current local object (the jQuery object obtained through the selector );
• You can use this. each to traverse all elements;
• All methods or plug-ins must end with a semicolon to avoid problems (to be more secure, you can add a semicolon in the plug-in header );
• The jQuery object should be returned by the plug-in to ensure chained operations;
• Avoid using $ in the plug-in. If you want to use $ in the plug-in, use the closure to pass jQuery in, so that $ can be used as the alias of jQuery in the plug-in.
  

; (Function ($) {// use the $ operator as the form parameter of the anonymous function/* write code here, and $ can be used as the abbreviation alias of jQuery */}) (jQuery); // here, jQuery is passed to the anonymous function as a real parameter.

3. Compile a plug-in

Assume that our plug-in requirement is: implement a drop-down menu to display the corresponding drop-down list when moving the element, and reclaim it when removing it. You can also set the text color when it is expanded.

By convention, we can constrain the html structure when writing plug-ins. Now let's assume that our page has the following HTML structure:

<Ul class = "list"> <li> navigation list 1 <ul class = "nav"> <li> navigation list 1 </li> <li> navigation list 2 </ li> <li> navigation list 3 </li> <li> navigation list 4 </li> <li> navigation List 5 </li> <li> navigation list 6 </ li> </ul> </li> <li> navigation List 2 <ul class = "nav"> <li> navigation List 1 </li> <li> navigation List 2 </li> <li> navigation list 3 </li> <li> navigation list 4 </li> <li> navigation List 5 </li> <li> navigation list 6 </li> </ul> <! -- Jquery has been introduced by default -->

Here, we have the first requirement on the Implementation Effect of our plug-in. We must create a ul list under the elements that require hover display, and the className must be nav. (The plug-in is based on this condition)

Now we can start writing our plug-ins. Save it as jQuery. nav. js (imported by default)

; (Function ($) {$. extend ({// plug-in is defined on the global method "nav": function (color) {// passing parameters. Here is just a reference, parameter options can be richer, such as passing in a json object, and so on ('.nav'}.css ({// set the style for the expanded drop-down list. The following describes in detail "list-style": "none ", "margin": 0, "padding": 0, "display": "none", "color": color // when the user controls the hover, text color displayed in the list}); $ ('. nav '). parent (). hover (// used here. the parent node of nav (the element from hover) // because we can only set it within the scope required by the plug-in, if an external selector is used, this principle is violated. function () {$ (this ). find (". nav "). stop (). slideDown ("normal"); // note that the jquery animation method is used here}, function () {$ (this ). find (". nav "). stop (). slideUp ("normal"); // pay attention to the use of stop (). Otherwise, the effect similar to the accordion will appear, but it is not what we need });}});}) (jQuery );

Note: The css method is used here for convenience. During the compilation of real plug-ins, if there are so many css styles, we recommend that you define the css styles externally. For example, you can rewrite them:

Css on which the plug-in depends, which must be imported into html together with the plug-in

. Hover {/* ins must style */list-style: none; margin: 0; padding: 0; display: none ;}

Modify the plugin.

$ ('. Nav '). addClass ("hover"); // separate CSS from jquery('.nav').css ("color", color); // enable it when user settings exist. If it does not exist, it is unnecessary (for judgment)

I just talked about js files of plug-ins. In the end, I want to make the results. Don't forget to add the following sentence to js on the page (the current plug-in is defined on the global method)

$ (Function () {$. nav ("#999"); // call the global method implemented by the plug-in and set the display background color to #999 .});

In this way, our global plug-in will be compiled, and the call is complete. Refresh your page to see if the effect has been achieved?

However, because our method is defined globally, as long as the structure specified by our plug-in appears on the page, there will be a hover display effect, but sometimes we often don't want this, we want it to be called locally on the specified element. Therefore, we need to make some changes to it to make it a local method, which is actually very simple:

; (Function ($) {$. fn. extend ({// defined as the local method "nav": function (color) {$ (this ). find ('. nav '). addClass ('hover '); // As mentioned above, this points to the element used to call this method (this).find('.nav').css ("color", color); // under the current element, added a find filter to implement execution in the corresponding elements. $ (This ). find ('. nav '). parent (). hover (function () {$ (this ). find (". nav "). stop (). slideDown ("normal");}, function () {$ (this ). find (". nav "). stop (). slideUp ("normal") ;}); return this; // returns the current object }}) ;}( jQuery );

Let's refresh the browser. You will find that success is ineffective. Why? Of course, because the original code is directly called globally and now it becomes a local method, it is obviously impossible to do so, and some changes need to be made:

I will not post html code here, but I hope you can copy the above html code below in practice to think about its implementation effect.

$ (Function () {// here, eq (0) indicates that only the first copy has an effect, but the copied one has no effect. // (You can delete the find filter and try again. You will find that it has effect on the remaining parts) $ (". list "). eq (0 ). nav ("red"); // call a local method });

Now let's look back at the plug-in code we have written to the key points of writing the plug-in above, and think about what else we have not done? You will find that it is basically matched. Now we have completed a drop-down menu plug-in.

In fact, writing plug-ins is not difficult. The most important thing is that when we write plug-ins, we must always pay attention to such key points. Every detail follows the best implementation summarized in the practice process, to customize and implement a good plug-in.

The code is first written to the user and then displayed to the machine.

Articles you may be interested in:

• Basic Introduction to jQuery plug-in development
• Basic knowledge of writing JQuery plug-ins
• Getting started with Jquery tree plug-in zTree
• The basics of jQuery spring plug-in compilation "See the pop-up window"