In diesem Artikel erfahren Sie, wie Sie die Funktion $() in jQuery verwenden. Ich hoffe, dass er allen helfen kann.
jQuerys $()
Wenn wir jQuery verwenden, verwenden wir im Allgemeinen immer $() und $ zeigt auf das globale jQuery, also rufen wir tatsächlich jQuery() auf Das Ergebnis ist ein zurückgegebenes jq-Objekt, aber wir müssen new nicht verwenden, um das Objekt zu erstellen, wenn wir es verwenden, sodass wir spekulieren können, dass $() eine Factory-Funktion ist. Die Definition von
$()
jQuery() ist in src/core.js definiert. Wenn return new jQuery() in dieser Methode aufgerufen wird, fällt es in eine Schleife, also ist init() aufgerufen, um beim Aufbau der Instanz zu helfen. Es ist erwähnenswert, dass jQuery.fn auf /src/core.js in jQuery.prototype verweist.
// Define a local copy of jQuery
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init( selector, context );
}Nach dem Login kopieren
Die Definition der Init-Methode
jQuery.fn.init() ist in src/core/init.js definiert. Die Methode akzeptiert drei Parameter selector, context, root. Bestimmen Sie innerhalb der Methode zunächst, ob Parameter vorhanden sind, und geben Sie false zurück, wenn keine Parameter vorhanden sind.
init = jQuery.fn.init = function( selector, context, root ) {
var match, elem;
// HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this;
}
// Method init() accepts an alternate rootjQuery
// so migrate can support jQuery.sub (gh-2101)
root = root || rootjQuery;
// Handle HTML strings
// < xxx > 或 $(#id)
if ( typeof selector === "string" ) {
if ( selector[ 0 ] === "<" &&
selector[ selector.length - 1 ] === ">" &&
selector.length >= 3 ) {
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ];
} else {
// match[1]是html字符串，match[2]是匹配元素的id
// selector是id选择器时match[1]为undefined，match[2]是匹配元素的id
// selector是html字符串，match[1]是html字符串，match[2]为undefined
match = rquickExpr.exec( selector );
}
// Match html or make sure no context is specified for #id
// 匹配结果非空 且 存在匹配字符串或context空时执行
// 未为id选择器限定查找范围
if ( match && ( match[ 1 ] || !context ) ) {
// HANDLE: $(html) -> $(array)
if ( match[ 1 ] ) {
context = context instanceof jQuery ? context[ 0 ] : context;
// Option to run scripts is true for back-compat
// Intentionally let the error be thrown if parseHTML is not present
// 生成dom节点并合并到this上
jQuery.merge( this, jQuery.parseHTML(
match[ 1 ],
context && context.nodeType ? context.ownerDocument || context : document,
true
) );
// HANDLE: $(html, props)
// 遍历props，添加属性或方法
if ( rsingleTag.test( match[ 1 ] ) && jQuery.isPlainObject( context ) ) {
for ( match in context ) {
// Properties of context are called as methods if possible
if ( jQuery.isFunction( this[ match ] ) ) {
this[ match ]( context[ match ] );
// ...and otherwise set as attributes
} else {
this.attr( match, context[ match ] );
}
}
}
return this;
// HANDLE: $(#id)
// 处理id选择器且无context
} else {
elem = document.getElementById( match[ 2 ] );
if ( elem ) {
// Inject the element directly into the jQuery object
this[ 0 ] = elem;
this.length = 1;
}
return this;
}
// HANDLE: $(expr, $(...))
// selector是选择器 context为undefined或context.jquery存在时执行。
// $(#id,context)或$(.class [, context])等情况
} else if ( !context || context.jquery ) {
return ( context || root ).find( selector );
// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
return this.constructor( context ).find( selector );
}
// HANDLE: $(DOMElement)
// 传入DOM元素
} else if ( selector.nodeType ) {
this[ 0 ] = selector;
this.length = 1;
return this;
// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
return root.ready !== undefined ?
root.ready( selector ) :
// Execute immediately if ready is not present
selector( jQuery );
}
return jQuery.makeArray( selector, this );
};Nach dem Login kopieren
Selektor ist eine Zeichenfolge
Wenn ein selector nicht leer ist, behandeln Sie zunächst den Fall, in dem selector eine Zeichenfolge ist, die in die HTML-Zeichenfolge $(selector) und und $(expr, $(...))Vier Arten. Wenn $(expr, context) ein Zeichenfolgentyp ist, wird der generierte Dom-Knoten basierend auf der eingehenden Zeichenfolge zurückgegeben. Verwenden Sie während der Verarbeitung zunächst den regulären Abgleich, um die HTML-Zeichenfolge oder -ID zu finden. Wenn das Übereinstimmungsergebnis nicht leer ist und eine übereinstimmende Zeichenfolge vorhanden ist oder der Kontext leer ist, bedeutet dies, dass selector eine HTML-Zeichenfolge oder selctor ein ID-Selektor ist und der Suchkontext nicht eingeschränkt ist. Bestimmen Sie bei der Verarbeitung von HTML-Zeichenfolgen zunächst, in welches Dokument der generierte Knoten eingefügt werden soll (d. h. der Parameter selector). Standardmäßig wird das jQuery-Dokument geladen, context aufgerufen, um einen Dom-Knoten zu generieren und hinzuzufügen $.parseHTML(); wenn this ein Objekt ist, dann ist es der Aufruf von context, der die Attribute oder Methoden an den Dom anhängt und das generierte jq-Objekt zurückgibt. Wenn der Aufruf von $(html, props) übereinstimmt und $(#id) leer ist, wird context direkt aufgerufen, um das Element zu finden. Wenn das Element vorhanden ist, zeigt document.getElementById auf das Element und das Suchergebnis wird zurückgegeben. this[0]
Wenn
kein ID-Selektor ist oder selector nicht leer ist, rufen Sie context auf, um zu suchen. Wenn find nicht leer ist, starten Sie die Suche von context und finden Sie die Ergebnisse als Rückgabewert. context
Selektor ist ein DOM-Element
Behandeln Sie dann den Fall, in dem der eingehende Parameter ein Dom-Element ist. Zeigen Sie mit
auf das Dom-Element, setzen Sie die JQ-Objektlänge auf 1 und geben Sie this[0] zurück. this
Selektor ist die Funktion
, die
schließlich verarbeitet. Wenn $(function(){}) vorhanden ist, wird die eingehende Funktion ready aufgerufen. Andernfalls wird jQuery übergeben und die Funktion wird direkt aufgerufen , Aufruf von ready(f()). Verwenden Sie das Ergebnis als Rückgabewert. makeArray
Ändern Sie den Prototyp von init
init = jQuery.fn.init = function( selector, context, root ) {
...
}
// Give the init function the jQuery prototype for later instantiation
init.prototype = jQuery.fn;Nach dem Login kopieren
Definieren Sie die Methode für den Prototyp
und verweisen Sie dann den Prototyp von init auf den Prototyp von jQuery Die erstellte Instanz ist init, nicht init.prototype, sondern eine Instanz von init und nicht eine Instanz von jQuery. Verschiedene Variablen und Methoden, die auf jQuery.fn in core.js definiert sind, können nicht aufgerufen werden. jQuery.fn
Verwandte Empfehlungen:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Funktion $() in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
