what are jquery plugins-Front-end Q&A-php.cn

jquery plugins means "jquery plug-ins", which are some tools written by developers using jquery. They can be understood as a function or special effect encapsulated by jQuery; only a small amount of code is needed when calling. You can achieve very good results. The purpose of writing a jquery plug-in is mainly to encapsulate a series of existing methods or functions so that they can be reused in other places to facilitate later maintenance and improve development efficiency.

what are jquery plugins

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

plugins means "plug-in". jquery plugins means "jquery plug-ins".

what are jquery plugins

What is a jquery plug-in?

jQuery plug-in is a collection of scripts that developers use Jquery to create special effects, then encapsulate or package them into js files, and publish them online for everyone to use.

The purpose of writing jquery plug-ins is mainly to encapsulate a series of existing methods or functions so that they can be reused in other places to facilitate later maintenance and improve development efficiency.

Usually such plug-ins need to call plug-in files in addition to jQuery library files. There are instructions for use and you can understand them at a glance. For example, when using the plug-in jQuery produced by the jQuery official website, you must not only link the library file, but also link the UI file and the UI CSS file, such as:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Copy after login

After these operations, the jQuery effect can be truly used. Referenced to web page files play a role.

Plug-in writing

Regarding the writing of plug-ins, jquery officially provides a set of templates for developing plug-ins at the object level:

;(function ($) {
    $.fn.plugin=function (options) {
        var defaults={
            //各种参数、各种属性
        };
        //options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptions
        var endOptions=$.extend(defaults,options);
        
        this.each(function () {
            //实现功能的代码
        });
    };
})(jQuery);

Copy after login

Key points of the template:

1. All functions are placed in closures, and external functions cannot call the parameters inside, which is safer.

2. Add a semicolon in front to avoid unnecessary trouble

Methods called by jquery plug-in:

1. Extend jquery through $.extend()

2. Add methods to jquery through $.fn

3. Use the jQuery UI widget factory method to create via $.widget()

Method 1 cannot call the selector and is only understood by jQuery as adding a static method, so when we use No need to select the DOM object

Commonly used third-party plug-ins for jquery

JQuery has a wealth of third-party plug-ins, such as: tree menu, Date controls, image switching plug-ins, pop-up windows and other basic front-end page components have corresponding plug-ins, and the effects made with JQuery plug-ins are very dazzling, and the plug-ins can be rewritten and packaged according to your own needs, which is simple and practical.

The following introduces commonly used third-party plug-ins.

1. jQuery form validation plug-in: Validation

(1) Introduction to Validation

The most common occasion where JavScript is used is form validation, and jQuery is an excellent JavaScript library , also provides an excellent form validation plug-in - Validation. Validation is one of the oldest jQuery plug-ins. It has been verified by different projects around the world and has been praised by many web developers. As a standard verification method library, Validation has the following advantages:

Built-in validation rules: It has 19 types of built-in validation rules such as required, numbers, E-Mail, URL and credit card number
Customized verification rules: You can easily customize verification rules
Simple and powerful verification information prompts: The verification information prompts are defaulted and provide the function of customizing the default prompt information
Real-time validation: Validation can be triggered through keyup or blur events, not just when the form is submitted.

(2) Plug-in download address: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

The official API address of the Validation plug-in is: http://docs.jquery.com/Plugins/Validation

2. jQuery form plug-in: Form

(1) Introduction to Form plug-in

jQuery Form plug-in is an excellent The Ajax form plug-in makes it very easy and non-intrusive to upgrade HTML forms to support Ajax. jQuery has two core methods - ajaxForm() and ajaxSubmit(), which combine functionality from controlling form elements to deciding how to manage the submission process. In addition, iain, the plug-in also includes other methods: formToArray(), formSerialize(), fieldSerialize(), fieldValue(), clearForm() and resetForm(), etc.

(2) jQuery Form form plug-in download address : http://jquery.malsup.com/form/. Readers can download the plug-in and view simple getting started instructions, API, example code, etc. on the website.

3. Dynamic binding event plug-in: livequery

(1) Introduction to livequery plug-in

