Writing jquery plug-ins (ii)--jquery plug-in types and mechanisms

Source: Internet
Author: User

jquery plug-in type

There are 3 main types of jquery plugins:

1. Plug-in for encapsulating object methods

This plug-in type is the most common plug-in that encapsulates object methods and operates on jquery objects obtained through selectors.

2. Plug-in that encapsulates global functions

This plug-in adds separate functions to the jquery namespace. such as the Jquery.noconflict () method for conflict resolution, commonly used Jquery.ajax () and Jquery.trim () methods.

3. Selector plug-in

Although the jquery selector is very powerful, you will need to expand some of your favorite selectors, such as color (red) to select all the elements of the red Word

jquery plugin mechanism

jquery provides two ways to extend the functionality of jquery, namely JQuery.fn.extend () and Jquery.extend (). The former is used to extend the 1th of the above mentioned, which is used to extend the latter two types. Both of these methods receive a parameter of type object. The "key/value" pairs of object objects represent "function or method name/function Body", respectively.

In addition, the Jquery.extend () method can extend an object with one or more other objects, in addition to extending the JQuery object, and then return the extended object.

Syntax: Jquery.extend (target,obj1,... [OBJN])

Example: Merging Settings objects and options objects, modifying and returning settings objects.

var settings={validate:false, Limit:5,name: "foo"}; var options={validate:true, Name: "Bar"}; var newoptions=jquery.extend (settings,options);

The result is:

Newoptions={validate:True, Limit:5,name: "Bar"}

The Jquery.extend () method is often used for a series of default parameters that are often used to set plug-in methods, as shown in the following code:

function Student (options) {    options=jquery.extend ({        name:"Xiaoming", age        :        Sex:"boy"/            * default parameter */    },options               ); /* options for passed parameters */ };

If the user invokes the student method, the value is set for the parameter Options object passed, otherwise the default value is used:

Student (name: "Xiaohua", Age:17,sex: "Girl"); Student (name:"Xiaojun", Age:16); student ();

Writing jquery plug-ins (ii)--jquery plug-in types and mechanisms

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.