Attributs et styles jQuery (2)

La lecture et la modification de la structure HTML d'un élément ou du contenu textuel d'un élément sont des opérations DOM courantes. jQuery propose deux méthodes pratiques pour un tel traitement. html() et .text()

. Méthode html()

Obtenez le contenu HTML du premier élément correspondant de la collection ou définissez le contenu html de chaque élément correspondant. Il existe trois utilisations spécifiques :

.html ( ) Sans transmettre de valeur, vous obtenez le contenu HTML du premier élément correspondant de la collection

.html( htmlString ) Définissez le contenu HTML de chaque élément correspondant

.html( function( index , oldhtml) ) est utilisé pour renvoyer une fonction permettant de définir le contenu HTML

Remarque : La méthode .html() utilise l'attribut innerHTML du DOM pour le traitement, donc la chose la plus importante à laquelle prêter attention est la définition et obtention. Question, cette opération concerne l'ensemble du contenu HTML (pas seulement le contenu texte)

Regardons quelques exemples de la méthode html() suivante

Comment pour changer html Le contenu de l'élément est codé comme suit :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div id="dv">php 中文网</div>


    <script type="text/javascript">
          $('#dv').html("m.sbmmt.com");
    </script>
</body>
</html>

Modifié le contenu de la balise div

2 Ajouter le contenu

Par exemple, dans l'exemple ci-dessus, nous devons ajouter une URL après le ｽｽｐ中文网, alors comment devons-nous implémenter

Veuillez consulter le code suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div id="dv">php 中文网</div>

    <script type="text/javascript">
          $('#dv').append("m.sbmmt.com");
    </script>
</body>
</html>

Comme dans l'exemple ci-dessus, cela ajoutera un www à notre balise div L'URL de .php.cn

méthodes après et avant

after : Insérer du contenu HTML après tous les éléments correspondants

before : Insérer du contenu HTML avant tous les éléments correspondants

Par exemple, dans notre exemple ci-dessus, comment ajouter du contenu avant ou après la balise div

L'exemple suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div id="dv">php 中文网</div>

    <script type="text/javascript">
          $('#dv').before("欢迎来到：");

          $("#dv").after("学习编程");
    </script>
</body>
</html>

méthode text()

Obtient le contenu textuel combiné de chaque élément de l'ensemble d'éléments correspondant, y compris leurs descendants, ou définit le contenu textuel de chaque élément de l'ensemble d'éléments correspondant sur le contenu textuel spécifié. , il existe trois utilisations spécifiques :

.text() Obtient le texte fusionné de chaque élément de l'ensemble d'éléments correspondant, y compris leurs descendants

.text( textString ) est utilisé pour définir le contenu de l'élément correspondant Le texte de

.text( function(index, text) ) est utilisé pour renvoyer une fonction

qui définit le contenu du texte. Veuillez consulter l'exemple suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div id="dv">php 中文网</div>

    <script type="text/javascript">
          alert($('#dv').text());
    </script>
</body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div id="dv">php 中文网</div> <script type="text/javascript"> $('#dv').html("m.sbmmt.com"); </script> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Attributs et styles jQuery (2)

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]