Les sélecteurs de base en jQuery
Les sélecteurs de base en jQuery
-
Objectifs
- Connaitre les sélecteurs de base en jQuery
- Etre capable d’utiliser les sélecteurs de base en jQuery
-
Introduction
- Les sélecteurs de base sont une reformulation des méthodes JavaScript que nous avons souvent utilisées :
getElementById,getElementsByName,getElementsByClassName…. -
Les sélecteurs de base
-
Sélection par l’identifiant
- #identifiant Sélectionne l’élément (unique) spécifié par l’attribut id= »identifiant ».
$("#apc"): sélectionne l’élément dont l’id est apc.- C’est la notation jQuery de
getElementByIddu JavaScript classique. - Appeler jQuery()(ou $()) avec un sélecteur id comme argument renverra un objet jQuery contenant une collection de zéro ou d’un élément DOM.
-
Sélection par le nom de la balise
- Un seul élément
- élément Sélectionne tous les éléments (ou balises) dont le nom est spécifié sa syntaxe set :
$("tagname"). - Le sélecteur d’élément sélectionne les éléments avec le nom de la balise spécifié.
- Le nom de la balise est le texte entre les
<et>des balises HTML. $("div"): sélectionne toutes les divisions<div>de la page- C’est la notation jQuery de
getElementsByTagNamedu JavaScript classique. - Plusieurs éléments
- On peut sélectionner plusieurs élément en même temps
- Syntaxe:
$ ("h1, li,. p") - pour le faire en modifie l’exemple précédent comme suit:
-
Sélection par la classe
- classe Sélectionne tous les éléments (ou balises) avec la classe spécifiée. $(« .apc ») : sélectionne tous les éléments dotés de l’attribut
class="apc". - Pour les sélecteurs de classe, jQuery utilise la fonction native
getElementsByClassName()de JavaScript si le navigateur le prend en charge
Le tableau suivant illustre la sélection de l’élément avec l’id « div2 » et donne-lui une bordure rouge.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Sélecteur de base ID</title>
<style>
div {
width: 350px;
height: 100px;
float: left;
padding: 5px;
margin: 5px;
background-color: #eee;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="div1"><p> Attention l'id de ce div est ="div1" donc ne sera pas changé</p></div>
<div id="div2"><p> id="div2" ce div sera recadré avec une bordure rouge </p>
<p>Le code utilisé est : <strong><code>$( "#div2" ).css( "border", "3px solid red" );</code></strong></div>
<script>
$( "#div2" ).css( "border", "3px solid red" );
</script>
</body>
</html>Résultat
L’exemple suivant montre comment sélectionner tous les éléments p,h1 d’une page HTML.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Sélecteur de base élément</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").css({border: '2px solid #ff0000',width:'300px', marginLeft: '120px'});
});
</script>
</head>
<body>
<h1>Ceci est un titre qui est dans un élément h</h1>
<p class="apc">Ceci est un paragrphe qui est dans un élément p avec la classe "apc"</p>
<p class="apcpedagogie">Ceci est un paragrphe qui est dans un élément p avec la classe "apcpedagogie"</p>
<p>Ceci est un paragrphe qui est dans un élément p sans classe</p>
<p>Ceci est un autre paragrphe qui est dans un élément p sans classe</p>
</body>
</html>Résultat:
L’exemple suivant montre comment sélectionner tous les éléments p d’une page HTML.
.........
<script type="text/javascript">
$(document).ready(function(){
$("p,h1").css({border: '2px solid #ff0000',width:'300px', marginLeft: '120px'});
});
</script>
</head>
Résultat:
L’exemple suivant montre comment sélectionner toutes les classes d’une page HTML.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Sélecteur de base ID</title>
<style>
div {
width: 350px;
height: 100px;
float: left;
padding: 5px;
margin: 5px;
background-color: #eee;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="div1"><p> Attention la classe de ce div est ="div1" donc ne sera pas changé</p></div>
<div class="div2"><p> class="div2" ce div sera recadré avec une bordure rouge </p>
<p>Le code utilisé est : <strong><code>$( "#div2" ).css( "border", "3px solid red" );</code></strong></div>
<div class="div3"><p> id="div3" ce div sera recadré avec une bordure verte </p>
<p>Le code utilisé est : <strong><code>$( "#div2" ).css( "border", "3px solid green" );</code></strong></div>
<script>
$( ".div2" ).css( "border", "3px solid red" );
$( ".div3" ).css( "border", "3px solid green" );
</script>
</body>
</html>Résultat:
| Sélecteur | CSS | jQuery | Description |
|---|---|---|---|
| Identifiant | #un-id | $(‘#un-id’) | Sélectionne l’élément unique du document dont l’identifiant est un-id. |
| élément (Nom de balise) | p | $(‘p’) | Sélectionne tous les paragraphes du document. |
| Classe | .une-classe | $(‘.une-classe’) | Sélectionne tous les éléments du document dont la classe est une-classe |
