Maison > interface Web > Questions et réponses frontales > Quelles fonctions sont implémentées par la méthode HTML dans jquery

Quelles fonctions sont implémentées par la méthode HTML dans jquery

WBOY
Libérer: 2022-05-10 11:44:28
original
2715 Les gens l'ont consulté

Fonction : 1. Renvoie le contenu de l'élément, la syntaxe est "element object.html()" ; 2. Définissez le contenu de l'élément, la syntaxe est "element object.html (nouveau contenu de l'élément)" ; fonctions pour définir le contenu de l'élément, syntaxe "element object.html(function(index position of the selector, current content of the selector))".

Quelles fonctions sont implémentées par la méthode HTML dans jquery

L'environnement d'exploitation de ce tutoriel : système windows10, version jquery3.2.1, ordinateur Dell G3.

Quelles fonctions sont implémentées par la méthode html dans jquery

1. Renvoie le contenu de l'élément

Lorsque cette méthode est utilisée pour renvoyer une valeur, elle renverra le contenu du premier élément correspondant.

Syntaxe

$(selector).html()
Copier après la connexion

L'exemple est le suivant :

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    alert($("p").html());
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">改变 p 元素的内容</button>
</body>
Copier après la connexion

Résultat de sortie :

Quelles fonctions sont implémentées par la méthode HTML dans jquery

Après avoir cliqué sur le bouton :

Quelles fonctions sont implémentées par la méthode HTML dans jquery

2. Définir le contenu de l'élément

Lorsque vous utilisez cette méthode pour définir une valeur , il sera écrasé Le contenu de tous les éléments correspondants.

Syntaxe

$(selector).html(content)
Copier après la connexion

contenu Facultatif. Spécifie le nouveau contenu de l'élément sélectionné. Ce paramètre peut contenir des balises HTML.

L'exemple est le suivant :

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").html("Hello <b>world!</b>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">改变 p 元素的内容</button>
</body>
Copier après la connexion

Résultat de sortie :

Quelles fonctions sont implémentées par la méthode HTML dans jquery

Après avoir cliqué sur le bouton :

Quelles fonctions sont implémentées par la méthode HTML dans jquery

3. Utilisez des fonctions pour définir le contenu des éléments

Utilisez des fonctions pour définir le contenu des éléments. tous les éléments correspondants.

Syntaxe

$(selector).html(function(index,oldcontent))
Copier après la connexion

Description du paramètre

function(index,oldcontent)

Spécifie une fonction qui renvoie le nouveau contenu de l'élément sélectionné.

index - facultatif. Reçoit la position d'index du sélecteur.

oldcontent - facultatif. Reçoit le contenu actuel du sélecteur.

L'exemple est le suivant :

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").html(function(n){
    return "这个 p 元素的 index 是:" + n;
    });
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>改变 p 元素的内容</button>
</body>
Copier après la connexion

Résultat de sortie :

Quelles fonctions sont implémentées par la méthode HTML dans jquery

Après avoir cliqué sur le bouton :

Quelles fonctions sont implémentées par la méthode HTML dans jquery

Tutoriels vidéo associés recommandés : Tutoriel vidéo jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal