• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

4.2 内容操作

在jQuery中,关于元素内容操作共有2组方法:

  • (1)html()和text();
  • (2)val();

其中html()和text()用于操作普通标签,而val()用于操作表单标签。

一、html()和text()

1、html()方法

在jQuery中,我们可以用html()方法来获取和设置某个元素中的“HTML内容”。

语法:

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

说明:

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

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //使用html()获取HTML内容
                var a = $("#p1").html();
                alert(a);
            });
            $("#btn2").click(function () {
                //使用html()设置HTML内容
                $("#p2").html("<strong>jQuery入门教程</strong>");
            })
        })
    </script>
</head>
<body>
    <p id="p1"><strong>绿叶学习网</strong></p>
    <p id="p2">绿叶学习网</p>
    <hr />
    获取p1的值:<input type="button" id="btn1" value="获取"/><br />
    设置p2的值:<input type="button" id="btn2" value="设置"/>
</body>
</html>

在浏览器预览效果如下:

分析:

html()方法不仅可以用于获取元素的HTML内容,也可以用于设置元素的HTML内容。

2、text()方法

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

语法:

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

说明:

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

此外还需要注意一点,JavaScript中的innerText属性并不能在Firefox浏览器下运行,而jQuery的text()方法支持所有的浏览器。这也体现了jQuery完美的兼容性。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //使用html()获取文本内容
                var a = $("#p1").text();
                alert(a);
            });
            $("#btn2").click(function () {
                //使用html()设置文本内容
                $("#p2").text("<strong>jQuery入门教程</strong>");
            })
        })
    </script>
</head>
<body>
    <p id="p1"><strong>绿叶学习网</strong></p>
    <p id="p2">绿叶学习网</p>
    <hr />
    获取p1的值:<input type="button" id="btn1" value="获取"/><br />
    设置p2的值:<input type="button" id="btn2" value="设置"/>
</body>
</html>

在浏览器预览效果如下:

分析:

大家将这个例子的测试结果,跟上面html()方法的例子对比一下,好好理解一下html()方法和text()方法的区别。

关于html()和text()两个属性的区别,我们用一个表格很能很清晰看出来了:

html()和text()属性返回值的区别
HTML代码 html()返回值 text()返回值
<div>绿叶学习网</div> "绿叶学习网" "绿叶学习网"
<div><b>绿叶学习网</b></div> "<b>绿叶学习网</b>" "绿叶学习网"
<div><b></b></div> "<b></b>" ""(空字符串)

二、val()

表单元素不像普通元素,它们的值都是通过表单元素的value属性来传递的。因此我们不能使用html()和text()这两种方法来获取元素的内容(值)。

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

语法:

 
$().val()                  //获取表单元素
$().val("表单元素的值")    //设置表单元素

举例1:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //使用val()获取表单元素的值
                var a = $("#txt1").val();
                alert(a);
            });
            $("#btn2").click(function () {
                //使用val()设置表单元素的值
                $("#txt2").val("jQuery入门教程");
            })
        })
    </script>
</head>
<body>
    <input id="txt1" type="text" value="绿叶学习网"/><br />
    <input id="txt2" type="text"/><br />
    获取第1个文本框的值:<input id="btn1" type="button" value="获取" /><br />
    设置第2个文本框的值:<input id="btn2" type="button" value="设置" />
</body>
</html>

在浏览器预览效果如下:

分析:

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

举例2:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var a = $("#lvye").html();
            var b = $("#lvye").text();
            $("#txt1").val(a);
            $("#txt2").val(b);
        })
    </script>
</head>
<body>
    <div id="lvye"><strong>绿叶学习网</strong></div>
    innerHTML内容是:<input id="txt1" type="text"/><br/>
    innerText内容是:<input id="txt2" type="text"/>
</body>
</html>

在浏览器预览效果如下:

分析:

对于普通元素,我们可以使用html()和text()来获取元素的内容或者值。但是对于表单元素来说,想要“获取”或者“设置”元素的值,就必须用val()方法。

对于html()、text()、val()这3个方法都可以实现同时实现2点:(1)获取值;(2)设置值,而且形式是一样的,大家对比记忆一下。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部