Sélecteurs JQuery

Cette page est propulsée par


Cette page Webjax vous présente les fonctionnalités, méthodes fondamentales de la librairie, du framework JQuery.



#00 :: Sélecteurs basiques JQuery #01 :: Sélecteurs hiérarchiques JQuery #02 :: Filtres basiques JQuery #03 :: Filtres de contenu JQuery #04 :: Filtres de visibilité JQuery #05 :: Filtres d'attribut JQuery #06 :: Filtres DOM.child JQuery #07 :: Sélecteurs de formulaires JQuery #08 :: Filtres de formulaire JQuery

00 :: Sélecteurs basiques JQuery

#id

Ce sélecteur vous permet de sélectionner, travailler sur un élément DOM à partir de son "id" DOM.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur "#id"

Tester le sélecteur :

myDiv

myOtherDiv

Le code source de cet exemple est ci après présenté :
$("#myDiv").css("border","3px solid red");

element

Ce sélecteur vous permet de sélectionner, travailler sur des éléments DOM à partir de leur nom d'élément.
Par exemple "div" est un nom d'élément DOM, "span" est nom d'élement DOM etc Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur "element"

Tester le sélecteur :

myDiv

myOtherDiv

mySpan

Le code source de cet exemple est ci après présenté :
$("div").css("border","3px solid red");

.class

Ce sélecteur vous permet de sélectionner, travailler sur des éléments DOM à partir de leur(s) nom(s) de classe(s) CSS applicable(s). Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ".class"

Tester le sélecteur :

myDiv

myOtherDiv

mySpan

Le code source de cet exemple est ci après présenté :
$(".myClass").css("border","3px solid red");

*

Ce sélecteur vous permet de sélectionner, travailler sur tous les éléments DOM accessibles dont "head", "body", etc Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur "*"

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("*").css("border","1px solid red");

selector1 , selector2 , selectorN

Ce sélecteur vous permet de sélectionner, travailler sur une combinaison d'éléments DOM possiblement différentiellement identifiés.
Par exemple vous pouvez précisez que la commande JQuery influera sur tous les "div" et tous les "p" avec la classe CSS "toto".
Les combinaisons sont multiples et infinies, ce sélecteur est extrèmement puissant. Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur "selector1 , selector2 , selectorN"

Tester le sélecteur :

myDiv

myOtherDiv (myStyle)

mySpan (myClass)

Le code source de cet exemple est ci après présenté :
$("div.myStyle,.myClass").css("border","3px solid red");

01 :: Sélecteurs hiérarchiques JQuery

ancestor descendant

Ce sélecteur vous permet de sélectionner des éléments enfants à partir d'un élément père.
Vous pouvez par exemple sélectionner tous les "input" d'un formulaire. Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur "ancestor descendant"

Tester le sélecteur :

myDiv

Le code source de cet exemple est ci après présenté :
$("fieldset input").css("border", "2px dotted blue");

parent > child

Ce sélecteur vous permet de sélectionner tous éléments fils à partir d'un élément père précisé.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur "parent > child"

Tester le sélecteur :

yep yep

geek geek

geek geek

Le code source de cet exemple est ci après présenté :
$("#demo > *").css("border", "3px double red");

prev + next

Ce sélecteur vous permet de sélectionner une combinaison précisée d'éléments DOM. La sélection ne peut se faire que si l'ordre indiqué d'apparition est respecté. Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur "prev + next"

Tester le sélecteur :
Name:

Newsletter:

Le code source de cet exemple est ci après présenté :
$("label + input").css("color", "red").val("je t'ai eu!");

prev ~ siblings

Ce sélecteur vous permet de sélectionner tous les éléments DOM enfants directs à partir d'un élément DOM précisé.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur "prev ~ siblings"

Tester le sélecteur :

