Partager via

Cet article a fait l'objet d'une traduction automatique.

À la pointe

Scripts de clients avec jQuery, première partie

Dino Esposito

Contenu

Le jQuery, objet
Sélecteurs
Les filtres
Filtres de formulaire
Opérations sur les jeux encapsulés
jQuery Chainability
Connaître votre HTML

Vous savez comment il est.Davantage de fonctionnalités que vous souhaitez insérer hors du navigateur Web, vous avez plus à écrire dans JavaScript.Introduit autour 1995 pour ajouter plus action aux pages de code HTML, le langage JavaScript n'a pas été expressément conçu pour les développeurs.Il a été réellement conçu pour manipuler les éléments HTML, définir des styles et réagir à l'intervention de l'utilisateur.Il a également été largement utilisé pour la validation d'entrée côté client et autres opérations légers.

Voir le utilise un peu trivial que JavaScript a été appliquée à peut entraîner à croire qu'il est facile à écrire.Mais comme il Djajadinata désigné les dans »Créer des applications Web avancées avec des techniques orientée objet« en le mai 2007 émettre deMSDN Magazine, écriture de JavaScript bon code n'est pas trivial, mais si vous comprenez il bien, vous pouvez en effet griffonner certaines fonctionnalités avancées plutôt de celui-ci.

Parmi les inconvénients de JavaScript, cependant, est qu'il est un langage (pas compilé) interprété et est donc subject pour du navigateur, enfin, interprétation.Pas tous les navigateurs traitement le même code JavaScript de la même manière.Mais les bibliothèques comme jQuery votre code JavaScript plus prévisible entre navigateurs.

Microsoft maintenant entièrement prend en charge jQuery et distribue avec l'infrastructure ASP.NET modèle-vue contrôleur (MVC).En outre, les extensions ont été développées pour complètement intégrer jQuery IntelliSense dans Visual Studio 2008 SP1.

Dans article de ce mois-ci, j'aborderai les caractéristiques de principales de la bibliothèque jQuery et activé en particulier sur CSS sélecteurs, fonction chaînage et définit renvoyé à la ligne.Dans un futur article, j'examinerai sujets plus spécifiques tels Qu'utilisez jQuery pour gérer les événements et effets, mise en cache côté pour le navigateur et demandes D'AJAX.

jQuery à une vue d'ensemble

jQuery rend JavaScript code plus facile et rapide à écrire.La bibliothèque propose des fonctions d'assistance qui considérablement augmenter votre productivité tout en réduisant votre frustration.Le code résultant est plus facile à lire et plus robuste parce que le niveau d'abstraction plus élevé masque un certain nombre de chèques et des procédures de gestion des erreurs.

La bibliothèque, écrit par John Resig, consiste en un fichier .js unique vous pouvez télécharger à partir de docs.jquery.com/Downloading_jQuery.La version plus récente est 1.2.6 qui a été publiée en le printemps de 2008.Le site téléchargement propose trois versions de la bibliothèque : décompressé, emballé et réduit.

La version non compressée est proche 100KB ; est entièrement humaine lisible et commentées.Cette version est sans aucun doute celle pour prélever pour perusal et le débogage.

La version réduite est 50KB environ.Tous les caractères supplémentaires qui ne sont pas strictement nécessaires pour implémenter la fonctionnalité ont été supprimés à partir du code source.Le code est peu commode si impossible lire des êtres humains, mais qu'il fonctionne parfaitement pour les ordinateurs.

Enfin, la version compressée est 30KB peine de taille, mais il nécessite plus de l'initialisation du temps sur le client.Le site officiel jQuery recommande que vous envisager d'obtention de la version réduite au lieu de la version compressée pour les environnements de production.En outre, vous devez envisager que compression GZip sur le réseau est pratique standard et est gérée par tous les serveurs Web et des navigateurs modernes.Compression GZip affiche la taille vers le bas à environ 20 Ko.Si vous utilisez GZip, la version compressée est assez bien inutile.

