Java Programmer's JavaScript learning notes (11--jquery-at "object" level)

Plan to complete this note in the following order:
1. Philosophy.
2. Attribute copying and inheritance.
3. This/call/apply.
4. Closure/getter/setter.
5. prototype.
6. Object-oriented simulation.
7. The basic mechanism of jquery.
8. jquery Selector.
9. jquery Tool method.
Jquery-expands at the "class" level.
Jquery-is expanded at the "object" level.
jquery-extension Selector.
JQuery UI.
14. Extend the jquery UI.
This is the 11th note, we will extend the function of the returned object to enrich its properties and functions to meet our needs.
In the 9th chapter (http://blog.csdn.net/stationxp/article/details/40480185) we learned that Jquery.extend and jQuery.fn.extend actually define the same.
The difference between the caller and the two function (see the 3rd note in this paper).
In a previous article we studied Jquery.extend, this article focuses on JQuery.fn.extend.

/*
Author Blog: Http://blog.csdn.net/stationxp
Author Micro-Blog: http://weibo.com/liuhailong2008
Reproduced please obtain the consent of the author
*/


1. Who has jQuery.fn.extend expanded? JQuery.fn.extend ({});
Who is JQUERY.FN,JQUERY.FN the above statement caller?
Look at the following jquery source code:

var//Define A local copy of jquery//jquery is jquery () This function, ie $ () this function jQuery = function (selector, context) {//the jquery object is actually just the return value of the Init constructor ' enhanced '//init, that is, the return value of jquery//In the 7th chapter we analyzed this line of code, equivalent to://var ret = {};//Jqu Ery.fn.init.apply (ret,selector, context, rootjquery);//use RET as the context to invoke the Init method//Ret.prototype = JQuery.fn.init.prototype; JQuery.fn.init.prototype will then be assigned a value of Jquery.fn, this good key//return Ret;return new JQuery.fn.init (selector, context, rootjquery);},//Jquery.fn is a reference to the JQuery prototype, which defines the init function Jquery.fn = Jquery.prototype = {Init:function (selector, context, Rootjquery) {//...//init function returns the array returned by This[0], this[1], is the result of executing the selector return Jquery.makearray (selector, this);}};/ /Give The INIT function The jquery prototype for later instantiation//set Jquery.fn to jQuery select jQuery.fn.init.prototype = JQ Uery.fn;

The above code, in short, Jquery.fn is the $ () function that returns the value of the prototype object.

In the 2nd chapter of the note we have learned that adding properties or methods to the object's prototype will automatically get those methods.

2, try 2.1, expand the method

<div id= ' x ' >bill</div><script>jquery.fn.extend ({greeting:function () {console.log (' Hi, buddy! I am hailong\ ' friend ' + this.text ());}); $ (' #x '). Greeting ();//Hi, buddy! I am Hailong's friend bill$.greeting ();//error:no such method</script>

2.2. Can I extend the properties?

<div id= ' B ' >bill</div><div id= ' s ' >steven</div><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 expect: perfect support.

3. What can I do? What's the use? You can implement any function you want to achieve, play your imagination!

Java Programmer's JavaScript learning notes (11--jquery-at "object" level)