Explication détaillée des exemples de code pour plusieurs méthodes d'appel de sélecteur et de contexte dans jQuery-js tutoriel-php.cn

Explication détaillée des exemples de code pour plusieurs méthodes d'appel de sélecteur et de contexte dans jQuery

伊谢尔伦

Libérer： 2017-06-19 10:36:36

original

1209 Les gens l'ont consulté

Nous donnons d'abord le code HTML suivant :

<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>

Copier après la connexion

Méthode d'appel 1 : Le deuxième paramètre contexte est l'élément DOM

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

Copier après la connexion

A ce moment le deuxième paramètre est Objet DOM, print [p.child, p.child, prevObject : jQuery.fn.init[1], contexte : p#parent, sélecteur : ".child"]
Méthode d'appel 2 : Le deuxième paramètre de contexte est l'objet jQuery

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

Copier après la connexion

A ce moment, le résultat de l'impression est le même que le premier cas ci-dessus, [p.child, p.child, prevObject : jQuery .fn.init[1], contexte : p#parent, sélecteur : ".child"]
Méthode d'appel 3 : Le deuxième paramètre est un tableau DOM

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

Copier après la connexion

Méthode d'appel 4 : Le deuxième paramètre est un tableau d'objets jQuery

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

Copier après la connexion

Le résultat de cette méthode est exactement le même que la troisième méthode !
Appel de la méthode 5 : Le paramètre passé est une fonction, qui va Appelez

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

Copier après la connexion

lorsque la fonction ready est appelée. Nous analysons maintenant ces situations à partir du code source :

Si le DOM est passé dans

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

Copier après la connexion

<🎜. >Si un élément DOM est transmis, placez l'élément directement sur l'objet jQuery et augmentez la longueur !

Si un objet jQuery est transmis

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

Copier après la connexion

Si un objet jQuery est passé dans , alors le sélecteur et le contexte du paramètre jQuery sont directement encapsulés dans l'objet jQuery nouvellement créé ! La méthode d'appel est comme $($('')) !

Si une fonction est passée dans

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

Copier après la connexion

Si une fonction est passée, placez-la directement dans $(document).ready() et attendez l'exécution. S'il n'y a pas de fonction prête, exécutez-la directement (si le framework jQuery est utilisé. , prêt existe !)

Si un tableau DOM ou un objet jQuery est passé

return jQuery.makeArray( selector, this );

Copier après la connexion

Nous pouvons encapsuler tous les paramètres dans un objet via jQuery.makeArray, mais le deuxième paramètre de cette fonction est un tableau object par défaut, mais l'objet jQuery est transmis ici, le résultat final renvoyé est l'objet jQuery. Par conséquent, de cette manière, nous encapsulons tout le tableau DOM ou l'objet jQuery que nous avons transmis dans un nouvel objet jQuery et le renvoyons ! L'appel de cette manière est le suivant :

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

Copier après la connexion

La méthode d'appel suivante est Notre méthode la plus couramment utilisée, qui contient le contexte de l'objet sélectionné :

              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 );
			}

Copier après la connexion

Cette méthode est comme $('li',$('ul')) Si le deuxième paramètre est un objet jQuery, Appelez ensuite la

méthode find directement, sinon encapsulez l'objet DOM du deuxième paramètre dans un objet jQuery puis appelez la méthode find pour le trouver ! Cette méthode d'appel est la suivante :

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

Copier après la connexion

Évidemment, le deuxième paramètre que nous avons transmis est un objet jQuery, puis nous avons appelé la méthode find de Sizzle pour effectuer une

requête Si le deuxième paramètre est un tableau DOM, le tableau DOM sera également encapsulé dans un jQuery. object. Ensuite, utilisez-le comme contexte pour interroger !

Pour le moment, je souhaite mentionner cette méthode d'appel (le deuxième paramètre peut être un tableau DOM)

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

Copier après la connexion

Ce qui est passé à cette fois c'est jQuery L'objet a une méthode de recherche d'instance à terminer (appelez Sizzle pour terminer), donc ce qui est renvoyé est une collection de tous les éléments enfants qui satisfont le sélecteur de chaque objet DOM dans le tableau DOM, mais c'est de la déduplication !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!