Dans un projet ASP.NET, vous devez également un jquery-1.2.6-vsdoc.js de pouvoir pour activer IntelliSense et d'un correctif logiciel Visual Studio 2008 (voir »Éditeur KB958502-JScript prise en charge des '-fichiers de documentation des vsdoc.js IntelliSense") pour jQuery IntelliSense prend complètement en charge.

Dans ASP.NET, vous pouvez utiliser un brut <script> balise pour lier la bibliothèque ou vous pouvez le répertorier dans la section de scripts du contrôle ScriptManager, comme suit :

<asp:ScriptManager id="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference path="Scripts/jquery-1.2.6.min.js" />
    </Scripts>
</asp:ScriptManager>

Notez que cette approche n'est pas recommandée avec la version actuelle d'ASP.NET, sauf si vous voulez également que la bibliothèque Microsoft AJAX incorporé dans la page. Dans ASP.NET 4.0, il sera impossible de désactiver l'inclusion des fichiers Microsoft AJAX client framework, rendant cette approche une bonne.

L'ensemble de fonctionnalités jQuery peut être divisée en quatre zones principales : requête DOM manipulation, effets et animation, AJAX et fonctions fondamentales pour manipuler des tableaux, filtrage des données et détection des fonctionnalités du navigateur.

Le jQuery, objet

Le mot « requête » dans Nom de la bibliothèque indique tout. Elle fait référence à exécuter des requêtes sur le modèle DOM de la page, qui est où jQuery obtient sa puissance.

La bibliothèque fournit une interface puissante pour sélectionner les éléments DOM qui va loin au-delà de la recherche simple d'éléments qui correspond à un donnée. Par exemple, vous pouvez facilement sélectionner tous les éléments qui partagent une classe donnée CSS, ont certains attributs, s'affichent dans une position donnée dans l'arborescence ou ont une relation à d'autres éléments. Plus important encore, vous pouvez ajouter des conditions de filtrage et vous pouvez chaîner toutes ces fonctionnalités de requête ensemble, bien que vous pouvez interroger des données dans SQL.

La racine de la bibliothèque jQuery est la fonction jQuery, définie comme suit :

var jQuery = window.jQuery = window.$ = function( selector, context ) 
{
   return new jQuery.fn.init( selector, context );
};

La fonction $ est un alias de la fonction jQuery. Lorsque vous créez un objet jQuery, vous passez un sélecteur et un contexte. Le sélecteur indique l'expression de requête ; le contexte indique la partie du DOM sur lequel exécuter la requête. Si aucun contexte n'est spécifié, la fonction jQuery recherche d'éléments DOM dans la page entière DOM.

La fonction jQuery (ainsi que son alias $) effectue des opérations sur les arguments fournis, exécute la requête et ensuite renvoie un objet jQuery nouveau contenant les résultats. Le jQuery nouvellement créé objet peut, à son tour, être plus interrogée, ou filtré, dans une nouvelle instruction ainsi que d'une chaîne d'instructions.

L'objet de jQuery racine prend en charge les signatures suivantes :

jQuery( expression, [context] )
jQuery( html, [ownerDocument] )
jQuery( elements )
jQuery( callback )

La première prend un sélecteur CSS et renvoie un tableau renvoyé à la ligne d'éléments HTML, le jeu de fractionnement soi-disant. Le second accepte une chaîne HTML, crée la sous-arborescence connexe et l'ajoute aux documents propriétaire spécifié, le cas échéant. La troisième surcharge prélève l'élément DOM ou DOM spécifié éléments. Enfin, la quatrième simplement prend une fonction de rappel et s'exécute sur le document entier, dès que document de la page est entièrement chargé.

En outre, l'objet jQuery racine comporte également quelques méthodes helper, comme indiqué dans la figure 1 . Intérêt particulier pour les développeurs est la chaque méthode, vous pouvez utiliser comme une abréviation, pour une itération manuelle, sur le contenu d'un objet jQuery — généralement les éléments DOM sélectionnés via un sélecteur CSS. Voici un extrait de code qui illustre la méthode chaque en action. La boucle traite toutes les balises <input> dans un formulaire :

