jQuery获取和设置元素

最新推荐文章于 2025-08-23 02:53:08 发布

weixin_34290390

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/johnvwan/p/9583606.html

本文介绍了使用jQuery获取和设置HTML元素的HTML内容、文本内容、元素值的方法，包括html()、text()和val()等函数的应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇文章聊聊如何使用jQuery获取和设置元素内容与值。

一.获取和设置元素内容

在 jQuery 中，操作元素内容的方法包括 html() 和 text()。前者与 JavaScript 中的 innerHTML属性类似，即获取或设置元素的 HMTL 内容；后者类似于 JavaScript 中的 innerText 属性，即获取或设置元素的文本内容。二者的格式与功能的区别如下表所示。

html() 方法仅支持 XHTML 的文档，不能用于 XML 文档，而 text() 既支持 HTML 文档，也支持 XML 文档。示例代码如下：

<!doctype html>
<html>

<head>
    <title>获取或设置元素的内容 </title>
    <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
        body {
            font-size: 15px;
            text-align: center
        }

        div {
            border: solid 1px #666;
            padding: 5px;
            width: 220px;
            margin: 5px
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var strHTML = $("#divShow").html(); //获取 HTML内容
            var strText = $("#divShow").text(); //获取文本内容   
            $("#divHTML").html(strHTML);        //设置 HTML内容
            $("#divText").text(strText);        //设置文本内容
        })
    </script>
</head>

<body>
    <div id="divShow"><b><i>Write Less Do More</i></b></div>
    <div id="divHTML"></div>
    <div id="divText"></div>
</body>

</html>

二.获取和设置元素值

在 jQuery 中，要获取元素的值通过 val() 方法实现，其语法格式如下所示：

val(val)

其中，如果不带参数 val，是获取某元素的值；反之，则是将参数 val 的值赋给某元素，即设置元素的值。该方法常用于表单中获取或设置对象的值。另外，通过 val() 方法还可以获取 select 标记中的多个选项值，其语法格式如下所示：

val().join(",")

如下代码演示了如何通过调用 val() 方法设置和获取元素的值。

<!doctype html>
<html>

<head>
    <title>获取或设置元素的值 </title>
    <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">  </script>
    <style type="text/css">
        body {
            font-size: 12px;
            text-align: center
        }

        div {
            padding: 3px;
            margin: 3px;
            width: 120px;
            ﬂoat: left
        }

        .txt {
            border: #666 1px solid;
            padding: 3px
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("select").change(function () {                //设置列表框 change事件
                var strSel = $("select").val().join(",");   //获取列表框所选中的全部选项的值
                $("#p1").html(strSel);                      //显示列表框所选中的全部选项的值
            })
            $("input").change(function () {                 //设置文本框 focus事件
                var strTxt = $("input").val();              //获取文本框的值
                $("#p2").html(strTxt);                      //显示文本框所输入的值
            })
            $("input").focus(function () {                  //设置文本框 focus事件
                $("input").val("");                         //清空文本框的值
            })
        })
    </script>
</head>

<body>
    <div>
        <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>
        <p id="p1"></p>
    </div>
    <div> <input type="text" class="txt" /> <p id="p2"></p>
    </div>
</body>

</html>