Filtrage jQuery
jQuery Traversal - Filtrage
Plage abrégée 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.
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 jQuery first()
La méthode first() renvoie le premier élément de l'élément sélectionné.
L'exemple suivant sélectionne le premier élément <p> à l'intérieur du premier élément <div> :
<!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","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<div>
<p>这是 div 中的一个段落。</p>
</div>
<div>
<p>这是另外一个 div 中的一个段落。</p>
</div>
<p>这是一个段落。</p>
</body>
</html>Exécutez le programme et essayez-le
Méthode jQuery last()
La méthode last() renvoie le dernier élément de l'élément sélectionné.
L'exemple suivant sélectionne le dernier élément <p> dans le dernier élément <div> :
<!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","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<div>
<p>这是 div 中的一个段落。</p>
</div>
<div>
<p>这是另外一个 div 中的一个段落。</p>
</div>
<p>这是一个段落。</p>
</body>
</html>Exécutez le programme et essayez-le
Méthode jQuery 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 le premier élément a un indice de 0 au lieu de 1. L'exemple suivant sélectionne le deuxième élément <p> (numéro d'index 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","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<p>php中文网 (index 0).</p>
<p>http://www.php.cn (index 1)。</p>
<p>google (index 2).</p>
<p>http://www.google.com (index 3)。</p>
</body>
</html>Exécutez le programme et essayez-le
méthode jQuery 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. L'exemple suivant renvoie tous les éléments <p> avec le nom de classe "url" :<!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>
<h1>欢迎访问我的主页</h1>
<p>php中文网 (index 0).</p>
<p class="url">http://www.php.cn (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>
</html>Exécutez le programme pour l'essayerMéthode jQuery 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().
L'exemple suivant renvoie tous les éléments <p> sans le nom de classe "url" :
<!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","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<p>php中文网 (index 0).</p>
<p class="url">http://www.php.cn (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>
</html>Exécutez le programme pour l'essayer
![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)