$("form input").each(
    function(i) {
            this.title = "Input #" + i;    
}
);
Figure 1 rôles de serveur de transport Edge et proxy inversé pour OCS 2007
Méthodes Description
chaque (rappel) Effectue une boucle sur le contenu de l'ensemble de fractionnement et exécute la fonction de rappel spécifié.
longueur Propriété qui renvoie le nombre d'éléments dans le jeu de fractionnement.
EQ (position) Réduit le jeu de fractionnement à l'élément unique à la position spécifiée.
Get() Retourne le contenu du jeu renvoyé à la ligne sous la forme d'un tableau d'éléments DOM.
obtenir (index) Renvoie les éléments DOM à la position spécifiée dans le jeu de fractionnement.
Index (élément) Renvoie l'index base 0 dans le jeu renvoyé à la ligne de l'élément DOM spécifié, le cas échéant.

La différence entre each () et d'une boucle JavaScript manuelle est qu'each() mappe automatiquement l'objet THI » sur l'élément dans la collection en cours de traitement. La fonction de rappel, toutefois, reçoit un paramètre facultatif entier est l'index (0-base) de l'itération. Supposons Découvrez jQuery sélecteurs et leur syntaxe en fonction de CSS.

Voici l'utilisation plus simple de la fonction $ :

var elem = $("#grid");

La fonction $ dans l'extrait de code récupère élément (s) tous les DOM au dont la propriété ID correspond à l'expression spécifiée. Le symbole « # » n'appartient pas à la chaîne de code, mais est simplement un préfixe pour la fonction $ significatif des chaînes de code, les classes CSS et les noms des balises HTML. (Le symbole « # » est la partie de syntaxe CSS standard de sélection de code.) Les extraits de code précédents revient fonctionnellement à l'instruction DOM suivante :

var elem = document.getElementById("grid");

Il est important de noter que dans le modèle DOM HTML, contrairement à dans ASP.NET, plusieurs éléments peuvent partager le même code. Si un tableau d'éléments correspond le code, puis getElementById méthode est uniquement renvoie le premier élément correspondant ; getElementsByName, d'autre part, serait renvoie la collection entière.

La similitude entre les méthodes du DOM classiques et la fonction $ termine il ; la puissance de $ va loin au-delà. Via $, vous sélectionnez les éléments DOM et appliquez une fonction à chacun.

L'expression sélecteur est déterminée par la syntaxe CSS 3.0 et peut atteindre un niveau importante de complexité. la figure 2 illustre les sélecteurs de prise en charge. La liste n'est pas inclure des filtres, dont je parlerai dans un instant. C'est clé de noter que dans une hiérarchie de sélecteurs, l'ancêtre, le parent, ou l'élément précédent peut être n'importe quel sélecteur valide, non seulement un élément HTML. la figure 3 illustre quelques exemples de requêtes.

La figure 2 pris en charge jQuery sélecteurs
Sélecteur Description
#ID Renvoie le premier élément, cas échéant, dans le modèle DOM avec un attribut ID correspondant.
élément Renvoie tous les éléments avec un nom de balise correspondant.
.class Renvoie tous les éléments avec une classe CSS correspondante.
* Renvoie tous les éléments dans la page.
selector1,..., selectorN S'applique à tous les sélecteurs de base données et renvoie les résultats combinés.
ancêtre descendant Donné un ancêtre sélecteur, renvoie la collection de tous les descendants éléments qui correspondent au sélecteur de descendant. Par exemple, « div p » renvoie tous les éléments <p> dans un <div>.
parent > enfant Donné un sélecteur renvoie la collection de tous les éléments enfants correspondant le sélecteur d'enfant.
précédent + suivant Donné un sélecteur renvoie la collection de tous les éléments frères qui correspondent le sélecteur suivant et sont situés à côté le sélecteur de précédent.
précédent ~ frère Donné un sélecteur renvoie la collection de tous les éléments frères qui correspondent le sélecteur de frères et suit le sélecteur de précédent.
Figure 3 exemple jQuery sélecteurs en action
Sélecteur d'exemples Effet
Entrée de formulaire Renvoyer tous les champs d'entrée dans les balises <form> dans la page.
Entrée #Form1 Renvoie toutes les entrées de champs dans le formulaire intitulé Form1.
H2 + p Renvoie toutes les balises <p> qui se trouvent à côté un <h2> lors enfant du même parent.
Input.textBox Renvoie toutes les balises <input> dont classe CSS est textBox.
span.myClass DIV Renvoie toutes les balises <span> dont classe CSS est myClass que se trouvant dans un <div>.

