suchen

Heim >Web-Frontend >js-Tutorial >Beispielhafte Einführung in die Unterschiede zwischen html(), text() und val() in JQuery_jquery

Beispielhafte Einführung in die Unterschiede zwischen html(), text() und val() in JQuery_jquery

WBOY
WBOYOriginal
2016-05-16 16:37:581486Durchsuche

1.HTML

html(): Ruft den HTML-Inhalt des ersten passenden Elements ab. Diese Funktion kann nicht mit XML-Dokumenten verwendet werden. Kann aber für XHTML-Dokumente verwendet werden
html(val): Legen Sie den HTML-Inhalt jedes übereinstimmenden Elements fest. Diese Funktion kann nicht mit XML-Dokumenten verwendet werden. Es kann aber für XHTML-Dokumente verwendet werden.

2.TEXT

text(): Den Inhalt aller passenden Elemente abrufen.
Das Ergebnis ist der Text, der sich aus den in allen passenden Elementen enthaltenen Textinhalten zusammensetzt. Diese Methode funktioniert sowohl für HTML- als auch für XML-Dokumente.
text(val): Legt den Textinhalt aller passenden Elemente fest
Wie html(), kodiert jedoch HTML (ersetzen Sie „f149dc6bf831fc1a1cb4bb71ef737d5a“ durch entsprechende HTML-Entitäten).

3.VAL

val(): Ermittelt den aktuellen Wert des ersten passenden Elements.
val(val): Legen Sie den Wert jedes passenden Elements fest.

Der obige Inhalt wurde aus dem JQuery-Hilfedokument kopiert, sodass ich nicht zu viel Unsinn erzähle. Hier sind einige Übungen, die ich gemacht habe. Der Code lautet wie folgt:
Während der Übungen habe ich einen weiteren Unterschied zwischen HTML und Text entdeckt
Wenn html() den Inhalt eines Elements entfernt, kann auch das Format unter dem ausgewählten Element abgerufen werden.
Zum Beispiel: 17670b365f245f4926c7f388552cd260a4b561c25d9afb9ac8dc4d70affff4195a8028ccc7a7e27417bff9f05adf5932Weniger schreiben, mehr tun72ac96585ae54b6ae11f849d2649d9e60d36329ec37a2cc24d42c7229b69747a16b28748ea4df4d9c2150843fecfba68
Wenn wir var strHTML = $("#divShow").html(); verwenden, um es zu erhalten,
Das Ergebnis ist:a4b561c25d9afb9ac8dc4d70affff4195a8028ccc7a7e27417bff9f05adf5932Weniger schreiben, mehr tun72ac96585ae54b6ae11f849d2649d9e60d36329ec37a2cc24d42c7229b69747a
Wenn wir var strHTML2 = $("#divShow b i").html(); verwenden, um es zu bekommen
Das Ergebnis ist „Weniger schreiben, mehr tun“
Und Text hat nicht die erste Situation,
Wenn wir var strText = $("#divShow").text();
nehmen Das Ergebnis ist „Weniger schreiben, mehr tun“

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script src="js/jquery.js" type="text/javascript"></script>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
-->
<title> 获取或设置元素的内容</title>
<style type="text/css">
body{font-size:15px;text-align:center}
div{border:solid 0px #666;padding:5px;width:220px;margin:5px}
</style>
<script type="text/javascript">
$(function() {
var strHTML = $("#divShow").html();// 获取HTML 内容(包含div下面的两个格式)
var strHTML2 = $("#divShow b i").html(); //获取HTML内容
var strHTML3 = $("div").html();
var strText = $("#divShow").text();// 获取文本内容
var strText2 = $("div").text();

$("#divHTML").html(strHTML);// 设置HTML 内容
$("#divHTML2").html(strHTML2); //设置HTML内容
$("#divHTML3").html(strHTML3); //设置HTML内容
$("p").html(strHTML);

$("#divText").text(strText);// 设置文本内容
$("#divText2").text(strText2);// 设置文本内容
$("a").text(strText);

$("select").change(function() { // 设置列表框change 事件
// 获取列表框所选中的全部选项的值
alert($("select").val());
var strSel = $("select").val().join(",");
$("input").val(strSel); // 显示列表框所选中的全部选项的值
})
})
</script>
</head>
<body>
<table border="1" bordercolor="#A9A9A9" cellspacing="0">
<tr><td>******************************</td><td>*******************************************</td></tr>
<tr>
<td><div id="divShow"><b><i>Write Less Do More</i></b></div></td>
<td>这是原内容</td>
</tr>
<tr>
<td><div id="divShow"><b><i>Write XXXX Do XXXX</i></b></div></td>
<td>这是原内容</td>
</tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
<tr>
<td><div id="divHTML">1</div></td>
<td>获取原内容(连带内容的格式)后以html方式输出</td>
</tr>
<tr>
<td><div id="divHTML2">2</div></td>
<td>获取原内容(不带内容的格式)后以html方式输出</td>
</tr>
<tr>
<td><div id="divHTML3">3</div></td>
<td>获取原内容(获取第一个匹配元素的内容)后以html方式输出</td>
</tr>
<tr>
<td><p></p></td>
<td>HTML方式设置段落的文本</td>
</tr>
<tr>
<td><p></p></td>
<td>如果这个也有内容了，就是设置每个匹配元素的内容</td>
</tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
<tr>
<td><div id="divText">4</div></td>
<td>获取原内容后以text方式输出</td>
</tr>
<tr>
<td><div id="divText2"></div></td>
<td>获取原内容(获取所有匹配元素的内容)后以text方式输出</td>
</tr>
<tr>
<td><a></a></td>
<td>TEXT方式设置段落的文本</td>
</tr>
<tr>
<td><a></a></td>
<td>如果这个也有内容了，就是设置每个匹配元素的内容</td>
</tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
<tr>
<td>

<select multiple="multiple"style="height:96px;width:85px">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
<option value="5">Item 5</option>
<option value="6">Item 6</option>
</select>
<select>
<option value="7">Item 7</option>
<option value="8">Item 8</option>
<option value="9" selected>Item 9</option>

</select>
</td>
<td>
</td>
</tr>
<tr>
<td><input ></input></td>
<td><input ></input></td>
</tr>
</table>
</body>
</html>

Sie können es auch selbst überprüfen. Das obige ist ein Experiment, das ich durchgeführt habe. Die JQuery ist 1.6

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführung und Verwendung von jQuery Delay () Leitfaden_jqueryNächster Artikel：Einführung und Verwendung von jQuery Delay () Leitfaden_jquery

In Verbindung stehende Artikel

Mehr sehen