Detaillierte Erläuterung von Codebeispielen für verschiedene Aufrufmethoden von Selektor und Kontext in jQuery

Zuerst geben wir den folgenden HTML-Code:

<p id="parent" class="parent">
	 <p class="child">
	  child1
	</p>
	<p class="child">
	child2
	</p>
</p>
<p id="parent1" class="parent">
	 <p class="child">
	  child1
	</p>
	<p class="child">
	child2
	</p>
</p>

Aufrufmethode 1: Der zweite Parameterkontext ist das DOM-Element

var doms=$(".child",$("#parent")[0]);
console.log(doms);

Zu diesem Zeitpunkt ist der zweite Parameter DOM-Objekt, print [p.child, p.child, prevObjekt: jQuery.fn.init[1], Kontext: p#parent, Selektor: „.child“]
Aufrufmethode 2: Der zweite Parameterkontext ist das jQuery-Objekt

var doms=$(".child",$($("#parent")[0]));
console.log(doms);

Zu diesem Zeitpunkt ist das Druckergebnis dasselbe wie im ersten Fall oben, [p.child, p.child, prevObject: jQuery .fn.init[1], Kontext: p#parent, Selektor: „.child“]
Aufrufmethode 3: Der zweite Parameter ist ein DOM-Array

var doms=$(".child",[document.getElementById("#parent"),document.getElementById("#parent1")]) 
console.log(doms);

Aufrufmethode 4 : Der zweite Parameter ist ein Array von jQuery-Objekten

var doms=$(".child",$(".parent")) 
console.log(doms);

Das Ergebnis dieser Methode ist genau das gleiche wie das der dritten Methode!
Aufruf von Methode 5: Der übergebene Parameter ist eine Funktion, die Folgendes tut Rufen Sie

 $(function()
  {
    console.log("dom ready");
  })

auf, wenn die Ready-Funktion aufgerufen wird. Wir analysieren nun diese Situationen anhand des Quellcodes:

Wenn das DOM übergeben wird

else if ( selector.nodeType ) {
		this.context = this[0] = selector;
		this.length = 1;
		return this;
		// HANDLE: $(function)
		// Shortcut for document ready
		}

Wenn ein DOM-Element übergeben wird, platzieren Sie das Element direkt auf dem jQuery-Objekt und erhöhen Sie die Länge!

Wenn ein jQuery-Objekt übergeben wird

if ( selector.selector !== undefined ) {
			this.selector = selector.selector;
			this.context = selector.context;
		}

Wenn ein jQuery-Objekt übergeben wird übergeben, dann werden der Selektor und der Kontext des Parameters jQuery direkt in das neu erstellte jQuery-Objekt gekapselt. Die aufrufende Methode ist wie $($(''))!

Wenn eine Funktion übergeben wird

 else if ( jQuery.isFunction( selector ) ) {
			return typeof rootjQuery.ready !== "undefined" ?
			rootjQuery.ready( selector ) :
				// Execute immediately if ready is not present
				selector( jQuery );
		}

Wenn eine Funktion übergeben wird, platzieren Sie sie direkt in $(document).ready() und warten Sie auf die Ausführung. Wenn es keine fertige Funktion gibt, führen Sie sie direkt aus (wenn das jQuery-Framework verwendet wird). , fertig vorhanden!)
Wenn ein DOM-Array oder ein jQuery-Objekt übergeben wird

return jQuery.makeArray( selector, this );

Wir können alle Parameter über jQuery.makeArray in ein Objekt kapseln, aber der zweite Parameter dieser Funktion ist ein Array Objekt standardmäßig, aber das jQuery-Objekt wird hier übergeben, dann ist das zurückgegebene Endergebnis das jQuery-Objekt. Daher kapseln wir auf diese Weise das gesamte von uns übergebene DOM-Array oder jQuery-Objekt in ein neues jQuery-Objekt und geben es wie folgt zurück:

 var $doms=$([document.getElementById('ql'),document.getElementById('fkl')]);
   //把上面的DOM数组封装到新创建的jQuery对象上
   console.log($doms);

Die folgende Aufrufmethode lautet Unsere am häufigsten verwendete Methode, die den Kontext des ausgewählten Objekts enthält:

              else if ( !context || context.jquery ) {
				return ( context || rootjQuery ).find( selector );
			// HANDLE: $(expr, context)
			// (which is just equivalent to: $(context).find(expr)
			} else {
				return this.constructor( context ).find( selector );
			}

Diese Methode ist wie $('li',$('ul')) Wenn der zweite Parameter ein jQuery-Objekt ist, Rufen Sie dann die find-Methode direkt auf, andernfalls kapseln Sie das DOM-Objekt des zweiten Parameters in ein jQuery-Objekt und rufen Sie dann die find-Methode auf, um es zu finden:

 var doms=$(".child",$(".parent")) ;
   //这时候我们会选择class为parent元素下的所有的class为child的元素集合
   //作为jQuery对象返回
   console.log(doms);

Natürlich ist der zweite Parameter, den wir übergeben haben, ein jQuery-Objekt, dann haben wir die Suchmethode von Sizzle aufgerufen, um eine Abfrage durchzuführen. Wenn der zweite Parameter ein DOM-Array ist, wird das DOM-Array ebenfalls in eine jQuery gekapselt Objekt. Dann verwenden Sie dies als Kontext für die Abfrage!

An dieser Stelle möchte ich diese aufrufende Methode erwähnen (der zweite Parameter kann ein DOM-Array sein)

var doms=$(".child",$(".parent")) 
console.log(doms);

Was wird übergeben? Diesmal ist es jQuery. Das Objekt verfügt über eine Suchinstanzmethode zum Vervollständigen (rufen Sie zum Vervollständigen Sizzle auf). Was zurückgegeben wird, ist also eine Sammlung aller untergeordneten Elemente, die den Selektor jedes DOM-Objekts im DOM-Array erfüllen. Dies ist jedoch Deduplizierung!

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Codebeispielen für verschiedene Aufrufmethoden von Selektor und Kontext in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!