Java programmer's JavaScript Study Notes (11 -- jQuery-extensions at the "object" level)

Java programmer's JavaScript Study Notes (11 -- jQuery-extensions at the "object" level)
We plan to complete this note in the following order:
1. concept.
2. Copy and inherit attributes.
3. this/call/apply.
4. Closure/getter/setter.
5. prototype.
6. object-oriented simulation.
7. Basic jQuery mechanism.
8. jQuery selector.
9. jQuery tool method.
10. jQuery-extension at the class level.
11. jQuery-extensions at the "object" level.
12. jQuery-extended selector.
13. jQuery UI.
14. Extend the jQuery UI.
This is Part 1 of the note. We will extend the functions of the objects returned by $ () to enrich its attributes and functions to meet our needs.
In article 9th (http://blog.csdn.net/stationxp/article/details/40480185) we learned that jQuery. extend and jQuery. fn. extend actually have the same definitions.
Different callers lead to different functions of the two functions (for detailed mechanism, see article 3rd in this document ).
 
1. Who has jQuery. fn. extend extended? JQuery. fn. extend ({});
In the preceding statement, the caller is jQuery. fn. Who is jQuery. fn?
See the following jQuery source code:

Var // Define a local copy of jQuery // jQuery is the jQuery () function, that is, the $ () function jQuery = function (selector, context) {// The jQuery object is actually just the init constructor 'enabled' // The return value of init, that is, the return value of jQuery // This line of code is analyzed in article 7th, which is equivalent: // var ret = {}; // jQuery. fn. init. apply (ret, selector, context, rootjQuery); // call the init method using ret as the context // ret. prototype = jQuery. fn. init. prototype; // jQuery. fn. init. prototype will be assigned to jQuery later. fn, the key sentence // return ret; return new jQuery. fn. init (selector, context, rootjQuery);}, // jQuery. fn is a reference to the jQuery prototype. The init function jQuery is defined in the prototype. fn = jQuery. prototype = {init: function (selector, context, rootjQuery ){//... // The array returned by the init function is this [0], this [1], which is the result of executing the selector return jQuery. makeArray (selector, this) ;}}; // Give the init function the jQuery prototype for later instantiation // set jQuery. set fn to jQuery and select jQuery. fn. init. prototype = jQuery. fn;

In short, jQuery. fn is the prototype object returned by the $ () function.

In the 2nd articles in the notes, we learned to add attributes or methods to the object's prototype, and the object will automatically obtain these methods.

 

2. Try 2.1 and extend the method.

Bill <script> jQuery. fn. extend ({greeting: function () {console. log ('Hi, buddy! I am hailong's friend '+ this. text () ;}}; $ (' # x'). greeting (); // Hi, buddy! I am hailong's friend Bill $. greeting (); // error: no such method </script>
2.2. Can attributes be extended?

BillSteven <script> jQuery. fn. extend ({lord: 'liuhailong', name: 'jquery object'}); console. log ($ ('# B '). lord); // output: liuhailongconsole. log ($ ('# B '). name); // output: jQuery Objectvar B =$ ('# B'), s =$ ('# s'); B. name = 'bill '; s. name = 'steven '; console. log (B. name, s. name); // output: Bill Steven </script>
As we look forward to: Perfect support.

3. What can I do? What is the purpose? You can use your imagination to implement any function you want!