//Add instance properties and methods
jQuery.fn = jQuery.prototype = {
// Version, usage: $(). jquery pop up the version of jquery currently introduced
jquery: core_version,
// Correction of pointing problem (detailed explanation later)
constructor: jQuery,
// Initialization and parameter management
init: function( selector, context, rootjQuery ) {
var match, elem;
// If it is written as $("", "$(null), $(undefined), $(false), it will be returned directly
if ( !selector ) {
return this;
}
// Processing strings
if ( typeof selector === "string" ) {
// If it is such $('< li >') or $('< li > 1 < / Li > < li > 2 < / Li >')
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
// Match = [null, '< li >', null]; or match = [null, '< li > 1 < / Li > < li > 2 < / Li >', null];
match = [ null, selector, null ];
//If it is $('ාdiv1') $('. Box') $('div ') $(' ාdiv1 div.box ')
} else {
//$('.box') $('div') $('#div1 div.box') match = null;
//$('#div1') match = ['#div1',null,'div1'];
//$('<li>hello') match = ['<li>hello','<li>',null];
match = rquickExpr.exec( selector ); //More on exec()
}
// The context of $('< li >') $('#div1') / $('#div1') is empty, that is, the context is false
if ( match && (match[1] || !context) ) {
if ( match[1] ) {
// If $('< li >', document) fills in the second object and the second object is native, the object is returned directly; $('< li >', $(document)) if the second object returned is jQuery, it is converted to native object
context = context instanceof jQuery ? context[0] : context;
// 1. The jQuery.parseHTML() function is used to parse the HTML string into the corresponding DOM node array; use an HTML string to create an array of DOM nodes
jQuery.merge( this, jQuery.parseHTML(
match[1], //HTML string to be parsed and converted to DOM node array
//Specifies the document in which the element is created. The default is the document of the current document. It may be iframe
context && context.nodeType ? context.ownerDocument || context : document,
//true,Boolean type specifies whether the script is included in the incoming HTML string. The default is false
true
) );
// 1. Rsingletag.test (match [1]) matches a single label, only < li > or < li > < li >, not others
// 2. The jquery.isplainobject (context) function is used to determine whether the specified parameter is a pure object. {} or new Object() or {name: "CodePlayer"}
if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
for ( match in context ) {
// jQuery.isFunction is used to determine whether the parameter is a function
if ( jQuery.isFunction( this[ match ] ) ) {
//If it is a function, call it directly, for example: $('< li > < li >', {Title: 'Hi', HTML: 'ABCD', CSS: {background: 'Red'}). Appendto ('ul '); where HTML:' ABCD 'is equivalent to this.html('abcd')
this[ match ]( context[ match ] );
} else {
//Add properties directly if it's not a function
this.attr( match, context[ match ] );
}
}
}
return this;
// $('× div1') select element
} else {
elem = document.getElementById( match[2] );
if ( elem && elem.parentNode ) {
// Inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;
}
this.context = document;
this.selector = selector;
return this;
}
} else if ( !context || context.jquery ) {
return ( context || rootjQuery ).find( selector );
} else {
return this.constructor( context ).find( selector );
}
//Handle DOM elements, $(this),$(document).
//The nodeType property returns the node type of the specified node as a numeric value. Returns 1 for element nodes and 2 for attribute nodes
} else if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;
// Processing functions
} else if ( jQuery.isFunction( selector ) ) {
// If it is a function $(function() {}), return $(document).ready(function() {});
return rootjQuery.ready( selector );
}
// Handling empty objects or arrays
if ( selector.selector !== undefined ) {
this.selector = selector.selector;
this.context = selector.context;
}
// The jQuery.makeArray() function is used to convert an array like object into a real array object
return jQuery.makeArray( selector, this );
},
// selector stores the selection string;
selector: "",
// Length the length of this object
length: 0,
// toArray special array
toArray: function() {
return core_slice.call( this );
},
// get to native collection
get: function( num ) {
return num == null ?
// Return a 'clean' array
this.toArray() :
// Return just the object
( num < 0 ? this[ this.length + num ] : this[ num ] );
},
// pushStack JQ object stack (first in first out)
pushStack: function( elems ) {
// Build a new jQuery matched element set
var ret = jQuery.merge( this.constructor(), elems );
// Add the old object onto the stack (as a reference)
ret.prevObject = this;
ret.context = this.context;
// Return the newly-formed element set
return ret;
},
// each traversal set
each: function( callback, args ) {
return jQuery.each( this, callback, args );
},
// DOM load interface
ready: function( fn ) {
jQuery.ready.promise().done( fn );
return this;
},
// Collection interception
slice: function() {
return this.pushStack( core_slice.apply( this, arguments ) );
},
// First item of collection
first: function() {
return this.eq( 0 );
},
// Last entry of collection
last: function() {
return this.eq( -1 );
},
// Specified item of collection
eq: function( i ) {
var len = this.length,
j = +i + ( i < 0 ? len : 0 );
return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
},
// Return to new collection
map: function( callback ) {
return this.pushStack( jQuery.map(this, function( elem, i ) {
return callback.call( elem, i, elem );
}));
},
// Returns the previous state of the collection
end: function() {
return this.prevObject || this.constructor(null);
},
// Internal use of push, sort and splice
push: core_push,
sort: [].sort,
splice: [].splice
};Partial explanation
1,constructor: jQuery
Example:
// js source code is generated automatically after the constructor is created
function Aaa(){};
Aaa.prototype.constructor = Aaa;
var a = new Aaa();
alert(a.constructor); // function Aaa(){};
Aaa.prototype.constructor = Array;
alert(a.constructor); // function Array() { [native code] }
Aaa.prototype = {
constructor : Aaa,
name : 'hello',
age : 30
};
var a1 = new Aaa();
alert(a1.constructor); // function Aaa(){};This constructor property is very easy to be accidentally modified, so jquery needs to fix the point
2,match = rquickExpr.exec( selector )
Example:
var rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/; var selector = "#div1"; var match = rquickExpr.exec( selector ); console.log(match); //match = ['#div1',null,'div1'];
The exec() method is used to retrieve the matching of regular expressions in strings. If it is matched, an array containing the results will be returned. If it is not matched, a null will be returned;
match is an array, the 0th element is the text matching the regular expression, the 1st element is the text matching the 1st subexpression of the regular expression (if any), the 2nd element is the text matching the 2nd subexpression (if any), the 3rd element is the text matching the 3rd subexpression (if any), here is the ID of the element, excluding# .
3,jQuery.makeArray()
var aDiv = document.getElementsByTagName('div');
aDiv is not a real array, you can use $. makeArray(aDiv) to turn it into an array; $. makeArray(aDiv,{length:0}) to turn it into an object
$([]) $({})