3.4.5 操作元素内容的相关方法

发表于 更新于 分类于 ， ， Waline： 本文字数： 2.2k 阅读时长 ≈ 2 分钟

3.4.5 操作元素内容的相关方法

jQuery 还提供了以下方法来访问或设置DOM元素的内容,包括访问或设置这些DOM元素的innerHTML属性、文本内容和value属性。

获取或设置DOM元素的HTML内容

方法 描述
html() 返回jQuery对象包含的第一个匹配的DOM元素的HTML内容(也就是返回其innerHTML属性值)。不能在XML文档中使用该方法,可以在HTML文档中使用。
html(value) 设置jQuery对象包含的所有DOM元素的HTML内容(也就是同时设置它们的innerHTML属性值)。不能在XML文档中使用该方法,可以在HTML文档中使用。

获取或设置DOM元素的文本内容

方法 描述
text() 返回jQuery对象包含的所有DOM元素的文本内容(会剔除该DOM元素里所有的XML、HTML标签)。该方法对XML文档和HTML文档都有作用。
text(val) 设置jQuery对象包含的所有DOM元素的文本内容。该方法对XML文档和HTML文档都有作用。

获取或设置表单控件的value属性值

方法 描述
val() 返回jQuery对象包含的第一个匹配的DOM元素的value值,实际上就是返回表单控件的value属性值。该方法可返回字符串和数组(例如多选框和允许多选的下拉列表框)。
val(value) 为jQuery对象包含的所有DOM元素设置单个value属性值,实际上就是设置表单控件的value属性值。
val(Array<String>) 为jQuery对象包含的所有DOM元素设置多个value属性值。主要用于操作复选框和允许多选的下拉列表框。

程序示例

下面的程序示范了操作元素内容的相关方法的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 操作HTML内容的工具方法 </title>
</head>

<body>
    <div></div>
    <div></div>
    <input id="book" name="book" type="text" />
    <br />
    <input id="desc" name="desc" type="text" />
    <br />
    <select id="gender">
        <option value="male">男人</option>
        <option value="female">女人</option>
    </select>
    <br />
    <select id="publish" multiple="multiple">
        <option value="phei">电子工业出版社</option>
        <option value="ptpress">人民邮电出版社</option>
    </select>
    <br />
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 设置body下的div元素的内容
        $("body>div").html("疯狂前端开发讲义");

        // 设置所有input元素的值
        $(":input").val("疯狂XML讲义");

        // // 为所有的<select.../>元素设置value值
        $("select").val(["female", "ptpress", "phei"]);

        // // 仅获取jQuery元素的text部分，下面将输出java:疯狂Java讲义
        console.log($("<div>java:<span>疯狂Java讲义</span></div>").text());
    </script>
</body>

</html>