Nous avons découvert les sélecteurs jQuery dans l'article précédent. Dans ce chapitre, nous parlerons des méthodes de filtrage de jQuery. Le but est toujours d'obtenir des éléments, mais il ne se situe qu'entre les niveaux parent, enfant et frère. Les filtres suivants sont courants méthodes :
teneur:
Quatre : frères et sœurs ('sélecteur')
Sept : eq (valeur de l'indice)
Huit : hasClass ('nom de la classe')
L'idée exclusive du JS natif :
Méthode de filtrage :
| grammaire | usage | illustrer |
| parent () | $('li').parent() | Trouver le parent le plus proche |
| enfants ('sélecteur') | $('ul').enfants(('li') | Trouver des enfants (fils uniques) |
| trouver('sélecteur') | $('ul').find('li') | Trouver des descendants (y compris fils, petits-enfants) |
| frères et sœurs ('sélecteur') | $('ul li:eq(2)').frères('li') | Trouver des frères et sœurs, sans compter soi-même |
| suivantTout('sélecteur') | $('ul li:eq(2)').nextAll('li') | Trouvez votre prochain frère |
| prevAll('sélecteur') | $ ('ul li : éq (2)'). prevAll ('li') | Trouvez votre frère en avant |
| eq (valeur de l'indice) | $ ('ul li'). éq (2) | Trouver li avec l'indice 2 |
| hasClass('nom de la classe') | $('ul li:premier').hasClass('un') | Déterminez si le premier li a le nom de classe un, remettez vrai/faux |
Un parent()
Trouver le parent le plus proche
Voici la div parent qui obtient l'ul
<body>
<div>
<ul>
<li></li>
</ul>
</div>
<script>
console.log($('ul').parent());
</script>
</body>
Deux : enfants ("sélecteur")
Rechercher des enfants (fils uniquement), renvoyer tous les enfants s'il n'y a pas de sélecteur entre parenthèses
Voici pour trouver li dans les enfants de ul
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script>
console.log( $('ul').children('li') );
</script>
</body>
Lorsqu'il y a plusieurs descendants, seul le fils peut être obtenu, comme les descendants de div ont ici ul et li, mais seul l'enfant ul peut être obtenu
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
console.log( $('div').children() );
</script>
</body>
Lorsqu'il n'y a pas de sélecteur entre parenthèses, vous pouvez obtenir tous les enfants, où les enfants de la div sont ul et une autre div
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
</div>
<script>
console.log( $('div').children() );
</script>
</body>
Trois : trouver('sélecteur')
Trouver des descendants, y compris des fils, des petits-enfants
Voici pour trouver li dans les descendants de div, li est le petit-fils de div
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
</div>
<script>
console.log( $('div').find('li') );
</script>
</body>
Quatre : frères et sœurs ('sélecteur')
Trouver les éléments frères, à l'exclusion de lui-même, s'il n'y a pas de sélecteur entre parenthèses, obtenir tous les frères et sœurs
Voici l'élément frère p de ul, excluant lui-même
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
<p></p>
</div>
<script>
console.log( $('ul').siblings('p') );
</script>
</body>Lorsqu'il n'y a pas de sélecteur entre parenthèses, tous les frères et sœurs sont renvoyés, à l'exclusion de lui-même
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
<p></p>
</div>
<script>
console.log( $('ul').siblings() );
</script>
</body>
Cinq : nextAll ('sélecteur')
Obtenez les frères et sœurs en dessous de vous sauf vous-même
Voici le niveau de fratrie obtenu en dessous de ul, excluant lui-même
<body>
<div>
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
</div>
<script>
console.log( $('ul').nextAll() );
</script>
</body>
Six : prevAll ('sélecteur')
Semblable à nextAll, celui-ci obtient les frères et sœurs au-dessus de lui-même sauf lui-même
Voici le niveau frère au-dessus de l'ul, excluant lui-même
<body>
<div>
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
</div>
<script>
console.log( $('ul').prevAll() );
</script>
</body>
Sept : eq (valeur de l'indice)
pour obtenir l'élément à l'index spécifié
Voici pour obtenir l'élément enfant avec l'index 1 sous ul, ce qui équivaut à ul:eq(1)
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
console.log( $('ul li').eq(1) );
</script>
</body>
Huit : hasClass ('nom de la classe')
Pour juger si un élément a un certain nom de classe, notez que le nom de classe à juger entre parenthèses n'a pas besoin d'être ajouté avec ' . 'Si oui, retourne vrai, sinon, retourne faux
Voici le nom de la classe pour juger si le premier li est un
<body>
<div>
<ul>
<li class="one"></li>
<li></li>
<li></li>
</ul>
</div>
<script>
console.log( $('ul li:first').hasClass('one') );
</script>
</body>
Pensées exclusives :
En JS natif, nous avons appris l'idée d'exclusivité, par exemple, dans le changement de couleur du bouton de clic, c'est-à-dire utiliser une boucle for pour parcourir tous les éléments afin d'ajouter un événement de clic, puis notre classique ''kill d'autres, laissez-moi'', puisque dans jQuery Il y a une itération implicite, pas besoin d'utiliser pour la liaison de boucle, comparons ses idées :
L'idée exclusive du JS natif :
tue les autres, laisse moi tranquille
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
var btns=document.querySelectorAll('button');
for(var i=0;i<btns.length;i++){
btns[i].addEventListener('click',function(){
for(var j=0;j<btns.length;j++){
btns[j].style.backgroundColor=''
}
this.style.backgroundColor='pink'
})
}
</script>
</body>L'idée exclusive de jQuery :
Il y a une itération implicite, pas besoin de boucler les événements de liaison, il suffit de définir la couleur de l'élément cliqué, les autres paramètres frères ne changent pas de couleur
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
$('button').click(function(){
$(this).css('background','pink') //点击的按钮变色
$(this).siblings('button').css('background','') //点击按钮的兄弟级不变色
})
</script>
</body>