Traverser le modèle DOM avec JQuery

Cette page est propulsée par


Cette page Webjax vous présente les fonctionnalités JQuery qui vous permettent de traverser un document DOM .



#00 :: Filtering: #01 :: Finding: #02 :: Chaining:

00 :: Filtering:

eq( index )

Permet de limiter une sélection d'éléments DOM à un seul élément.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

eq( index )

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("#myTest00 div").eq(2).addClass("purple");

hasClass( class )

Cette instruction permet de vérifier la présence d'une classe CSS dans une liste d'éléments DOM.
L'instruction retourne "true" tant qu'un élément possède au moins la classe CSS.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

hasClass( class )

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("#myTest01 div").click(function(){ if ( $(this).hasClass("protected") ) $(this).animate({ left: -10 }, 75) .animate({ left: 10 }, 75) .animate({ left: -10 }, 75) .animate({ left: 10 }, 75) .animate({ left: 0 }, 75); });

filter( expr )

Cette instruction permet de filtrer des éléments DOM présents dans une sélection.
Tous les éléments ne matchant pas le filtre sont supprimés de la sélection qui reste ultérieurement exploitable.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

filter( expr )

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("div").css("background", "#c8ebcc") .filter(".middle") .css("border-color", "#57C165");

is( expr )

Instruction qui retourne un état booléen de la validation d'une condition au sein d'un set d'éléments DOM.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

is( expr )

Tester le sélecteur :

Nicoweb on Webjax.eu

Le code source de cet exemple est ci après présenté :
$("#myTest03 div").one('click', function () { if ($(this).is(":first-child")) { $("#myTest03 p").text("C'est la première box."); } else if ($(this).is(".orange,.red")) { $("#myTest03 p").text("C'est une box orange ou rouge 'red'."); } else if ($(this).is(":contains('Nicoweb')")) { $("#myTest03 p").text("La box contient Nicoweb"); } else { $("#myTest03 p").html("Rien de spécial dans cette box."); } $("p").hide().slideDown("slow"); $(this).css({"border-style": "inset", cursor:"default"}); });

map( callback )

Permet de transcrire des éléments de l'objet JQuery en un couple de valeurs disponible au sein d'un tableau.
Les valeurs du tableau sont ensuite utilisables.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

map( callback )

Tester le sélecteur :

Valeurs des 'input' :

Le code source de cet exemple est ci après présenté :
$("#myTest04 p").append( $("#myTest04 input").map(function(){ return $(this).val(); }).get().join(", ") );

not( expr )

Cette instruction permet de fixer une condition d'exclusion d'éléments DOM depuis une liste d'éléments sélectionnés.
C'est dingue, on se croirait presque en SQL :-) Happy Quering :-)
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

not( expr )

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("#myTest05 div").not(".green, #blueone").css("border-color", "red");

slice( start, [end] )

Permet d'extraire un extrait d'une liste d'éléments DOM sélectionnés via l'utilisation d'indices.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

slice( start, [end] )

Tester le sélecteur :

Tester cet exemple pour changer ce message.

Le code source de cet exemple est ci après présenté :
var $div = $("#myTest06 div"); var start = 2; var end = 4; if (end == $div.length) end = 9; $div.css("background", ""); if (end) $div.slice(start, end).css("background", "#F9E3AC"); else $div.slice(start).css("background", "#F9E3AC"); $("#myTest06 span").text('$("#myTest06 div").slice(' + start +(end ? ', ' + end : '') +').css("background", "#F9E3AC");');

01 :: Finding:

add( expr )

Permet d'ajouter via une expression des éléments à une liste d'éléments déjà sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

add( expr )

Tester le sélecteur :

Background jaune aussi ajouté dans ce "p" sans "border" . great :-)

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

children( [expr] )

Permet de lister les enfants directs d'éléments DOM présents dans une liste présélectionnée.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

children( [expr] )

Tester le sélecteur :

This is the way we write the demo,

write the demo, write the demo,

This the way we write the demo so in

the morning. Found 0 children in TAG.

Le code source de cet exemple est ci après présenté :
$("#container").click(function (e) { $("#myTest08 *").removeClass("hilite"); var $kids = $(e.target).children(); var len = $kids.addClass("hilite").length; $("#results span:first").text(len); $("#results span:last").text(e.target.tagName); e.preventDefault(); return false; });