Sélecteurs peuvent être plus raffinés en appliquant des filtres sur attributs, contenu, emplacement et visibilité. la figure 4 répertorie certaines des filtres plus populaires de jQuery. La référence complète est à docs.jquery.com/Selectors.

Les filtres tels que Rechercher premier et dernier éléments DOM à une position donnée dans la collection renvoyée. Vous pouvez également utiliser une syntaxe index à partir aux éléments du filtre à l'aide la eq, gt et filtres lt. Le eq filtre prélève l'élément dont l'index correspond à l'index donné, tandis que gt et lt prélèvement des éléments supérieurs ou inférieurs à un index donné.

Les filtres d'attribut sont puissants outils qui sélectionner des éléments HTML où un attribut donné est dans une relation avec une valeur donnée. Dans figure 4 , J'AI apparaissent uniquement les filtres d'attribut plus couramment utilisés. Autres filtres existent pour sélectionner des éléments dans laquelle un attribut donné commence, se termine par ou contiennent une valeur donnée. Voici la syntaxe requise :

[attribute^=value]  // begins with value
[attribute$=value]  // ends with value
[attribute*=value]  // contains value
Figure 4 jQuery filtres
Filtres de position Description
:First Renvoie le premier élément de la collection d'éléments sélectionné.
: dernier Renvoie le dernier élément de la collection d'éléments sélectionné.
: not(selector) Filtre tous les éléments correspondant le sélecteur de spécifié.
: même Renvoie tous les éléments de même dans la collection sélectionnée.
: impair Renvoie tous les éléments impaires dans la collection sélectionnée.
Filtre les enfants Description
: nth-child(expr) Renvoie tous les éléments enfants de n'importe quel parent qui correspond à l'expression donnée. L'expression peut être un index ou une séquence de mathématiques (par exemple, 3n + 1), y compris standard souches de numéros comme impair et même.
: première : enfant Renvoie tous les éléments qui sont le premier enfant de son parent.
: dernier enfant Renvoie tous les éléments qui sont le dernier enfant de son parent.
: uniquement-enfant Renvoie tous les éléments qui sont le seul enfant de leur parent.
Filtres de contenu Description
: contains(text) Renvoie tous les éléments qui contiennent le texte spécifié.
: vide Renvoie tous les éléments avec sans enfants. (Texte est considéré comme un nœud enfant.)
: has(selector) Renvoie tous les éléments qui contiennent au moins un élément qui correspond au sélecteur de donnée.
: parent Renvoie tous les éléments qui ont au moins un enfant. (Texte est considéré comme un nœud enfant.)
Filtres de visibilité Description
: masqué Renvoie tous les éléments qui sont actuellement masqués de vue. Saisie d'éléments de type "hidden sont ajoutés à la liste.
: visible Renvoie tous les éléments qui sont actuellement visibles.
Filtre attribut Description
[attribut] Renvoie tous les éléments qui possèdent l'attribut spécifié.
[attribut = valeur] Renvoie tous les éléments qui ont l'attribut spécifié à la valeur spécifiée.
[attribut! = valeur] Renvoie tous les éléments dont l'attribut spécifié (le cas échéant) a une valeur différente de celle donnée.

Filtre attribut peut également être lié par simplement placer deux ou plusieurs d'entre eux côte à côte, comme suit :

[align=right][valign=top]

Un filtre particulièrement puissant est nième enfant. Il prend en charge un certain nombre de différentes expressions entrées, comme illustré ici :

:nth-child(index)
:nth-child(even)
:nth-child(odd)
:nth-child(sequence)

