Webjax.eu :: Attributs JQuery

8000 Webjax.eu :: Attributs JQuery

Visualisation d'une page Webjax

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:

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 :

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 :

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 :

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

ico time

: 11/03/2008 22:05:32 | ico tag

ico tag

: JQuery, attributs, attributes, javascript, framework, ajax, library, jquery, j, query, Framework, Javascript, Library, Ajax, asyncronous, web2.0, ria, dom, control, enha,

ico com

Aucun commentaire enregistré

ERREUR :: impossible de cr�er la nouvelle visite.
Access denied for user: 'dbo202340466@%' to database 'db202340466'1044