NuxBSD: Free Infos

Retour d'un niveau
Retour à l'accueil

  $('p');         // sélectionne tous les paragraphes
  $('.maClasse'); // sélectionne les éléments ayant .maClasse pour classe
  $('#monId');    // sélectionne l'élément qui possède l'identifiant #monId

  $('p .lien');   // sélectionnons tous les éléments ayant la classe .lien, et contenus dans un paragraphe qui joue le rôle de parent
  $('p > .lien'); // sélectionnons seulement les éléments ayant la classe .lien,et descendants directement du paragraphe !
  $('.lien + .visite'); // la sélection s'effectue sur les éléments ayant pour classe .visite, et qui sont immédiatement précédés d'un élément ayant pour classe .lien
  $('.lien ~ .visite'); // dans ce cas-là, ce sont tous les éléments .visite, précédés immédiatement ou non par un élément .lien

Parmis les très nombreux sélecteurs proposés par le framework figurent ceux qui permettent de sélectionner un élément suivant sa place sur la page. C'est quelque chose de vraiment pratique qui était assez compliqué à réaliser avec du simple JavaScript.

Les plus utilisés et connus sont :

• :first, qui sélectionnera le tout premier élément donné ;
• :eq(index), qui se chargera de retourner l'élément possédant l'index spécifié ;
• :last, je pense que vous l'aurez vite compris, permettra de sélectionner le dernier élément.

  $('p:first');  // sélection du premier paragraphe trouvé
  $('a:last');   // on sélectionne le dernier lien de la page

Qu'est-ce que l'index d'un élément ? Eh bien, pour faire le plus simple possible, c'est le numéro qui représente sa place dans la page. Ainsi, si vous possédez cinq paragraphes, vous pourrez par exemple sélectionner le troisième sans problème. Mais attention il y a un piège : il faut commencer à compter à partir de 0.
C'est très important de retenir cela, le système est similaire sur les tableaux.

  $('p:eq(2)'); // c'était 2 !

Un autre type de sélecteurs sont les sélecteurs fonctionnant grâce aux attributs des éléments du DOM. Il est ainsi possible de réaliser de multiples actions sur les balises qui contiennent un attribut donné, tel qu'un identifiant ou une valeur :

  $('p[id]'); // retourne seulement les paragraphes ayant un identifiant

Heureusement, il est possible de préciser la requête. Imaginons que vous vouliez récupérer les éléments ayant une valeur (value) ou un nom (name) bien précis.
Dans ce cas-là, il est possible de le dire à jQuery grâce à la syntaxe suivante :

  $('input[name=pseudo]'); // cible seulement l'élément de formulaire ayant « pseudo » pour nom

Un peu à part, ce sélecteur particulier permet de cibler les éléments qui sont tout sauf ce qui a été indiqué à l'intérieur. Il permet donc une sélection puissante, et, depuis jQuery 1.3, permet même de spécifier plusieurs types de balises en même temps !
Il s'utilise très facilement :

  $('p:not(.rouge)'); // sélection de tous les paragraphes, sauf ceux ayant .rouge comme classe
  $('input:not(.bleu, .vert)'); // on sélectionne tous les éléments de formulaire sauf ceux ayant .bleu et/ou .vert comme classe

Il peut parfois se révéler pratique de sauvegarder un objet jQuery. Il est donc possible de rentrer une sélection dans une variable, cette dernière pouvant être utilisée à la place de la fonction principale.

  var $element = $('monElement');

$('p').each(function(){
 
    $(this).html('Hello World !'); // $(this) représente le paragraphe courant
 
});

1. les sélecteurs id
2. les sélecteurs balise
3. les sélecteurs classe

Pour optimiser une recherche par classe, il suffit de cibler son parent

$('#menu .sections');
// sélection plus rapide que :
 
$('.sections');
});

Les sélecteurs peuvent s'enchaîner, afin de cibler plus précisément des éléments. Cette astuce possède un lourd inconvénient : elle ralentit considérablement la vitesse de sélection des éléments du DOM. En effet, jQuery va devoir tout d'abord trouver le premier élément, puis va devoir passer au deuxième, et ainsi de suite… Il est alors possible d'augmenter exponentiellement le temps d'exécution du code.

$('div p a');
 
$('#lien');
});

Ces deux ciblages sont identiques, pourtant, la première sélection est, en théorie, environ 15 fois plus lente que la deuxième ! En effet, dans le premier cas, jQuery va parcourir chaque bloc div du document, pour ne retourner que ceux possédant un paragraphe. Viennent ensuite ceux-ci, qui vont être parcourus jusqu'à trouver celui qui possède un lien. En revanche, dans le second cas, le lien va être ciblé directement de part son identifiant unique !

Retour d'un niveau
Retour à l'accueil