Read jQuery 2 (two extensions) _ jquery-js tutorial

Source: Internet
Author: User
The previous article analyzed the composition of jQuery objects and Its extend method in this analysis. As follows:

The Code is as follows:

JQuery. extend = jQuery. fn. extend = function (){

We can use $. extend to expand custom objects, such

The Code is as follows:

Var myself = {name: jack };
$. Extend (myself, {setName: function (n) {this. name = n ;}});
Myself. setName ("tom ");

The setName method is added for the object myself through $. extend. But here we mainly discuss how $. extend constructs the jQuery library. In the above Code, jQuery. extend and jQuery. fn. extend are the same function. We browsed the jQuery library and found that some methods are extended by calling jQuery. extend, while others are extended by calling jQuery. fn. extend.
The following are discussed respectively:
1. extended by jQuery. extend
We know that the jQuery type in jQuery. extend is function, that is, the typeof jQuery value is the string "function ". If jQuery is treated as a class, jQuery. extend is equivalent to adding a static method extend to the class. Static methods do not need to be called after a new instance. They are called directly by class name + method name. JQuery. extend (...) is assigned to $. So we get used to $. extend (...).
The jQuery. extend method is called directly in the source code and only one parameter is passed. As follows:

The Code is as follows:

JQuery. extend ({
NoConflict: function (deep ){
Window. $ =_$;
If (deep)
Window. jQuery = _ jQuery;
Return jQuery;

We know that if only one parameter is passed in extend, this sentence will be executed.

The Code is as follows:

If (length = I ){
Target = this;
-- I;

That is, expand yourself, And here this is function jQuery. That is to say, many static methods have been added to function jQuery. xx (or $. (xx) instead of executing (calling) The jQuery method and then calling xx, for example, $ ("# id "). xx. The following example may be easier to understand.

The Code is as follows:

Function fun () {}// define a class (function)
// Add a static method extend for this class (function)
Fun. extend = function (obj ){
For (var a in obj)
This [a] = obj [a]; // Note: tihs is fun.
// Call extend to add the static property name for this class. The static method is method1.
Fun. extend ({name: "fun", method1: function (){}});
// Output name, prototype, extend, method1
Console. dir (fun)

Therefore, isFunction, isArray, and isWindow in jQuery are static methods and can only be referenced through $. isFunction, $. isArray, and $. Window. Instead, it cannot be referenced by $ ("..."). isFuction, $ ("..."). isArray, $ ("..."). isWindow.
2. extension through jQuery. fn. extend
JQuery. fn is equal to jQuery. prototype, that is, an extend method is attached to the prototype of function jQuery. When jQuery. fn. extend (object) is called for extension (note that only one parameter is passed), The extend function will still execute

The Code is as follows:

If (length = I ){
Target = this;
-- I;

At this time, this is jQuery. prototype (the first mentioned is the jQuery function itself ). That is, many attributes and methods are added to jQuery. prototype. When jQuery functions are executed, for example, $ () or jQuery (), more often $ (). This function will create a new jQuery (see the composition of the jQuery object in the previous article ). Then, the extended attributes and methods are appended to the new object. The following example may be easier to understand.

The Code is as follows:

Function fun () {}// define a class (function)
// Add a method extned to the class prototype
Fun. prototype. extend = function (obj ){
For (var a in obj)
This [a] = obj [a]; // note: this is fun. prototype.
// Call the extend method to add attributes and methods to fun. prototype.
Fun. prototype. extend ({name: "fun2", method1: function (){}})
// Output name, extend, method1
Console. dir (new fun ())

Therefore, all extended attributes or methods are added to the jQuery object. For example, bind, one, and unbind can be passed through $ ("... "). bind, $ ("... "). one, $ ("... "). unbind method call. But it cannot be called through $. bind, $. one, $. unbind.
Like Prototype, jQuery extends the entire library through the extend method. JQuery's extension method is more difficult to understand.
1. jQuery. extend ({...}) adds a static attribute or method to function jQuery.
2. jQuery (). extend ({...}) is used to add attributes or methods to the jQuery object.
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: 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.