Usage and difference of jquery.fn.extend and jquery.extend

Source: Internet
Author: User
Tags extend

jquery has two methods for developing Plug-ins, respectively:

The code is as follows Copy Code

JQuery.fn.extend (object); and Jquery.extend (object);

Jquery.extend (object); To extend the jquery class itself. Adds a new method to the class.

JQuery.fn.extend (object); Add methods to the JQuery object.

What is FN? See the jquery code, it's not hard to find.

The code is as follows Copy Code

Jquery.fn = Jquery.prototype = {Init:function (selector, context) {////...};

The original Jquery.fn = Jquery.prototype. It's certainly not strange to prototype.

Although JavaScript does not have a well-defined class concept, it is more convenient to use classes to understand it.

jquery is a very nicely encapsulated class, such as we use Statement $ ("#btn1 ″") to generate an instance of a jquery class.

Jquery.extend (object); Adding a class method to the jquery class can be understood as adding a static method. Such as:

The code is as follows Copy Code

$.extend ({add:function (a,b) {return a+b;} });

Add a "static method" for jquery, and then you can use this method in the place where jquery is introduced,

JavaScript code $.add (3,4); Return 7

JQuery.fn.extend (object); The extension to Jquery.prototype is to add a "member function" to the jquery class. Examples of jquery classes can use this "member function".

JQuery.fn.extend is an extension of the jquery method

Demo:jquery itself does not provide the Jquery.color () method, and if we need to extend the methods provided by jquery itself, we need to use the JQuery.fn.extend

  code is as follows copy code

JQuery.fn.extend ({
Color:function (Val)
if (val==undefined) {

return $ (this). CSS ("color");

return $ (this). CSS ("Color", Val);
$ (this). Color ("red")//The jquery object is set
Alert ($ (this). color ());//Get the colors of the jquery object and use the dialog box to eject

2.jquery.extend extensions to JQuery objects can be understood as static methods that can be used without the need for instance jquery

The code is as follows Copy Code

Jquery.extend ({
Myshow:function (A,B)
return a+b;

Call: Alert ($.add (3, 4));

The real development process, of course, will not do so small white plug-ins, in fact, jquery arch the rich operation of the document, events, CSS, Ajax, the effect of the method, combined with these methods, you can develop a more niubility plug-ins.

Simple to understand

The first way

The code is as follows Copy Code

Jquery.extend (object); The extended method can directly call the

$.extend ({add:function (a,b) {return a+b;} });

The method is called:

The code is as follows Copy Code

$.add (3,4);

JQuery.fn.extend (object); The extended method cannot be invoked directly, and must match the jquery object

The second way

The code is as follows Copy Code

$.fn.extend ({show:function () {Alert ($ (this). Text ())}};

Call Mode:

The code is as follows Copy Code

$ ("#testid"). Show ();//jquery object can be invoked.

$.show ()//This call is incorrect and does not get the desired effect.


There is also a special place where there is a jquery.extend = JQuery.fn.extend at the beginning of the function, and the Jquery.prototype is assigned to Jquery.fn before the program, so it appears in the following call Different invocations of Jquery.extend () and JQuery.fn.extend (), and the result of the two method invocations is not the same, the Jquery.extend () call does not extend the method to an instance of the object. The method of referencing it also needs to be implemented through the JQuery class, such as Jquery.init (), while the JQuery.fn.extend () call extends the method to the prototype of the object, so it has these methods when instantiating a JQuery object. This is very important, and it is reflected in the jquery.js.

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: 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.