Le premier format sélectionne l'enfant n d'éléments HTML dans le sélecteur de source où n désigne l'index fourni. Tous les éléments placés à toute position ou impaire (0-base) sont renvoyés si vous spécifiez le filtre ou impair. Enfin, vous pouvez transmettre nième enfant comme expression racine d'une séquence mathématique comme 3n pour indiquer le multiple de 3.

Par exemple, le sélecteur suivant prélève toutes les lignes d'une table (intitulée DataGrid1) se trouvent sur l'emplacement déterminé par la séquence 3n + 1, (1, 4, 7 et ainsi de suite) sans oublier qu'il est un index basé sur zéro :

#DataGrid1 tr:nth-child(3n+1)

Celle qui suit est une expression plus complexe et illustre la puissance incroyable et la flexibilité de sélecteurs jQuery :

#DataGrid1 tr:nth-child(3n+1):has(td[align=right]) td:odd

Il s'affiche comme suit : de toutes les lignes tableau sélectionnées à l'étape précédente (positionner 1, 4, 7 et ainsi de suite), maintenant vous seulement prenez ceux qui ont une cellule (une balise <td>) où l'attribut Aligner est égal à la valeur de droite. En outre, les lignes restantes, vous prend uniquement les cellules de colonnes avec un index impair. Prenons la table HTML en figure 5 . Dans la figure 6 , la cellule avec un arrière-plan jaune est le résultat de la requête.

Figure 5 une table HTML

<table id="DataGrid1" border="1">
    <tr>
       <td>Column1</td>
       <td>Column2</td></tr>
    <tr>
       <td>Val1</td>
       <td align="right">Num1</td></tr>
    <tr>
       <td>Val2</td>
       <td align="right">Num2</td></tr>
    <tr>
       <td>Val3</td>
       <td align="right">Num3</td></tr>
    <tr>
       <td>Val4</td>
       <td>Num4</td></tr>
    <tr>
       <td>Val5</td>
       <td>Num5</td></tr>
    <tr>
       <td>Val6</td>
       <td>Num6</td></tr>
    <tr>
       <td>Val7</td>
       <td>Num7</td></tr>
</table>

fig06.gif

La figure 6 Sélection d'une cellule spécifique dans une table

Filtres de formulaire

Comme nous l'avons mentionné, la syntaxe générale de sélecteurs jQuery est proche de la syntaxe de sélecteurs CSS 3.0, simplement étendu avec certains éléments pseudo supplémentaires tels que ceux listés dans La figure 7 .

Le : filtre d'entrée, en particulier, fait référence à tous les éléments entrées logiques peut rechercher dans une page et n'est pas limité aux balises <input>. En fait, il inclut éléments <textarea> et <select> éléments utilisés pour afficher les listes listboxes et de liste déroulante. Sélecteurs de la figure 7 ne correspondent pas sélecteurs CSS, mais fournissent raccourcis pratiques pour chercher homogènes éléments tels que toutes les balises saisies d'un type donné. Par exemple, le sélecteur : texte est fonctionnellement équivalent à celui-ci :

form input[type=text]
Figure 7 filtres de formulaire
Sélecteur Description
: entrée Renvoie tous les éléments qui ont un rôle dans la collecte des données entrées, y compris textarea et des listes déroulantes.
: texte Renvoie toutes les entrées des éléments dont l'attribut type est texte.
: mot de passe Renvoie toutes les entrées éléments dont l'attribut type est mot de passe.
: case à cocher Renvoie toutes les entrées des éléments dont l'attribut type est case à cocher.
: radio Renvoie toutes les entrées éléments dont l'attribut type est radio.
: envoyer Renvoie tous les éléments entrées dont l'attribut type est Envoyer.
: réinitialiser Renvoie toutes les entrées des éléments dont l'attribut type est réinitialisé.
: image Renvoie toutes les entrées des éléments dont l'attribut type est une image.
: bouton Renvoie toutes les entrées éléments dont l'attribut type est le bouton.
: fichier Renvoie toutes les entrées des éléments dont l'attribut type est le fichier.
: masqué Renvoie toutes les entrées des éléments dont l'attribut type est masqué.
: activé Renvoie l'entrée de tous les éléments qui sont actuellement activées.
: désactivé Renvoie toutes les entrées des éléments qui sont actuellement désactivées.
: activée Renvoie tous les éléments de case à cocher ou radio sont actuellement activées.
: sélectionné Renvoie tous les éléments de liste qui sont actuellement sélectionnés.

