jquery working principle parsing and source code examples

in the opening statement of jquery, there is a very important word: jquery is designed to change the way JavaScript is encoded. From this paragraph you can see that jquery itself is not a UI component library or other generic Ajax class library. JQuery changes the way JavaScript is encoded!So how does it make its declaration??here, use the following short-run process:1Find (Create) jquery object: $ ("selector");2the method of invoking the JQuery object completes the work we need to accomplish: $ ("selector"). Doourwork (); Ok,jquery is the simplest coding logic that can be said to change the way JavaScript is encoded. These two steps are the coding logic core of jquery!to achieve this concise coding, it is important to create a jquery object. Therefore, the DOM element lookup ability of jquery is quite strong. In addition, the methods of jquery objects are certainly limited, and the limited methods cannot meet the growing demands of each, so The ability to extend the JQuery object method must be provided. Powerful DOM element lookup capabilities, as well as arbitrary method expansion, these two points is the core of jquery!A simple example to illustrate how jquery works:<! DOCTYPE HTML PUBLIC "-// the//DTD XHTML 1.0 Transitional//EN ""HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">//www.w3.org/1999/xhtml ">//www.baidu.com ">baidu</a></body> $ (function () {$ ("a"). Click (function (e) {//1) Find $ ("a"); 2) JQuery object event click;3) JQuery object method Hide         $( This). Hide ("slow"); return false; }); }); </script>jquery has a \ "config" idea, which makes the object's properties/settings such as events are easy to understand and simple to initialize with a drag component: $ (document). Ready (function () {$ (' #drag1). Draggable ({handle: "Ax",//Property Settingsonstart:function (el,x,y) {//Event Listener Settings             }         }); } ); As you can see, $ ("#drag1 ″) is to find and create a jquery object, and then call the Draggable method to do a drag-and-drop initialization, and when this method is called, pass a \" config "object for the initialization configuration of the drag operation. This" configuration "idea greatly simplifies some coding steps , and quite intuitive and understandable. Here are three questions and answers:1) Q: Why is the jquery object returned after $ (selector)?answer: From the source code of jquery, we can know: var $= jquery. So when we do $ (selector), it's actually jquery (selector), creating a JQuery object. Of course the correct wording should be this: var JQ =New$ (selector); while jquery uses a small trick to avoid the outside of new, inside the jquery method:if(Window = = This)return NewjQuery (selector);2) Q: After creating a jquery object, we can write $ (selector). Each (function (index) {...}); Do the traversal operation?A: In fact, when the jquery (selector) method is called, inside the jquery (selector) method, the final return is an array:return  This. SetArray (a); The inside of each method body is a for loop, which is called in the body of the loop: Method.call ( This[I],i]. 3) Q: Why can jquery do the plug-in extension of jquery object Properties/Methods/events?A : If you have some javasciprt knowledge of object-oriented, you will know that the extended properties on the Jquery.prototype prototype object/methods and events that will give jquery the object \ "Extend". Based on this, jquery is written like this: Jquery.fn =Jquery.prototype. So, when we extend a plugin feature, the following: JQuery.fn.check=function () {return  This. each (function () { This. checked =true; }); }; is actually: JQuery.prototype.check=function () {return  This. each (function () { This. checked =true; }); }; In summary, jquery brings us a concise and convenient coding model (1> creating a JQuery object;2> directly using the properties/methods of the JQuery object/event), a powerful DOM element finder ($), plug-in programming interface (JQUERY.FN), and plug-in initialization of the "config" Object idea. Attached: Implementing your own JQuery<! DOCTYPE HTML PUBLIC "-// the//DTD XHTML 1.0 Transitional//EN ""HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">//www.w3.org/1999/xhtml ">//implement your own Myquery frameworkvar myquery=function (selector) {if(Window = = This)return Newmyquery (selector); //here only the DOM type of simple lookup, hehevar doms=document.getElementsByTagName (selector); var arr= [];  for(var i=0; i<doms. length; i++) {Arr.push (Doms.item (i)); }     return  This. SetArray (arr);} MyQuery.prototype.setArray=function (arr) { This. length = 0; [].push.apply ( This, arr); return  This; } Myquery.fn=Myquery.prototype; var $=myquery; //plug-in extension 1) eachMyQuery.fn.each=function (method) { for(Var i=0,l= This. length; i<l; i++) {Method.call ( This[I],i]; } } //Plugin Extension 2) showMyQuery.fn.show=function () { This. Each (function (i) {alert (i+ ":" + This. id+ ":" + This. InnerHTML); }); } //Debugger$ ("div"). Show ();</script></doms></script>Tags:none

jquery working principle parsing and source code examples