jQuery’s event binding function enables the complete separation of jQuery code and HTML code, making the hierarchical relationship of the code clearer and easier to maintain. However, for HTML elements that are dynamically loaded into the page, events need to be re-binded to these elements every time, which is very inconvenient. A new plug-in was born from this, namely livequery, which can be used to register the time for the corresponding DOM element or trigger the callback function. Not only will the element matched by the current selector be bound to the event, but also elements added later via JavaScript will be bound to the event. When the element no longer matches the selector, livequery will automatically cancel the event registration, so that developers no longer need to pay attention to the source of the HTML element, only how to write its bound events.

Select a DOM element through the jQuery selector, and the livequery plug-in will persist it in the entire DOM range in real time. This means that whether the element previously existed or was dynamically loaded later, the event will be bound, just like CSS styling the element. At the same time, this plug-in achieves these functions without taking up almost any resources.
(2) jQuery livequery plug-in download address: http://plugins.jquery.com/livequery/

4. jQuery UI plug-in

(1) jQuery UI introduction:

jQuery UI is derived from a jQuery plug-in - Interface. The earliest version of the Interface plug-in was 1.2, which only supported the jQuery 1.1.2 version. Later, some people reconstructed most of the Interface representatives based on the jQuery 1.2 API and unified the API. Due to major improvements, the version number is not 1.3 but jumps directly to 1.5 and is renamed jQuery UI.

jQuery UI is mainly divided into 3 parts, interaction, widgets and effect library

interaction. Here are some content related to mouse interaction. Including dragging, placing, zooming, selecting and sorting etc. Some of the widgets are made based on these interactive components. This library requires a jQuery UI core library - ui.core.js supports
widgets. Here are mainly some interface extensions. It includes accordion navigation, autocomplete, color picker, dialog box, slider, label, calendar, magnifying glass, progress bar and spinner controller. This library requires a jQuery UI core library - ui.core.js supports the
effects library. This library is used to provide rich animation effects, so that animation is no longer limited to the animate() method. The effects library has its own set of core, effects.core.js, and does not require the support of jQuery’s core library ui.core.js

(2) The download address of the jQuery UI plug-in is: http ://jqueryui.com/download/all/. Select the "jQuery UI 1.6rc2" link to directly download the complete package, including source code, distribution version and test driver.

5. Plug-in for managing cookies: Cookie

(1) Introduction to Cookie plug-in

Cookie is a small text file placed on the client by the website designer. Cookies can provide users with many conveniences. For example, shopping websites store product lists that users have browsed, or portal websites remember which types of news users like to browse. When the user is running, the user's login status can also be stored, so that the user does not have to enter this information every time when visiting the website.

jQuery provides a very simple plug-in to manage cookies on the website. The name of the plug-in is also Cookie.

(2) The download address of the jQuery Cookie plug-in: http://plugins.jquery .com/cookie/

6. Modal window plug-in: SimpleModal

(1) Introduction to SimpleModal plug-in

SimpleModal is a lightweight jQuery plug-in, which is a modal The development of modal windows provides a powerful interface, which can be used as the framework of modal windows. SimpleModal is very flexible and can create anything you can imagine, and you don't need to consider cross-browser issues in UI development.

(2) Download address of SimpleModal plug-in: http://www.ericmmartin.com/projects/simplemodal/

7. Lazy loading image plug-in: lazyload

Lay loading images or start loading images only when certain conditions are met

Download URL: https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js

8. fly plug-in

Add shopping cart effect and realize parabolic motion

Download address: https://github.com/amibug/fly

9, qrcode

jquery plug-in that can generate matrix QR code QRCode on the client

Download address: https://github.com/ lrsjng/jquery-qrcode

10, spinner

can easily add or subtract the quantity in the shopping cart, and also supports using the up and down keys on the keyboard to change the shopping cart. quantity.

Download address: https://github.com/vsn4ik/jquery.spinner

and so on. . .

[Recommended learning: jQuery video tutorial, web front-end video]

The above is the detailed content of what are jquery plugins. For more information, please follow other related articles on the PHP Chinese website!