contents( )

Cette instruction permet de trouver tous les éléments fils, incluant les éléments "text". Cette instruction permet de trouver le contenu d d'un document dans le cas ou l'élément est une "iframe".
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

contents( )

Tester le sélecteur :

Bonjour Nicoweb, merci d'avoir traduit la documentation JQuery en français

Le code source de cet exemple est ci après présenté :
$("#myTest09 p").contents().not("[nodeType=1]").wrap("<b/>");

find( expr )

Cette instruction permet d'effectuer une recherche dans une liste d'éléments déjà sélectionnés.
L'instruction est utile par exemple pour extraire les éléments d'autres éléments.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

find( expr )

Tester le sélecteur :

Hello, how are you?

Me? I'm good.

Le code source de cet exemple est ci après présenté :
$("#myTest10 p").find("span").css('color','#F9BA1C');

next( [expr] )

Cette instruction permet de boucler sur les éléments suivants des éléments pré listés. Par exemple, vous souhaitez mettre à jour des "span" se trouvant à droite de "input" (message d'informations par exemple). Cette instruction vous permet de réaliser ce type d'action rapidement.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

next( [expr] )

Tester le sélecteur :

Bouton 01 -

Bouton 02 -

Bouton 03 -

Le code source de cet exemple est ci après présenté :
$("#myTest11 button[disabled]").next().text("ce bouton est désactivé");

nextAll( [expr] )

Permet de boucler sur tous les éléments présents après un élément DOM précisé et déjà sélectionné.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

nextAll( [expr] )

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("#myTest12 div:first").nextAll().addClass("after");

parent( [expr] )

Instruction qui permet de trouver tous les parents directs d'une liste d'éléments sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

eq( index )

Tester le sélecteur :

Yep, Jquery ca pète :-)

Utilisez la (la librairie...)

Le code source de cet exemple est ci après présenté :
$("#myTest13 p").parent(".selected").css("background", "yellow");

parents( [expr] )

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

parents( [expr] )

Tester le sélecteur :

Mes parents sont les éléments suivants :

Le code source de cet exemple est ci après présenté :
var parentEls = $("#myTest14 b").parents() .map(function () { return this.tagName; }) .get().join(", "); $("#myTest14 b").append("<strong>" + parentEls + "</strong>");

prev( [expr] )

Permet d'obtenir une liste d'éléments précédents pour une liste d'éléments matchés.
Attention, cette instruction ne retourne que le premier élément précédent pour chaque élément matché.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

prev( [expr] )

Tester le sélecteur :

a des enfants

Reculer d'une box

Le code source de cet exemple est ci après présenté :
var $curr = $("#myTest15 #start"); $curr.css("background", "#f99"); $("#myTest15 button").click(function () { $curr = $curr.prev(); $("#myTest15 div").css("background", ""); $curr.css("background", "#f99"); });

prevAll( [expr] )

Trouver tous les éléments précédents de l'élément sélectionné.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

prevAll( [expr] )

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("#myTest16 div:last").prevAll().addClass("before");

siblings( [expr] )

Permet d'obtenir un set d'éléments précédents pour une liste d'éléments sélectionnés. Le set peut être ensuite filtré.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

siblings( [expr] )

Tester le sélecteur :

Webjax c'est cool

JQuery ca pète

mais bon Prototype.js aussi :-)

Le code source de cet exemple est ci après présenté :
$("#myTest17 p").siblings(".selected").css("background", "yellow");

02 :: Chaining:

andSelf( )

Permet d'associer le(s) élément(s) précédent(s) la sélection courante.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

andSelf( )

Tester le sélecteur :

Nicoweb c'est cool

JQuery ca pète

Le code source de cet exemple est ci après présenté :
$("#myTest18 div").find("p").andSelf().addClass("border"); $("#myTest18 div").find("p").addClass("background");

end( )

Permet d'inverser l'opération "destructive" la plus récente en chageant le set d'éléments sélectionnés à celui qui était auparavant disponible.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

end( )

Tester le sélecteur :

Bonjour le monde

Le code source de cet exemple est ci après présenté :
$("#myTest19 p").find("span").end().css("border", "2px red solid");

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

Aucun commentaire enregistré