jQuery succinctement Manipulation jQuery

Création, utilisation et ajout de HTML à la volée

Vous pouvez créer un balisage HTML à la volée en transmettant à la fonction jQuery une chaîne de caractères HTML brut..

       

Il est important de noter que lors de la création de structures DOM à l'aide de la fonction jQuery, seuls les éléments racines de la structure sont ajoutés au groupe d'encapsuleurs. Dans l'exemple de code précédent, le

les éléments seront les seuls éléments dans le wrapper.

Nous pouvons utiliser le trouver() méthode pour opérer sur n'importe quel élément de la structure HTML une fois celle-ci créée.

       

Après avoir utilisé le code HTML nouvellement créé, il est également possible de l'ajouter dans le DOM à l'aide de l'une des méthodes de manipulation de jQuery. Ci-dessous, nous utilisons le ajouter à() méthode pour ajouter le balisage à la page.

       

Remarques: Éléments simples qui ne contiennent pas d'attributs - par exemple. $ ('

') - sont créés via le document.createElement Méthode DOM, alors que tous les autres cas reposent sur la innerHTML propriété. En fait, vous pouvez passer directement à la fonction jQuery un élément créé avec document.createElement -par exemple. $ (document.createElement ('div')).

La chaîne HTML transmise à jQuery ne peut pas contenir d’éléments qui pourraient être considérés comme non valides à l’intérieur d’un objet.

élément.

La chaîne HTML transmise à la fonction jQuery doit être bien formée.

Vous devez ouvrir et fermer tous les éléments HTML lors du passage à HTML jQuery. Ne pas le faire pourrait entraîner des bugs, principalement dans Internet Explorer. Juste pour votre sécurité, fermez toujours vos éléments HTML et évitez d’écrire des raccourcis HTML - par exemple. $ (

).


Grokking la méthode index ()

Vous pouvez déterminer l’index d’un élément du groupe de wrapper en passant cet élément à la indice() méthode. Par exemple, supposons que vous ayez un ensemble d’emballages contenant tous les

éléments dans une page Web, et vous voudriez connaître l'index du dernier
élément.

    
0
1
2
3

L'utilisation de indice() ne frappe pas vraiment à la maison jusqu'à ce que nous examinions comment il peut être utilisé avec des événements. Par exemple, en cliquant sur le bouton

éléments dans le code ci-dessous, nous pouvons passer le clic
élément (en utilisant le mot clé ce) au indice() méthode pour déterminer le cliqué
index de.

    
texte de navigation
texte de navigation
texte de navigation
texte de navigation

Méthode Grokking the text ()

On pourrait supposer à tort que le texte() Cette méthode ne renvoie que le nœud de texte du premier élément d'un ensemble d'encapsuleurs. Cependant, il joindra en réalité les nœuds de texte de tous les éléments contenus dans un ensemble d'encapsuleurs, puis renverra la valeur concaténée en tant que chaîne unique. Assurez-vous de connaître cette fonctionnalité, sinon vous risquez d'obtenir des résultats inattendus..

    
1,
2,
3,
4

Mettre à jour ou supprimer des caractères à l'aide d'une expression régulière

Utiliser le JavaScript remplacer() En combinaison avec certaines fonctionnalités de jQuery, nous pouvons très facilement mettre à jour ou supprimer tout motif de caractères du texte contenu dans un élément.

    

Je déteste vraiment utiliser JavaScript. Je veux dire vraiment le déteste! C'est le meilleur twister jamais!

Vous pouvez également mettre à jour tous les caractères contenus dans une chaîne renvoyée par html (). Cela signifie que vous pouvez non seulement mettre à jour du texte, mais également mettre à jour et remplacer des éléments DOM via une expression régulière.


Grokking the .contents (), méthode

le .Contenu() Cette méthode peut être utilisée pour rechercher tous les nœuds d'élément enfant, y compris les nœuds de texte contenus dans un élément. Cependant, il y a un hic. Si le contenu récupéré ne contient que des nœuds de texte, la sélection sera placée à l'intérieur du wrapper défini en tant que nœud de texte unique. Toutefois, si le contenu que vous récupérez comporte un ou plusieurs nœuds d’élément parmi les nœuds de texte, le .Contenu() La méthode contiendra des noeuds de texte et des noeuds d'élément. Examinez le code ci-dessous pour saisir ce concept.

    

J'aime utiliser jQuery!

J'aime vraiment en utilisant jQuery!

Notez que lorsqu'un élément du groupe d'encapsulation est un nœud de texte, nous devons extraire la valeur à l'aide de .get (0) .nodeValue. le Contenu() Cette méthode est pratique pour extraire les valeurs de nœud de texte. Il est possible d'extraire uniquement les nœuds de texte d'une structure DOM à l'aide de Contenu().

    

jQuery me donne plus Puissance que tout autre outil Web!


Utilisation de remove () ne supprime pas les éléments de l'ensemble wrappeur

Quand vous utilisez retirer(), un extrait de DOM du DOM, les éléments contenus dans la structure DOM supprimée sont toujours contenus dans le groupe d'encapsuleurs. Vous pouvez supprimer un élément, agir sur cet élément, puis le replacer dans le DOM, le tout dans une seule chaîne jQuery..

    
me retirer

Le point ici est que juste parce que vous retirer() éléments ne signifie pas qu'ils sont supprimés de l'ensemble d'encapsuleurs jQuery.