div (doesn't match since before #prev)

div#prev

div sibling

div sibling

div neice

span sibling (not div)

div sibling

Le code source de cet exemple est ci après présenté :
$("#prev ~ div").css("border", "3px groove blue");

02 :: Filtres basiques JQuery

:first and :last

Ces sélecteurs vous permettent de sélectionner respectivement le premier et le dernière élément d'une sélection précisée.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":first and :last"

Tester le sélecteur :

First Row

Middle Row

Last Row

Le code source de cet exemple est ci après présenté :
$("tr:first").css("font-style", "italic"); $("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});

:not(selector)

Ce sélecteur, lui aussi très puissant en terme de réduction de code Javascript à écrire, permet de fixer une condition pour prendre en compte, sélectionner, un ou des élément(s) DOM. L'exemple présenté pour ce sélecteur en démontre l'intérêt pour une utilisation dans des validations optimisées de formulaire.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":not(selector)"

Tester le sélecteur :

Mary

Paul

Peter

Le code source de cet exemple est ci après présenté :
$("input:not(:checked) + span").css("background-color", "yellow"); $("#yep").attr("disabled", "disabled");

:even et :odd

Ces sélecteurs vous permettent de sélectionner, travailler avec des éléments DOM sélectionnés en fonction de leur "index".
Ce concept "index" correspond en version littérale au fait de "pouvoir sélectionner tous les éléments à index (im)pair", l'indexation se créant sur la base du listing d'éléments créé.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":even et :odd"

Tester le sélecteur :

Row with Index #0

Row with Index #1

Row with Index #2

Row with Index #3

Row with Index #0

Row with Index #1

Row with Index #2

Row with Index #3

Le code source de cet exemple est ci après présenté :
$("#myFirst tr:even").css("background-color", "#A6FFA6"); $("#mySecond tr:odd").css("background-color", "#A6FFA6");

:eq

Ce sélecteur permet de sélectionner, travailler sur un élément DOM pré listé. L'accès à l'élément se fait via un indice qui rentre dans la tranche d'indexs disponibles pour la liste d'éléments DOM préselectionnée.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":eq"

Tester le sélecteur :

TD #0	TD #1	TD #2
TD #3	TD #4	TD #5
TD #6	TD #7	TD #8

Le code source de cet exemple est ci après présenté :
$("#myTable td:eq(2)").css("color", "#FFC488"); $("#myTable td:eq(4)").css("color", "#A6FFA6");

:gt(index) et :lt(index)

Ces sélecteurs vous permettent de sélectionner, travailler avec des éléments DOM sélectionnés qui sont placés avant ou après un élément DOM précisé dans la commande. Ces sélecteurs sont eux aussi extrèmement puissants (décidemment ;-)).
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":eq"

Tester le sélecteur :

TD #0	TD #1	TD #2
TD #3	TD #4	TD #5
TD #6	TD #7	TD #8

TD #0	TD #1	TD #2
TD #3	TD #4	TD #5
TD #6	TD #7	TD #8

Le code source de cet exemple est ci après présenté :
$("#myTable00 td:gt(4)").css("text-decoration", "line-through"); $("#myTable01 td:lt(4)").css("text-decoration", "line-through");

:header

Ce sélecteur permet de sélectionner, travailler sur les éléments DOM dits "header" soit les balises type "h1", "h2" etc. Peut être intéressant lorsque l'on propose des fonctionnalités de changement de taille de police de caractères sur un site éditorial.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":header"

Tester le sélecteur :

Header 1

Contents 1

Header 2

Contents 2

Le code source de cet exemple est ci après présenté :
$("#myHeaders :header").css({ background:'#CCC', color:'blue' });

:animated

Ce sélecteur permet de sélectionner, travailler sur des éléments DOM actuellement en "animation".
Un élément DOM en animation est un élément qui est animé via un objet, une méthode JQuery.
L'exemple ci après présenté est assez parlant :-)
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":animated"

Tester le sélecteur :

Run

Le code source de cet exemple est ci après présenté :
$("#run").click(function(){ $("div:animated").toggleClass("colored"); }); function animateIt() { $("#mover").slideToggle("slow", animateIt); } animateIt();

03 :: Filtres de contenu JQuery

:contains(text)

Ce sélecteur vous permet de travailler, sélectionner des éléments DOM contenant un pattern de texte précisé.
Encore une fois, sélecteur extrèmement puissant pour qui veut dynamiser son interface :-) Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":contains(text)"

Tester le sélecteur :

Nicoweb Resig

George Martin

Malcom Nicoweb Sinclair

J. Ohn

Le code source de cet exemple est ci après présenté :
$("#myDemoSpace div:contains('Nicoweb')").css("text-decoration", "underline");

:empty

Ce sélecteur permet de sélectionner, travailler sur des éléments DOM précisés dont la valeur est vide.
En langage DOM, cela signifie que l'élément ne doit pas posséder d'éléments DOM fils pour être pris en compte dans la sélection. Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":empty"

Tester le sélecteur :

TD #0
TD #2
	TD#5

Le code source de cet exemple est ci après présenté :
$("#myTestSpace td:empty").text("cette cellule est vide!").css('background', '#A6FFA6');

:parent

Ce sélecteur permet de sélectionner, travailler sur des éléments DOM parents d'autres éléments.
Ceci peut paraître un peu obscur mais prend tout son sens dans l'exemple ci après présenté :-) Pour faire simple, ce sélecteur est très utile pour créer des tableaux de données en utilisant un dégradé de façon simple, sans code CSS direct (du code Javascript à la place). Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":parent"

