Différences dans les exemples d'utilisation de plusieurs sélecteurs couramment utilisés dans jquery

1. Les sélecteurs de filtres couramment utilisés dans Jquery sont les suivants :

1 :first, sélectionnez le premier élément, tel que $("p:. first") sélectionne le premier p élément
2, :last, sélectionne le dernier élément, par exemple $("p:last") sélectionne le dernier p élément
3, :not (sélecteur), ne sélectionne pas les éléments qui répondent à la condition "sélecteur", comme $("p:not(.className)"), sélectionnez tous les p éléments dont le style n'est pas className
4 :even/:odd, sélectionnez index Pour les éléments pairs/impairs, tels que $("p:even"), sélectionnez tous les p éléments avec des numéros d'index pairs 5, :eq (numéro d'index)/:gt (numéro d'index)/:lt (numéro d'index ) ), sélectionnez les éléments égaux au numéro d'index/supérieur au numéro d'index/inférieur au numéro d'index, tels que $("p:lt(3)"), sélectionnez tous les p éléments avec des numéros d'index inférieurs à 3
Remarque :
Sélecteur de filtre Lorsque vous utilisez un mélange de (3)").css("fontSize", "28"); //lt(3) est le numéro de série dans la nouvelle séquence de gt(0), faites ne l'écrivez pas comme lt(4)

Deux , Points clés
1. Sélecteur multi-conditions
Sélecteur multi-conditions : $("p,p,span,menuitem"), sélectionnez p. tag, p tag et span tag avec le style menuitem en même temps
Notez qu'il ne peut pas y avoir plus ou moins d'espaces dans le sélecteur
expression
, ce qui est facile de faire des erreurs ! 2. Sélecteur relatif
Spécifiez simplement le deuxième paramètre dans $(), et le deuxième paramètre est l'élément relatif. Par exemple, le code html est le suivant

Ensuite, vous pouvez utiliser le code js suivant pour faire fonctionner la couleur d'arrière-plan de td

<table id="table1"> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
</table>

$("td", $(this)).css( "

background
", "red"), ce code utilise un sélecteur relatif, et le td sélectionné est relatif à l'élément tr actuel. Les éléments td sélectionnés sont tous des éléments td sous l'élément tr actuel et n'impliquent pas d'éléments td dans d'autres lignes.

<script type="text/
javascript
"> 
$(function () { 
$("#table1 tr").click(function () { 
$("td", $(this)).css("background", "red"); 
}); 
}); 
</script>

3. Sélecteur hiérarchique :

a $("#p li") récupère tous les éléments li sous p (descendants, enfants, enfants d'enfants... . .)
b $("#p > li") Obtient l'élément enfant li direct sous p // Faites attention à l'espace
c $(".menuitem + p") Obtient le premier élément après le style nommé menuitem Un élément p, peu utilisé.
d $(".menuitem ~ p") obtient tous les éléments p après le nom de style menuitem, ce qui n'est pas couramment utilisé.
La différence dans les détails est (point sujet aux erreurs) :
Sélecteur multi-conditions : $("p,p,span,menuitem"), sélecteur relatif : $("td", $(this)) .css ("background", "red")", sélecteur hiérarchique : $("#p li") récupère tous les éléments li sous p (descendants, enfants, enfants d'enfants....)

Trois La différence entre eux est :
1. Sélecteur multi-conditions : séparé par une virgule entre un "",
2. Sélecteur relatif : séparé par 2 éléments,
3. Séparez

par des espaces. L'exemple de code est le suivant :

.

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!