Autres applications d'assistance intéressants sont disponibles pour récupérer toutes les entrées d'éléments dans une page qui sont activés ou désactivés et toutes les cases à cocher et cases d'option vérifiée ainsi que liste articles actuellement sélectionnés.

Opérations sur les jeux encapsulés

Éléments HTML correspondant à un sélecteur sont renvoyés rassembler dans une nouvelle instance de l'objet jQuery. Cet objet intègre un tableau de JavaScript avec toutes les références DOM. Les résultats sont souvent considérés comme un ensemble renvoyé à la ligne. Un jeu de fractionnement est jamais null, même si aucun élément correspondant n'a été trouvé. Vous vérifier ce problème en examinant la propriété de longueur de l'objet jQuery, comme illustré ici :

// All TDs with a child IMG
var w_set = new jQuery("#DataGrid1 td:has(img))");
if (w_set.length == 0)
    alert("No match found.");
else
    alert(w_set.length)

Le niveau élevé de flexibilité affiché par jQuery est une fonctionnalité très pour que, mais une fois tous les éléments que vous recherchez, vous devez les traiter. L'approche possible la plus simple implique la configuration d'une boucle et exécution d'une fonction sur chaque élément de la collection :

var ws = $("#DataGrid1 tr:nth-child(3n+1)");
for(i = 0; i<ws.length; i++)
{
   processElement(ws[i]);
}
function processElement(elem)
{
   ...
}

Dans ce une itération manuelle, vous accédez aux éléments DOM directement, comme dans classique programmation JavaScript.

La bibliothèque jQuery offre quelques autres gammes qui sont fonctionnellement équivalentes à une itération manuelle. Itérations jQuery entraîner assez, bien plus compact et encore plus lisible le code. La première approche est basée sur la fonction de chaque.

Comme nous l'avons vu, dans jQuery chaque la fonction exécute un rappel définis par l'utilisateur sur n'importe quel élément associé à l'ensemble de fractionnement. Un très grand nombre de méthodes opérationnelles, cependant, existe pour faciliter encore plus rapide et plus facile à exécuter des opérations courantes sur le jeu renvoyé à la ligne. La fonction css vous permet par exemple, d'appliquer des styles CSS à l'ensemble renvoyé à la ligne. Voici un exemple qui définit l'arrière-plan couleur et bordure le style d'entrée tous les éléments dans un formulaire :

$("form input").css(
   {'background-color' : 'yellow', 
    'border-style' : 'dashed'}
);

Il est vrai, cet exemple court est un peu trompeur car il peut suggérer que jQuery doit être utilisée pour éléments CSS lui-même bien. La fonction css est grande lorsqu'il travaille sur les styles appliqués dynamiquement qui dépendent d'interaction utilisateur ni certaines autres conditions d'exécution.

De même, vous pouvez ajouter, supprimer et même basculer une classe CSS sur les éléments dans le jeu de fractionnement. Pour cela via le addClass, removeClass et fonctions toggleClass. La fonction attr permet de que vous définissez une ou plusieurs attributs sur tous les éléments. Par exemple, voici comment désactiver la saisie de tous les éléments :

$("form input").attr(
   {'disabled' : 'disabled'}
);

La fonction html définit le contenu HTML d'une balise. Elle utilise la propriété inner­HTML en interne. Pour définir le texte interne d'une balise, au lieu de cela, vous utilisez la fonction texte en passant le texte pour définir l'argument. Ceci est un bon moyen pour comprendre les avantages d'une bibliothèque cross-browser comme jQuery. InnerHTML de la propriété peut être considéré comme une propriété standard de-facto pris en charge par tous les navigateurs de la même manière.

