recherche

Maison  >  Article  >  interface Web  >  À propos de la différence entre text() val() et html() dans jQuery

À propos de la différence entre text() val() et html() dans jQuery

不言
不言original
2018-06-12 14:24:181346parcourir

Cet article présente principalement des informations pertinentes avec des exemples détaillés de la différence entre text() val() et html() dans jQuery. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

Simple Said : La différence entre html() et text() réside principalement dans l'inclusion ou non des balises. Et val() cible les éléments du formulaire.

Mais parfois, ce n’est toujours pas si clair.

html(), val() et text() sont tous divisés en paramètres et aucun paramètre.

Exemple de leurs différences :

html() obtient le contenu du premier élément correspondant sans paramètres . Il convient de noter que même s’il existe plusieurs correspondances, seul le premier élément correspondant peut être obtenu.

Par exemple : 

<body>
<p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>
<h3>选中下面的文字，看看它的颜色</h3>
<h3>选中下面的文字，看看它的颜色</h3>
<h3>选中下面的文字，看看它的颜色</h3>
<input type="text" value="aaa">
</body>
</html>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
var con = $("p").nextAll("h3");
console.log(con.html());
</script>

Le con ici correspond à 3 éléments h3, mais seul le contenu du premier h3 sera imprimé.

Si nous passons à text(); alors trois contenus h3 seront imprimés.

Avec les paramètres, con.html("aaa"); a le même effet que con.text("aaa");, les deux peuvent changer le contenu de trois h3.

Mais si con.html("'aaa'") et con.text("'aaa'"); span sera analysé comme une étiquette et le texte sera inséré sous forme de chaîne. 

<body>
<p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>
<h3><span>选中下面的文字，看看它的颜色</span></h3>
<h3><span>选中下面的文字，看看它的颜色</span></h3>
<input type="text" value="aaa">
</body>
</html>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
var con = $("p").nextAll("h3");
console.log(con.html());
console.log(con.text());
</script>

À propos de la différence entre text() val() et html() dans jQuery

html() supprimera également la balise, mais text() uniquement Obtiendra la partie texte.

Regardez à nouveau val() ;

<body>
<input type="text" value="aaa"/>
<input type="button" value="按钮"/>
选择性别：<input type="radio" name="sex" checked value="男"><label>男</label>
<input type="radio" name="sex" value="女"><label>女</label>
<br><br>
选择地区：
<select style="width: 150px">
<option value="1">上海</option>
<option value="2">杭州</option>
<option value="3">南京</option>
<option value="4">丽江</option>
</select>
</body>
</html>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
console.log($("input:text").val());
console.log($("input:button").val());
console.log($("input[name=&#39;sex&#39;]:checked").val());
console.log($("select option:selected").text());
});
</script>

À propos de la différence entre text() val() et html() dans jQuery

ici , vous pouvez faire attention à la façon d'obtenir la valeur du bouton radio et à la façon d'obtenir la valeur de la sélection sélectionnée.


Il est à noter que la valeur de l'option n'est pas le contenu affiché sur la page, car pour définir ou obtenir le contenu de la page de l'option, vous devez utiliser text(), bien sûr, vous peut également utiliser html().

Résumé des différences entre les trois

1. La méthode .val() est la même que .html() Si c'est le cas. est appliqué à plusieurs Lorsque sur un élément, seule la valeur "value" du premier élément du formulaire peut être lue, mais .text() en est différent. Si .text() est appliqué à plusieurs éléments, il lira le ". value" valeur de tous les éléments sélectionnés. Contenu du texte.

2.html(), .text() et .val() peuvent tous utiliser la valeur de retour de la fonction de rappel pour modifier dynamiquement le contenu de plusieurs éléments.


Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser Nodejs pour créer un serveur permettant d'accéder à des fichiers de ressources statiques tels que HTML, CSS, JS, etc.

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!

Déclaration：
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
Article précédent：Problèmes de compatibilité du navigateur dans JSArticle suivant：Problèmes de compatibilité du navigateur dans JS

Articles Liés

Voir plus