Traversée jQuery - filtrage
Plage d'éléments de recherche
Les trois méthodes de filtrage les plus élémentaires sont : first(), last() et eq(), qui vous permettent de sélectionner un élément spécifique en fonction de sa position dans un ensemble d'éléments. .éléments.
D'autres méthodes de filtrage telles que filter() et not() permettent de sélectionner des éléments qui correspondent ou non à un critère spécifié.
méthode first()
la méthode first() renvoie le premier élément de l'élément sélectionné.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div p").first().css("background-color","blue");
});
</script>
</head>
<body>
<div>
<p>段落1</p>
</div>
<div>
<p>段落2</p>
</div>
<p>段落3</p>
</body>
</html>Sélectionne le premier élément <p>
Méthode last()
La méthode last() renvoie le dernier élément de l'élément sélectionné.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div p").last().css("background-color","red");
});
</script>
</head>
<body>
<div>
<p>段落1</p>
</div>
<div>
<p>段落2</p>
</div>
<p>段落3</p>
</body>
</html>Sélectionne le dernier élément <p>
Méthode eq()
La méthode eq() renvoie l'élément avec le numéro d'index spécifié parmi les éléments sélectionnés.
Les indices commencent à 0, donc l'indice du premier élément est 0 au lieu de 1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").eq(1).css("background-color","green");
});
</script>
</head>
<body>
<p>php中文网 (index 0).</p>
<p>//m.sbmmt.com (index 1)。</p>
<p>google (index 2).</p>
<p>http://www.google.com (index 3)。</p>
</body>
</html>Sélectionne le deuxième élément <p> Méthode
filter() La méthode
filter() permet de préciser un critère. Les éléments qui ne correspondent pas à ce critère sont supprimés de la collection et les éléments correspondants sont renvoyés.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").filter(".url").css("background-color","yellow");
});
</script>
</head>
<body>
<p>php中文网 (index 0).</p>
<p class="url">//m.sbmmt.com (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>
</html>Renvoie tous les éléments <p> avec le nom de classe "url". Méthode
not() La méthode
not() renvoie tous les éléments qui ne correspondent pas aux critères.
Astuce : La méthode not() est l'opposé de filter().
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").not(".url").css("background-color","gray");
});
</script>
</head>
<body>
<p>php中文网 (index 0).</p>
<p class="url">//m.sbmmt.com (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>
</html>Renvoie tous les éléments <p> sans le nom de classe "url".
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
