Méthode JQuery.Core

Cette page est propulsée par


Cette page Webjax vous présente les fonctionnalités, méthodes fondamentales de la librairie, du framework JQuery.
La page présente 4 types d'expressions, objets, méthodes JQuery :

• Les méthodes JQuery
• Les objets d'accès JQuery
• Les plugins JQuery
• Les méthodes d'interopérabilité JQuery

#00 :: Les méthodes JQuery #01 :: Les objets d'accès JQuery #02 :: Les plugins JQuery #03 :: Les méthodes d'interopérabilité JQuery

00 :: Les méthodes JQuery

JQuery(expression, context)

Vous pouvez vous servir du sélecteur JQuery pour modifier les valeurs CSS d'éléments répondant à des critères de recherche.
Par exemple la ligne de code suivante va permettre de trouver et de modifier les éléments répondant aux critères CSS indiqués : $("div > p").css("border", "3px solid black");
Testez l'exemple ci après :

mon nom est text_00

mon nom est text_01

mon nom est text_02

01 :: Les objets d'accès JQuery

each( callback )

Permet d'éxécuter une fonction dans un contexte d'éléments identifiés.
$(document.body).click(function () { $("div").each(function (i) { if (this.style.color != "blue") { this.style.color = "blue"; } else { this.style.color = ""; } }); });
La ligne de code suivante vous permet de définir qu'à chaque évènement 'click' la couleur de texte des éléments 'div' changera de rien vers 'blue' ou de 'blue' vers rien selon le statut en cours.
Testez l'exemple ci après (cliquer le bouton, puis n'importe ou) :

size( )

Compte le nombre d'éléments dans un objet JQuery.
$(document.body).click(function () { $(document.body).append($("<div>")); var n = $("div").size(); $("span").text("There are " + n + " divs." + "Click to add more."); }).click();
La ligne de suivante vous permet de définir qu'à chaque évènement 'click', une zone 'div' sera ajoutée.
Pour votre convenance un message d'informations rappelle le nombre d'éléments déjà existants.
Testez l'exemple ci après (cliquer le bouton, puis n'importe ou) :

length( )

Compte le nombre d'éléments dans un objet JQuery.
$(document.body).click(function () { $(document.body).append($("<strong>")); var n = $("div p strong").length(); $("span").text("There are " + n + " strongs." + "Click to add more."); }).click();
La ligne de suivante vous permet de définir qu'à chaque évènement 'click', une zone 'div' sera ajoutée.
Pour votre convenance un message d'informations rappelle le nombre d'éléments déjà existants.
Testez l'exemple ci après (cliquer le bouton, puis n'importe ou) :

eq( position )

Permet de réduire une sélection d'éléments à un seul élément positionné.
$("p").eq(1).css("color", "red");
Le code ci avant permet de se fixer sur le deuxième élément de texte 'p'.
Testez l'exemple ci après :

mon premier extrait de texte

mon second extrait de texte

get( )

Permet d'accéder à un jeu d'éléments sélectionnés.
function disp(divs) { var a = []; for (var i = 0; i < divs.length; i++) { a.push(divs[i].innerHTML); } $("span").html(a.join("<br/>")); } disp( $("div > p > strong").get().reverse() );
Les lignes de code ci-avant vous permettent d'afficher le contenu des éléments 'strong' contenus dans des éléménts 'p' eux mêmes contenus dans des éléments 'div'. Un message est affiché dans le premier élément 'span'.
Notez que le message affiche les valeurs en ordre inversé du fait de l'utilisation de 'reverse()' .
Testez l'exemple ci après :
aucun message chargé

mon message en strong 00

mon message en strong et sans strong

mon message en strong 01

index( subject )

Permet de retrouver l'identifiant de 0 à n dans un document DOM d'un élément DOM.
$("div").click(function () { // this is the dom element clicked var index = $("div").index(this); $("span").text("That was div index #" + index); });
Les lignes de code ci-avant permettent d'afficher dans le premier élément 'span' un message d'informations sur l'identifiant d'un élément cliqué. Dans cet exemple, l'identifiant sera égal à -1 si l'élément cliqué n'est pas un élément 'div'.
'this' représente l'élément cliqué.
Testez l'exemple ci après :
aucun message chargé

Cliquez moi pour me tester

Allez vous me cliquer pour tester ?

Oui vous allez me cliquer pour tester

02 :: Les plugins JQuery

03 :: Les méthodes d'interopérabilité JQuery

jQuery.noConflict( )

Exécuter cette méthode vous permet de rendre disponible l'opérateur '$' à la première librairie qui le déclare. Cela permet d'être sûr que JQuery n'entre pas en conflit au sujet de l'opérateur '$' avec d'autres librairies (prototype par exemple). Si JQuery ne possède plus l'opérateur '$' vous devrez utiliser l'objet 'JQuery' pour écrire votre code.
Par exemple, là ou vous auriez écrit '$("div p")' vous devrez écrire 'JQuery("div p")'.

jQuery.noConflict( extreme )

Permet d'inverser le contrôle de l'opérateur '$'. A utiliser avec prudence !!!.
Cet appel est plus extrème que le simple appel 'noConflict()'. En effet il permet de complètement défaire ce qui a été fait par JQuery. Cette méthode n'est à utiliser qu'en cas d'extrèmes besoins au sein d'environnements potentiellement sujet à des conflits.

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

Aucun commentaire enregistré