Attributs JQuery

Cette page est propulsée par


Cette page Webjax vous présente les fonctionnalités, méthodes fondamentales de manipulations d'attributs DOM.
L'objet fait partie du framework Javascript JQuery.



#00 :: Attr: #01 :: Class: #02 :: HTML: #03 :: Text: #04 :: Value:

00 :: Attr:

attr( name ) , attr( properties ) , attr( key, value ) , attr( key, fn )

Cette instruction permet de travailler, de sélection des éléments DOM en se basant sur les attributs DOM.

• attr( name ) : permet de lire la valeur d'un attribut pour une liste d'éléments sélectionnés à partir de son nom (ndr : d'attribut)
• attr( properties ) : permet d'assigner à un élément DOM un objet "clé/valeur key/value". Les clés de l'objet sont les attributs et les valeurs les valeurs des nouveaux attributs.
• attr( key, value ) : permet de définir un attribut et à sa valeur (uni-assignation).
• attr( key, fn ) : permet d'accrocher une fonction en lieu et place d'une valeur simple pour un attribut d'une liste d'éléments DOM sélectionnés

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

attr( name ) , attr( properties ) , attr( key, value ) , attr( key, fn )

Tester l'exemple :

Nicoweb est une structure freelance française...

La valeur de l'attribut "title" de l'élément "em" est :

Tester l'exemple :

Tester l'exemple :

Bouton 00 Bouton 01 Bouton 02

Tester l'exemple :

Zero-th

First

Second

Le code source de cet exemple est ci après présenté :
function demo00(){ var title = $("#myTest00 em").attr("title"); $("#myTest00 div").text(title); } function demo00a(){ $("#myTest00a img").attr({ src: "http://www.webjax.eu/images/logo_web_0.1.png", title: "Webjax.eu", alt: "Webjax Logo" }); $("#myTest00a div").text($("img").attr("alt")); } function demo00b(){ $("#myTest00b button:gt(1)").attr("disabled","disabled"); } function demo00c(){ $("#myTest00c div").attr("id", function (arr) { return "div-id" + arr; }) .each(function () { $("span", this).html("(ID = '<b>" + this.id + "</b>')"); }); }

removeAttr( name )

Cette instruction vous permet de supprimer un attribut d'un élément DOM sélectionné.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

Test du sélecteur "#id"

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("button").click(function () { $("#myTest01 input").removeAttr("disabled").focus().val("le champ est désormais éditable"); });

01 :: Class:

addClass( class ) , hasClass( class ) , removeClass( [class] ) , toggleClass( class )

Ces instructions vous permettent d'influer sur les valeurs de classes CSS attribuées ou non à des éléments DOM pré-sélectionnés. Les instructions sont ci après décrites :

• addClass( class ) : instruction qui permet d'ajouter une classe CSS à un élément DOM sélectionné
• hasClass( class ) : instruction qui permet de tester la présence d'une classe CSS sur un élément DOM sélectionné
• removeClass( [class] ) : instruction qui permet de supprimer une classe CSS sur un élément DOM sélectionné
• toggleClass( class ) : instruction qui permet de "toogler" c'est à dire d'interchanger l'assignation d'une classe CSS sur un élément DOM sélectionné.

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

addClass( class ) , hasClass( class ) , removeClass( [class] ) , toggleClass( class )

Tester le sélecteur :

Hello

and

Goodbye

Tester le sélecteur :

Hello

Goodbye

est ce que le 1er paragraphe est en "class" "selected" ? :

est ce que le dernier paragraphe est en "class" "selected" ? :

est ce que un des paragraphes est en "class" "selected" ? :

Tester le sélecteur ('even' sélectionne les pairs de la sélection):

Hello

and

then

Goodbye

Tester le sélecteur :

Cliquez pour toogle

la classe CSS "highlight"

sur ces

paragraphes

Le code source de cet exemple est ci après présenté :
function demo02(){ $("#myTest02 p:last").addClass("selected"); } function demo02a(){ $("#myTest02a div#result1").append($("p:first").hasClass("selected").toString()); $("#myTest02a div#result2").append($("p:last").hasClass("selected").toString()); $("#myTest02a div#result3").append($("p").hasClass("selected").toString()); } function demo02b(){ $("#myTest02b p:even").removeClass("blue"); } function demo02c(){ $("#myTest02c p").click(function () { $(this).toggleClass("highlight"); }); }

02 :: HTML:

html( )

Cette instruction vous permet de lire le contenu HTML d'un élément sélectionné.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

html( )

Tester le sélecteur :

Click to change the html

to a text node.

Le code source de cet exemple est ci après présenté :
$("#myTest03 p").click(function () { var htmlStr = $(this).html(); $(this).text(htmlStr); });

html( val )

Cette instruction vous permet de mettre à jour le contenu HTML d'une liste d'éléments sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

html( val )

Tester le sélecteur :

Hello my World

Le code source de cet exemple est ci après présenté :
$(document).ready(function(){ $("#myTest04 div").html("<span class="green">Nicoweb <b>under the blue sky</b></span>"); });

03 :: Text:

text( )

Cette instruction vous permet de lire le contenu texte possiblement combiné d'un ou d'éléments DOM matchés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

text( )

Tester le sélecteur :

Test Paragraph.

Le code source de cet exemple est ci après présenté :
var str = $("myTest05 p:first").text(); $("#myTest05 p:last").html(str);

text( )

Cette instruction vous permet de d'écrire le contenu texte possiblement d'un ou d'éléments DOM matchés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

text( )

Tester le sélecteur :

Mon lorem ipsum de test

Le code source de cet exemple est ci après présenté :
$("#myTest06 p").text("<b>Nicoweb</b> édite le site Webjax.eu .");

04 :: Value:

val( )

Lit l'attribut "value" du premier élément DOM trouvé. Vous pouvez lire les valeurs de "select" et de "select multiple".
Si vous souhaitez lire les valeurs de cases à cocher ou boutons radios, utilisez ":checked" et ":selected" .
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

html( )

Tester le sélecteur :

Single Single2 Multiple Multiple2 Multiple3

Le code source de cet exemple est ci après présenté :
function displayVals() { var singleValues = $("#single").val(); var multipleValues = $("#multiple").val() || []; $("#myTest07 p").html("<b>Select Unique :</b> " + singleValues + " <b>Select Multiple:</b> " + multipleValues.join(", ")); } function demo07(){ $("#myTest07 select").change(displayVals); displayVals(); }

val( val )

Permet d'écrire l'attribut "value" d'un élément DOM sélectionné.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

html( )

Tester le sélecteur :

JQuery ça pète

Le code source de cet exemple est ci après présenté :
$("#myTest08 button").click(function () { var text = $(this).text(); $("#myTest08 input").val(text); });

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

Aucun commentaire enregistré