Premiers pas avec jquery-selectors

Installation ou configuration

1 Nom de balise Représente un nom de balise disponible dans le DOM. Par exemple $('p') sélectionne tous les paragraphes <p> dans le document.

2 ID de balise Représente une balise disponible avec l’ID donné dans le DOM. Par exemple, $('#some-id') sélectionne l’élément unique du document dont l’ID est some-id.

3 Classe de balises Représente une balise disponible avec la classe donnée dans le DOM. Par exemple, $('.some-class') sélectionne tous les éléments du document qui ont une classe de some-class.

Tous les éléments ci-dessus peuvent être utilisés seuls ou en combinaison avec d’autres sélecteurs. Tous les sélecteurs jQuery sont basés sur le même principe à quelques ajustements près.

NOTE - La fabrique function $() est synonyme de la fonction jQuery(). Donc, si vous utilisez une autre bibliothèque JavaScript où le signe $ est en conflit avec autre chose, vous pouvez remplacer le signe $ par le nom jQuery et vous pouvez utiliser la fonction jQuery() au lieu de $().

Exemple Voici un exemple simple qui utilise Tag Selector. Cela sélectionnerait tous les éléments avec un nom de balise p et définirait leur arrière-plan sur “jaune”.

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
    
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
    
</html>

Sélecteurs Jquery

Les sélecteurs Jquery sont utilisés pour manipuler le DOM (modèle d’objet de document), attacher des événements, ajouter un élément, supprimer un élément lors de l’exécution.

Sélecteur	Descriptif
sélecteur d’élément	le sélecteur d’élément est utilisé pour sélectionner un élément particulier Ex : `<p>Stackoverflow pour aider à comprendre les erreurs</p>` Pour accéder à cette balise “p”, nous devons ajouter cet élément et l’envelopper à l’intérieur syntaxe jquery comme : $(“p”). "$" représente le jquery, c’est juste un alias de jquery et si nous voulons nous pouvons utiliser jquery au lieu de “$” comme jQuery(). Si nous travaillons avec une autre bibliothèque ou framework (angular) qui a le même alias que jquery ($), nous pouvons modifier ce conflit en utilisant la méthode $.noConflict() de jquery.
Sélecteur d’ID	nous pouvons écrire le sélecteur d’ID sous la forme $("#texte de l’attribut id") `<div id="selectMe">Je suis le contenu interne de Div.</div>` Ici le texte de ID l’attribut est “selectMe”, donc pour sélectionner ce sélecteur d’ID à l’aide de jquery, nous devons écrire : $("#selectMe"). Plusieurs identifiants peuvent être sélectionnés en les séparant par des virgules. Ex : $("#id1,#id2,#id3…")
Sélecteur de classe	Les sélecteurs de classe sont représentés par un point/"." et écrit comme $(".className") `<span class="demoClass"> Demo JQuery class Selectors </span>` Pour accéder au sélecteur de classe, nous écrivons $(".demoClass"), Multiple class peut être sélectionné sous forme de valeurs séparées par des virgules. $(".classe1,.classe2,.classe3")
Sélecteur de tous les éléments	Pour sélectionner l’élément DOM complet, nous devons inclure le caractère : `""`. `$("")` Il fait référence à un élément DOM complet, y compris html, head…
This is p Tag
This is div Tag
This is span Tag

Vérifiez jsfiddle par exemple : https://jsfiddle.net/rezjvrum/

Liste des différents sélecteurs :

“:first” - Sélectionne le premier élément.
“:last” - Sélectionne le dernier élément.
“:even” - Sélectionne tous les éléments pairs.
“:odd” - Sélectionne tous les éléments impairs.
“:eq(index)” - Sélectionnez l’élément indexé. Ex : :eq(1) sélectionnera le deuxième élément enfant. Ici, l’indexation commence à partir de “0”.
“:gt(index)” - Affiche tous les éléments dont l’index est supérieur à la passe d’index. Ex : :gt(3) renverra tous les éléments ayant un index supérieur à 3.
“:lt(index)” - Affiche tous les éléments dont l’index est inférieur à la passe d’index. Ex : :lt(2) renverra tous les éléments ayant un index inférieur à 2.

Les sélecteurs ci-dessus sont couverts dans : https://jsfiddle.net/rezjvrum/2/

Premiers pas avec jquery-selectors

Installation ou configuration #

Sélecteurs Jquery #

Installation ou configuration

Sélecteurs Jquery