Plusieurs exemples de sélecteur composé jQuery applications_jquery

3ad24e48e05d5f1eca741ba5171373a4

1. Opérations liées au sélecteur composé sur la case à cocher

<input type="checkbox" id="ckb_1" /> 
<input type="checkbox" id="ckb_2" disabled="true" /> 
<input type="checkbox" id="ckb_3" /> 
<input type="checkbox" id="ckb_4" /> 
<input type="button" id="btn" value="点击">

Exemple : vous devez définir l'élément de type case à cocher et "disponible" sur "sélectionné"

Méthode ① Utiliser le sélecteur de filtre d'attribut [type='checkbox'] et [disabled!=disabled]

$("input[type='checkbox'][disabled!=disabled]").attr("checked",true);

Notez que dans ce sélecteur composé, désactivé! = désactivé doit être utilisé pour sélectionner les éléments "disponibles", et attr("checked",true) doit être utilisé lors de la définition des attributs. L'attribut désactivé est utilisé de la même manière que l'attribut vérifié.

Méthode ②Utiliser le sélecteur de formulaire : case à cocher et sélecteur de filtre d'attribut [disabled!=disabled]

$('input:checkbox[disabled!=disabled]').attr("checked",true);

Méthode ③ Utiliser le sélecteur de formulaire : case à cocher et le sélecteur de filtre d'attribut d'objet de formulaire : activé

$(':checkbox:enabled').attr("checked",true);

Méthode ④ Utilisez .each() pour parcourir

$("input[type=checkbox]").each(function(){

if ($(this).attr("disabled") != "disabled") {

$(this).attr("checked",true);
}
});

Aucun sélecteur de composé n'est utilisé. Ce qu'il faut noter est la même chose que dans la méthode ①. Lorsque vous jugez l'attribut, vous devez juger s'il est « désactivé » ou « activé », et non faux ou vrai. Lors de la définition des propriétés, vous pouvez utiliser « désactivé » ou « activer », ou vous pouvez utiliser faux ou vrai.

2. Autres exemples de sélecteurs composés

<ul>
<li >第一行</li>
<li class="showli">第二行</li>
<li class="showli">第三行</li>
<li>第四行</li>
<li style="display:none">第五行</li>
<li class="showli">第六行</li>
<li>第七行</li>
</ul>

Exemple. Définissez l'arrière-plan du premier élément li avec la classe showli sur rouge

$("ul li[class=showli]:eq(0)").css("background":"red");

Le résultat est que l'arrière-plan de 'ce538ea8997393b61c570ccb63e01b38la deuxième lignebed06894275b65c1ab86501b08a632eb' devient rouge. Le sélecteur de filtre d'attribut [class=showli] et le sélecteur de filtre de base eq(0)

sont utilisés

Exemple. Définissez l'arrière-plan du cinquième li visible en rouge

$("ul li:visible:eq(4)").css({"display":"blaock","background":"red"});

Le résultat est que l'arrière-plan de 'ce538ea8997393b61c570ccb63e01b38La sixième lignebed06894275b65c1ab86501b08a632eb' devient rouge display:block pour détecter si le li caché sera filtré par :visible, display. : Le fond rouge n'est pas visible sous aucun. Sélecteur de filtre de visibilité utilisé :visible

Exemple. (C'est plutôt alambiqué) Définissez l'arrière-plan du deuxième li visible derrière le deuxième li avec la classe showli en rouge

$("ul li.showli:eq(1)").nextAll("li:visible:eq(1)").css({"display":"block","background":"red"});

Le résultat est que l'arrière-plan de 'ce538ea8997393b61c570ccb63e01b38la sixième lignebed06894275b65c1ab86501b08a632eb' devient rouge.