内容操作,指的是使用jQuery来操作一个元素的文本内容、值内容等。在jQuery中,对于内容操作,我们有以下3种方法。

  • (1)html()
  • (2)text()
  • (3)val()

其中,html()和text()这两个方法用于操作一般元素,而val()方法用于操作表单元素。

一、html()

在jQuery中,我们可以使用html()方法来获取和设置一个元素中的“html内容”。所谓的html内容,指的是所有的内部元素以及文本。

语法:

$().html() //获取html内容 $().html("html内容") //设置html内容

说明:

html()方法跟innerHTML是一样的,只不过html()是jQuery的实现方式,而innerHTML是JavaScript的实现方式。

举例:html()获取内容

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("#btn").click(function(){ var result = $("div").html(); alert(result); }); }) </script> </head> <body> <div>绿叶学习网<strong>jQuery教程</strong></div> <input id="btn" type="button" value="获取" /> </body> </html>

默认情况下,预览效果如下图所示。

当我们点击【获取】按钮后,预览效果如下图所示。

举例:html()设置内容

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("#btn").click(function(){ var str = '<img src="img/1.png" />'; $("div").html(str); }); }) </script> </head> <body> <input id="btn" type="button" value="设置" /> <div></div> </body> </html>

默认情况下,预览效果如下图所示。

当我们点击【设置】按钮后,预览效果如下图所示。

二、text()

在jQuery中,我们可以使用text()方法来获取和设置一个元素的“文本内容”。

语法:

$().text() //获取文本内容 $().text("文本内容") //设置文本内容

说明:

text()方法跟innerText是一样的,只不过text()是jQuery的实现方式,而innerText是JavaScript的实现方式。

举例:html()与text()比较

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { var strHtml = $("p").html(); var strText = $("p").text(); $("#txt1").val(strHtml); $("#txt2").val(strText); }) </script> </head> <body> <p><strong style="color:hotpink">绿叶学习网</strong></p> html()是:<input id="txt1" type="text" /><br/> text()是:<input id="txt2" type="text" /> </body> </html>

浏览器预览效果如下图所示。

分析:

从这个例子可以看出,html()获取的是元素内部所有的内容,而text()获取的仅仅是文本内容。此外,val()方法用于获取和设置表单元素的value值,我们在后面会详细介绍。

对于html()和text()这两个方法的区别,从下表就可以很清晰地比较出来。

html()和text()的区别
HTML代码 html() text()
<div>绿叶学习网</div> 绿叶学习网 绿叶学习网
<div><em>绿叶学习网</em></div> <em>绿叶学习网</em> 绿叶学习网
<div><em></em></div> <em></em> (空字符串)

三、val()

表单元素跟一般元素不太一样,它们的值都是通过value属性来定义的。因此,我们不能使用html()和text()这两个方法来获取表单元素的值。

在jQuery中,我们可以使用val()来获取和设置表单元素的值。

语法:

$().val() //获取值 $().val("值内容") //设置值

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("#btn_get").click(function(){ var str1 = $("#txt1").val(); alert(str1); }); $("#btn_set").click(function(){ var str2 = "给你初恋般的感觉"; $("#txt2").val(str2); }); }) </script> </head> <body> <input id="txt1" type="text" value="绿叶学习网"/><br/> <input id="txt2" type="text" /><br/> 获取第1个文本框的值:<input id="btn_get" type="button" value="获取"/><br/> 设置第2个文本框的值:<input id="btn_set" type="button" value="设置"> </body> </html>

浏览器预览效果如下图所示。

分析:

val()方法不仅可以用来获取表单元素的值,也可以用来设置表单元素的值。

html()、text()、val()这3个方法都可以实现两点:无参数时用于“获取值”,有参数时用于“设置值”。一般来说,很多jQuery方法都有这个特点。