La même ne peut pas être appelée pour la propriété analogue seulement définit le texte. Cette propriété est innerText dans Internet Explorer et text­Element dans Firefox. La fonction texte jQuery masque différences et fournit les mêmes fonctionnalités sur tous les navigateurs.

jQuery Chainability

Un des meilleures fonctionnalités des jQuery est son chainability, qui est possible car l'objet jQuery lui-même, ainsi que la plupart des fonctions et des filtres, renvoyer un objet jQuery. L'objet renvoyé contient le jeu renvoyé à la ligne d'origine que modification par la fonction elle-même. Par exemple, si vous appliquez la fonction css à un ensemble renvoyé à la ligne, l'objet jQuery renvoyé contient le même ensemble d'éléments en même temps qu'avec un ensemble de modification de styles CSS. Si vous appliquez un filtre, vous allez obtenir en un plus petit comme filtrées par la fonction. Il est important de noter que vous avez également disponible n'est pas une fonction pour exclure tous les éléments qui correspondent à la requête spécifiée.

Concaténation de fonctions jQuery n'a pas pu être plus facile. Tout ce que vous avez à faire est joindre un nouvel appel de fonction à l'objet jQuery renvoyé par l'appel précédent. Voici un exemple :

$("form input")
.not("[type!=text]")
.css(
   {'background-color' : 'yellow', 
    'border-style' : 'dashed'})
.attr("value", "test");

Ici, l'exemple d'expression sélectionne tous les champs entrées où l'attribut type est égal à texte et définit quelques styles CSS et l'attribut value de valeurs fixes. (Notez que dans l'exemple, J'AI utilisé le pas fonction uniquement pour ajouter un lien troisième à la chaîne. Le résultat de la non condition peut être intégrée dans la requête $ entraînant même plus clair de code.)

Il va sans dire que méthode de chaînage produit plus compacte code ; mais il n'est pas nécessairement entraîner accélérer l'exécution du code. Le chaînage est une technique que vous, en tant que développeur, pouvez ou peut ne pas vous à l'aise avec. Si vous rencontrez troubles avec un de ces expressions compactes, vous souhaiterez peut-être diviser en parties pour simplifier le débogage.

Enfin, notez que pas toutes les méthodes jQuery renvoient un objet jQuery modifié. Méthodes comme html ou texte, par exemple, uniquement retour une chaîne qui respectivement pointe vers le contenu HTML ou texte du premier élément de la source de regroupé ensemble. Pour la syntaxe exacte de jQuery méthodes voir docs.jquery.com/Main_Page.

Connaître votre HTML

Plus vous explorez la profondeur de jQuery, plus vous comprendre l'importance de savoir en détail le code HTML que vous utilisez. Contrôles serveur ASP.NET ont tendance à masquer la structure de l'HTML leur sortie. D'autre part, les contrôles serveur ont été simplement présentés permettent aux développeurs de se concentrer sur attributs déclaratives plutôt que détails HTML. Années d'expérience se qu'il n'a pas toujours la bonne approche.

Aujourd'hui, vous devez conserver votre code HTML sous contrôle total pour d'accessibilité, style et conformité XHTML. Au passage, ce fait établit un lien subtil entre jQuery et l'infrastructure ASP.NET MVC. Et il est sans correspondance que l'infrastructure ASP.NET MVC inclut la version plus récente de jQuery dans le package.

Ceci dit, il est également important de noter que liant logique balisage moyen des sélecteurs jQuery peut créer un couplage indésirable entre logique et la forme du modèle DOM, qui peut entraîner dans les applications difficiles à gérer.

Enfin, si vous recherchez pour plusieurs idées d'utilisation de JavaScript dans façons intéressantes, extraire la liste des Articles JavaScript à sur MSDN.

Envoyez vos questions et commentaires pour Dino à cutting@microsoft.com.

Dino Esposito est un architecte IDesign et le co-auteur de Microsoft .NET: Architecting Applications for the Enterprise (Microsoft Press, 2008). Basé en Italie, Dino intervient fréquents événements de secteur d'activité dans le monde entier. Vous pouvez joindre son blog à weblogs.asp. NET/despos.