Analyse de quatre questions sur la fonction .grep() de jQuery

Question 1 : Quel est le code source de jQuery.grep ?

//grep函数,第三个参数表示是否根据fn的结果取反！
grep: function( elems, callback, invert ) {
var callbackInverse,
matches = [],
i = 0,
//保存数组个数
length = elems.length,
//对传入的第二个参数取反，true变成false，false变成true
//如果invert为false，即!inverse为true,那么直接把函数返回true的元素加入，所以期望callbackExpect的就是true
callbackExpect = !invert;
// Go through the array, only saving the items
// that pass the validator function
for ( ; i < length; i++ ) {
//如果invert是false,表示不取反，那么如果fn返回true，就直接加入进去matches数组
//获取回调函数结果的返回值的取反的结果
callbackInverse = !callback( elems[ i ], i );
if ( callbackInverse !== callbackExpect ) {
matches.push( elems[ i ] );
}
}
return matches;
}

Question 2 : Quelles sont les méthodes d'appel de jQuery.grep ?

Dans la fonction winnow

   if ( qualifier.nodeType ) {
		return jQuery.grep( elements, function( elem ) {//没有第三个参数，表示获取执行函数后返回为true元素在结果数组中
			return ( elem === qualifier ) !== not;
		});

	}

Dans la fonction winnow, il y a aussi un appel

return jQuery.grep( elements, function( elem ) {
		return ( jQuery.inArray( elem, qualifier ) >= 0 ) !== not;<span style="font-family: Arial, Helvetica, sans-serif;">//没有第三个参数，表示获取执行函数后返回为true元素在结果数组中</span>
	});

ou dans la méthode winnow

	return jQuery.grep( elements, function( elem, i ) {
			/* jshint -W018 */
			return !!qualifier.call( elem, i, elem ) !== not;<span style="font-family: Arial, Helvetica, sans-serif;">//没有第三个参数，表示获取执行函数后返回为true元素在结果数组中</span>
		});

et dans jQuery.buildFragment,

       jQuery.grep( getAll( nodes, "input" ), fixDefaultChecked );

est appelé. Cette méthode utilise Définir l'attribut defaultChecked de tous les éléments d'entrée sur le même que vérifié

// Used in buildFragment, fixes the defaultChecked property
var rcheckableType = (/^(?:checkbox|radio)$/i);
function fixDefaultChecked( elem ) {
	if ( rcheckableType.test( elem.type ) ) {
		elem.defaultChecked = elem.checked;//这里没有明确返回真或者假，所以他只是用来修改元素，而不再保存修改后的数组!
	}
}

Question 3 : Quelle est la fonction de la méthode jQuery.grep ?

Si le troisième paramètre n'est pas passé dans ce cas, cela signifie que nous voulons renvoyer les éléments dont le résultat est vrai après avoir appelé la fonction de rappel, donc la fonction de jQuery.grep est de filtrer uniquement les éléments qui répondent à des spécifications spécifiques. les conditions apparaîtront dans le tableau de résultat ! Rappelez-vous : Cette fonction La valeur de retour est un tableau !
Nous utilisons l'exemple suivant pour analyser comment sélectionner l'élément dont l'identifiant et la classe sont tous deux père

 <p class="father" id="father" style="background-color:red;height:400px;background-color:#ccc;">  
</p>  
 <p class="father" style="background-color:red;height:400px;background-color:#ccc;">  
</p>

Partie JS

     //对每一个元素进行筛选，只有符合条件的元素才会在结果数组中!
       var result=jQuery.grep($(".father"),function(elem,index)
	   {
	      return elem.id==="father";
		  //grep通过false,true来判断是否在结果集合中;map通过明确的return elem
		  //而each通过false,true决定是否退出循环
	   });
        console.log(result);//打印[p#father.father]

Ainsi, grep détermine les éléments renvoyés selon que la valeur de retour est vraie ou fausse. Tous les éléments qui remplissent les conditions forment une collection DOM
La partie HTML ! reste inchangé, on modifie la partie JS en :

     //对每一个元素进行筛选，只有符合条件的元素才会在结果数组中!
       var result=jQuery.grep($(".father"),function(elem,index)
	   {
	      return elem.id==="father";
		  //grep通过false,true来判断是否在结果集合中;map通过明确的return elem
		  //而each通过false,true决定是否退出循环
	   },true);
        console.log(result);//[p.father]

This Parce que le troisième paramètre est vrai, il sera inversé en interne, cela signifie donc que nous voulons que l'élément avec la valeur false apparaisse dans le résultat tableau, donc le tableau résultat ne contient que le deuxième élément p.

En fait, le code dans le code source peut être modifié comme :

//下面的代码可以修改为:
 callbackResult = callback( elems[ i ], i );//调用函数的结果
if ( callbackResult === callbackExpect ) {//如果调用的结果和期望的结果一样，那么直接放进结果数组返回
matches.push( elems[ i ] );
}

Question 4 : Quels sont le contexte et les paramètres dans jQuery.grep ? 🎜>Réponse : car il n'y a pas d'appel ou d'application explicite, le contexte est donc déterminé par l'environnement d'exécution. Le premier paramètre est l'élément et le deuxième paramètre est l'indice

(Uniquement jQuery.each, et l'instance each, le premier paramètre de la méthode map est l'indice et le deuxième paramètre est l'élément !)

Résumé :

(1) La méthode $.each met l'accent sur la traversée, c'est-à-dire la traversée de tous les éléments puis l'exécution d'une fonction de rappel. Si return false, alors arrêtez les appels suivants ; pour filtrer tous les éléments en fonction d'une fonction et laisser tous les éléments exécuter une fonction pour voir si la valeur de retour correspond à la valeur de retour attendue. Si elle correspond à la valeur de retour attendue, elle peut être incluse dans le tableau de résultats. Le troisième paramètre indique si. pour nier, donc grep met l'accent sur le filtrage ;map met l'accent sur la modification, c'est-à-dire la modification de toutes les collections d'éléments

(map met l'accent sur la modification, grep met l'accent sur le filtrage et chacun met l'accent sur le parcours)

(2). ) Chaque fonction de rappel est transmise. Les paramètres transmis sont l'indice et l'élément, avec l'indice devant et l'élément à l'arrière. Les paramètres transmis par d'autres méthodes grep ou map sont l'élément et l'indice, avec l'élément à l'intérieur. recto et l'indice à l'arrière (sauf par exemple map et each méthodes) !

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!