Tester le sélecteur :

Value 1
Value 2

Le code source de cet exemple est ci après présenté :
$("#myTest18 td:parent").fadeTo(1500, 0.3);

04 :: Filtres de visibilité JQuery

:hidden et :visible

Ces sélecteus vous permettent de déterminer votre sélection d'éléments DOM à partir de leur statut de visibilité. Soient vous souhaitez les éléments "hidden", soit vous souhaitez les éléments "visible". Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":hidden" et ":visible"

Tester le sélecteur :

élément non visible

élément non visible

Le code source de cet exemple est ci après présenté :
$(".debug:first").text("Debug :: " + $(":hidden", document.body).length + " élément(s) 'hidden'."); $("#hiddenTest div:hidden").show(3000); $(".debug:last").text("Debug :: " + $("input:hidden").length + " éléments 'input:hidden' ."); $("#visibleTest div:visible").click(function () {$(this).css("background", "yellow");}); $("#visibleTest div:hidden").show("fast");

05 :: Filtres d'attribut JQuery

[attribute]

Ce sélecteur vous permet de sélectionner, tester, travailler sur les attributs d'éléments DOM.
Cela peut se révéler assez puissant dans certains contextes. Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur "[attribute]"

Tester le sélecteur :

aucun attribut id

avec attribut id

avec attribut id

sans attribut id

Le code source de cet exemple est ci après présenté :
function demo20(){$("#myTest20 div[id]").one("click", function(){ var idString = $(this).text() + " = la valeur de l'attribut 'id' est " + $(this).attr("id"); $(this).text(idString); });}

[@attribute=value]

