jquery中html()、text()、val()的区别与使用

时间:2023-03-09 16:00:55
jquery中html()、text()、val()的区别与使用
  1. .html()用为读取和修改元素的HTML标签
  2. .text()用来读取或修改元素的纯文本内容
  3. .val()用来读取或修改表单元素的value值。

.html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不 过.html()是用来读取元素的HTML内容(包括其Html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读 取表单元素的"value"值。其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上;另外.html()方法使用在多 个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但 是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。

.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容,如果三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容。

val()---一般 用在input上,而不用在其他元素,用来获取input或者是select的值

html()和text()可用在多种元素上,但是html()相当于依据源代码返回,也就是在返回的内容中会包含各种tag,而text()则相当于是依据页面显示返回,返回的内容是出去各种tag之间的内容html属性中有两个方法,一个有参,一个无参。

无参时是用来获取内容,举例如下:

 <!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head> <body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>
</body>
</html>

运行结果如下:

1.点击showText

jquery中html()、text()、val()的区别与使用

2.点击showHtml

jquery中html()、text()、val()的区别与使用

有参时替换选中元素的内容:

 <!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
</head> <body>
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
</body>
</html>

点击前,如下:

jquery中html()、text()、val()的区别与使用

点击set Text:

jquery中html()、text()、val()的区别与使用

点击set value:

jquery中html()、text()、val()的区别与使用

点击set HTML:

jquery中html()、text()、val()的区别与使用