内容操作 - jQuery | 绿叶学习网

内容操作，指的是使用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方法都有这个特点。