Puissant sélecteur qui vous permet de sélectionner des éléments DOM à partir d'attributs et de valeurs d'attributs. Exemple, vous cherchez tous les éléments qui ont pour attribut "name" la valeur "nicoweb_contre_toto" (c'est clair il y a peu d'intérêt dans cette forme d'utilisation). Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur "[@attribute=value]"

Tester le sélecteur :

name?

name?

name?

Le code source de cet exemple est ci après présenté :
$("#myTest21 input[@name='newsletter']").next().text(" nicoweb représente");

[attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value]

Ces sélecteurs s'inscrivent dans la même veine que le précédent dans la mesure ou ils permettent de sélectionner, travailler sur des éléments DOM via une sélection par attribut et valeur d'attribut. Voici un listing des significations des différents opérateurs disponibles pour tester les valeurs des attributs que l'on souhaite utiliser comme marqueur :

• [attribute!=value] : sélectionne tous les éléments DOM pour lesquels l'attribut n'est pas égale à la valeur précisée
• [attribute^=value] : sélectionne tous les éléments DOM pour lesquels la valeur d'attribut correspond à la valeur précisée
• [attribute$=value] : sélectionne tous les éléments DOM pour lesquels la valeur d'attribut se termine par la valeur précisée
• [attribute*=value] : sélectionne tous les éléments DOM pour lesquels la valeur d'attribut contient le pattern valeur précisé

Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur "[@attribute=value]"

Tester le sélecteur :

name?

name?

name?

Tester le sélecteur :

Tester le sélecteur :

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
function demo22(){$("#myTest22 input[name!='newsletter']").next().text(" ne contient pas newsletter");} function demo22a(){$("#myTest22a input[@name^='news']").val("le pattern 'news' a été trouvé!");} function demo22b(){$("#myTest22b input[name$='letter']").val("le pattern 'letter' a été trouvé en fin de valeur d'attribut name");} function demo22c(){$("#myTest22c input[name*='man']").val("has man in it!");}

[selector1][selector2][selectorN]

Vous pouvez également une combinaison de sélecteurs type "attributs". Par exemple vous pouvez avoir à sélectionner tous les éléments DOM ayant un attribut "id" et ayant également leur attribut "name" contenant un certain pattern de valeur. Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur "[selector1][selector2][selectorN]"

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("#myTest23 input[id][name$='man']").val("cet élément contient le pattern 'man' dans l'attribut 'name' et l'élement a un attribut 'id'");

06 :: Filtres DOM.child JQuery

:nth-child(index/even/odd/equation)

Ce sélecteur vous permet de vous positionner sur un index 'n' pour chaque groupe d'éléments matchés par votre commande JQuery.
Exemple, vous souhaitez modifier la valeur texte de chaque seconde puce de liste, et ce, pour toutes les listes d'une zone précisée.
Voyez l'exemple ci après pour plus de clarté sur l'utilisation de ce sélecteur.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":nth-child(index/even/odd/equation)"

Tester le sélecteur :

• John
• Karl
• Brandon

• Sam

• Glen
• Tane
• Ralph
• David

Le code source de cet exemple est ci après présenté :
$("#myTest24 ul li:nth-child(2)").append("<span> - cette puce est la seconde de cette liste</span>");

:first-child et :last-child

Ces sélecteurs vous permet de sélectionner respectivement le premier et le dernier élément DOM enfant pour une liste d'éléments DOM pré-listés.

Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":first-child et :last-child"

Tester le sélecteur :

John, Karl, Brandon

Glen, Tane, Ralph

Tester le sélecteur :

John, Karl, Brandon, Sam

Glen, Tane, Ralph, David

Le code source de cet exemple est ci après présenté :
function demo25(){ $("#myTest25 div span:first-child") .css("text-decoration", "underline") .hover(function () { $(this).addClass("sogreen"); }, function () { $(this).removeClass("sogreen"); }); } function demo25a(){ $("#myTest25a div span:last-child") .css({color:"red", fontSize:"80%"}) .hover(function () { $(this).addClass("solast"); }, function () { $(this).removeClass("solast"); }); }

:only-child

Ce sélecteur vous permet de sélectionner tous les éléments DOM n'ayant qu'un élément DOM enfant dans le contexte de ce qui est précisé dans la commande. Exemple, vous souhaitez sélectionner tous les boutons présents seuls au sein d'une "div".
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":only-child"

Tester le sélecteur :

Vas y teste moi ! Vas y teste moi !

Vas y teste moi !

None

Vas y teste moi ! Vas y teste moi ! Vas y teste moi !

Vas y teste moi !

Le code source de cet exemple est ci après présenté :
$("#myTest26 div button:only-child").text("Je suis tout seul").css("border", "2px blue solid");

07 :: Sélecteurs de formulaires JQuery

:input , :text , :password , :radio , :checkbox , :submit , :image , :reset , :button , :file , :hidden

Ces sélecteurs vous permettent de sélectionner, travailler rapidement sur des éléments DOM regroupés par type. Les différents types sont détaillés dans la liste ci après :

• :input : sélectionne tous les éléments "input" , "textarea" , "input" , "button"
• :text : sélectionne tous les éléments de type "text"
• :password : sélectionne tous les éléments de type "password"
• :radio : sélectionne tous les éléments "input:radio"
• :checkbox : sélectionne tous les éléments "input:checkbox"
• :submit : sélectionne tous les éléments "input:submit"
• :image : sélectionne tous les éléments "input:image"
• :reset : sélectionne tous les éléments "input:reset"
• :button : sélectionne tous les éléments de type "button"
• :file : sélectionne tous les éléments de type "input:file"
• :hidden : sélectionne tous les éléments "hidden" ou de type "input:hidden"

Le script de test vous permet de compter chaque type d'élément au sein de cette page de Webjax.eu . Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":only-child"

Tester le sélecteur : input text password radio checkbox submit image reset button file hidden

Le code source de cet exemple est ci après présenté :
var typeel = $F('typeel'); var allElements = $(":"+typeel); $("#myTest27").text("Nous avons trouvé " + allElements.length + " éléments de type '"+typeel+"' ").css("color", "red");

08 :: Filtres de formulaire JQuery

:enabled

Ce sélecteur vous permet de sélectionner, travailler sur une liste d'éléments DOM actifs.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":enabled"

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("#myTest28 input:enabled").val("cet élément est actif");

:disabled

Ce sélecteur vous permet de sélectionner, travailler sur une liste d'éléments DOM inactifs.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":disabled"

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("#myTest29 input:disabled").val("cet élément est inactif");

:checked

Ce sélecteur vous permet de sélectionner, travailler sur une liste d'éléments DOM cochés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":checked"

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
function demo30(){ countChecked(); $("#myTest30 :checkbox").click(countChecked); } function countChecked() { var n = $("#myTest30 input:checked").length; $("div").text(n + (n == 1 ? " est" : " sont") + " coché!"); }

:selected

Ce sélecteur vous permet de sélectionner, travailler sur une liste d'éléments DOM sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur ":selected"

Tester le sélecteur :

Nicoweb.fr Webjax.eu Fast-Foods-Restaurants.com Priceestate-Platform.fr Alaradio.fr Sitemap-Generator

Le code source de cet exemple est ci après présenté :
$("#myTest31 select").change(function () { var str = ""; $("#myTest31 select option:selected").each(function () { str += $(this).text() + " "; }); $("div").text(str); }) .trigger('change');

: 11/03/2008 22:05:32 | : JQuery, sélecteurs, selectors, javascript, framework, ajax, library, jquery, j, query, Framework, Javascript, Library, Ajax, asyncronous, web2.0, ria, dom, control, enh,

Aucun commentaire enregistré