After the jquery script is loaded on the page, jquery starts its own initialization process: Create jquery and jquery constructors and prototype functions and wait for them to be called. Let's analyze this process: 1. first, check whether jquery and $ are defined (to avoid conflicts with other JavaScript frameworks, which means that to avoid conflicts, you should make other frameworks load earlier than jquery ), rename it as _ jquery and _ $. and define the alias of jquery as $.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<HTML>
<Head>
<SCRIPT src = "prototype. js"> </SCRIPT>
<SCRIPT src = "jquery. js"> </SCRIPT>
<SCRIPT>
Jquery. noconflict ();
// Use jquery via jquery (...)
Jquery (document). Ready (function (){
Jquery ("Div"). Hide ();
});
// Use prototype with $ (...), etc.
$ ('Someid'). style. Display = 'none ';
</SCRIPT>
</Head>
<Body> </body>
</Html>
For more details, see.
Let's take a look at the specific steps. Code :
If (typeof jquery! = "Undefined ")
VaR _ jquery = jquery;
...
If (typeof $! = "Undefined ")
VaR _ $ =$;
Window. $ = jquery; 2. Define the construction and prototype functions of jquery. This process also defines the prototype alias FN: jquery. Prototype = jquery. fn. The prototype of jquery is coming out. The prototype of the jquery object includes many core methods and attributes:
Init
Current jquery version number
Size returns the Length attribute.
Length
Get
Pushstack
Each
... 3. defined evalscript Function 4. The extend method was unveiled. 5. an important attribute name expando is defined. If the jquery object needs to be cached, the object will be assigned the attribute named by this attribute, the value of this attribute is an incremental UUID value (For details, refer to the data method ).
VaR expando = "jquery" + (new date (). gettime (); 6. Now we use the extend method to define many jquery methods.
Note that it is not a method that defines jquery objects, because these methods can only be called in the form of jquery. noconflict. These methods include:
Noconflict
Isfunction
Isxmldoc
Globaleval
Each
Map
... 6. Start to identify the browser and Its Features
VaR useragent = navigator. useragent. tolowercase ();
Jquery. browser = {
Version: (useragent. Match (/. + (? : RV | it | Ra | IE) [\/:] ([\ D.] +)/) | []) [1],
Safari:/WebKit/. Test (useragent ),
Opera:/Opera/. Test (useragent ),
MSIE:/MSIE/. Test (useragent )&&! /Opera/. Test (useragent ),
Mozilla:/Mozilla/. Test (useragent )&&! /(Compatible | WebKit)/. Test (useragent)
};
VaR stylefloat = jquery. browser. MSIE? "Stylefloat": "cssfloat ";
Jquery. Extend ({
Boxmodel :! Jquery. browser. MSIE | document. compatmode = "css1compat ",
Stylefloat: jquery. browser. MSIE? "Stylefloat": "cssfloat ",
Props :{
"For": "htmlfor ",
"Class": "classname ",
"Float": stylefloat,
Cssfloat: stylefloat,
Stylefloat: stylefloat,
Innerhtml: "innerhtml ",
Classname: "classname ",
Value: "value ",
Disabled: "disabled ",
Checked: "checked ",
Readonly: "readonly ",
Selected: "selected ",
Maxlength: "maxlength"
}
})
7. Through the each method, many methods are easily simplified:
Jquery. Each ({
Parent: "A. parentnode ",
Parents: "jquery. dir (A, 'parentnode ')",
Next: "jquery. Nth (A, 2, 'nextsibling ')",
PREV: "jquery. Nth (A, 2, 'previussibling ')",
Nextall: "jquery. dir (A, 'nextsibling ')",
Prevall: "jquery. dir (A, 'previussibling ')",
Siblings: "jquery. sibling (A. parentnode. firstchild, )",
Children: "jquery. sibling (A. firstchild )",
Contents: "jquery. nodename (A, 'iframe ')? A. contentdocument | a.content+doc ument: jquery. makearray (A. childnodes )"
}, Function (I, n ){
Jquery. FN [I] = function (){
VaR ret = jquery. Map (this, N );
If (A & typeof A = "string ")
Ret = jquery. multifilter (A, RET );
Return this. pushstack (jquery. Unique (RET ));
};
});
Jquery. Each ({
Appendto: "APPEND ",
Prependto: "prepend ",
Insertbefore: "before ",
Insertafter: "after ",
Replaceall: "replacewith"
}, Function (I, n ){
Jquery. FN [I] = function (){
VaR A = arguments;
Return this. Each (function (){
For (var j = 0, Al = A. length; j <al; j ++)
Jquery (A [J]) [N] (this );
});
};
}); jquery. each ({
removeattr: function (key) {
jquery. ATTR (this, key, "");
This. removeattribute (key);
},
addclass: function (c) {
jquery. classname. add (this, c);
},
removeclass: function (c) {
jquery. classname. remove (this, c);
},
toggleclass: function (c) {
jquery. classname [jquery. classname. has (this, c )? "Remove": "add"] (This, c);
},
remove: function (a) {
If (! A | jquery. filter (A, [this]). r. length) {
jquery. removedata (this);
This. parentnode. removechild (this);
}< BR >},
empty: function () {
// clean up the cache
jquery ("*", this ). each (function () {jquery. removedata (this) ;}); While (this. firstchild)
This. removechild (this. firstchild );
}
}, Function (I, n ){
Jquery. FN [I] = function (){
Return this. Each (n, arguments );
};
}); Jquery. Each (["height", "width"], function (I, name ){
VaR n = Name. tolowercase ();
Jquery. FN [N] = function (h ){
Return this [0] = window?
Jquery. browser. Safari & self ["inner" + name] |
Jquery. boxmodel & math.max(document.doc umentelement ["client" + name], document. Body ["client" + name]) |
Document. Body ["client" + name]:
This [0] = document?
Math. Max (document. Body ["scroll" + name], document. Body ["offset" + name]):
H = undefined?
(This. length? Jquery.css (this [0], n): NULL ):
This.css (n, H. constructor = string? H: H + "PX ");
};
});
8. The extend method adds the method for parsing the expression part to the jquery class:
VaR chars = jquery. browser. Safari & parseint (jquery. browser. Version) <417?
"(? : [\ W * _-] | \\\\.)":
"(? : [\ W \ u0128-\ Uffff * _-] | \\\\.)",
Quickchild = new Regexp ("^> \ s * (" + chars + "+ )"),
Quickid = new Regexp ("^ (" + chars + "+) (#) (" + chars + "+ )"),
Quickclass = new Regexp ("^ ([#.]?) ("+ Chars + "*)");
Jquery. Extend ({
Expr :{
"": "M [2] = '*' | jquery. nodename (a, m [2])",
"#": "A. getattribute ('id') = m [2]",
...
9. Now, define the jquery. event object:
Jquery. event = {
Add: Function
Guid: 1,
Global :{}
Remove: Function
Trigger: Function
Handle: Function
Fix: Function
} 10. Start to define the Event-related methods of jquery objects.
Jquery. FN. Extend ({
BIND: Function
One: Function
...
}) 11 defines how jquery starts Dom load.
Jquery. Extend ({
Isready: false
Readylist: []
Ready: function (){}
} 12 through the each method, very skillful implementation of binding event processing
Jquery. Each ("Blur, focus, load, resize, scroll, unload, click, dblclick," +
"Mousedown, mouseup, mousemove, Mouseover, mouseout, change, select," +
"Submit, keydown, keypress, keyup, error"). Split (","), function (I, O ){
Jquery. FN [O] = function (f ){
Return F? This. BIND (O, F): This. Trigger (O );
};
}); 13 define the bindready Method 14. Ajax Method for jquery object implementation 15. Through the each method, it is very skillful to bind Ajax events.
Jquery. Each ("ajaxstart, ajaxstop, ajaxcomplete, ajaxerror, ajaxsuccess, ajaxsend". Split (","), function (I, O ){
Jquery. FN [O] = function (f ){
Return this. BIND (O, F );
};
}); The Ajax method of jquery class is implemented at the beginning of 16. Definition of interface effect methods such as show hide of the 17jquery object Definition of the 18queue Function
VaR queue = function (ELEM, type, array ){
If (! ELEM)
Return;
VaR q = jquery. Data (ELEM, type + "queue ");
If (! Q | array)
Q = jquery. Data (ELEM, type + "queue ",
Array? Jquery. makearray (array): []);
Return Q;
}; 19jquery object dequeu method implementation
Jquery. FN. dequeue = function (type ){
Type = type | "FX "; Return this. Each (function (){
VaR q = Queue (this, type ); Q. Shift (); If (Q. length)
Q [0]. Apply (this );
});
};
20. jquery speed method, easing object, timers array, and FX builder Definitions Implementation of prototype definition of 21jquery. FX's prototype Function 22jquery. FX. Step object definition 23. Implementation of jquery. Offset Method |
