设置或返回内容

jQuery 中提供了 <code>html()</code>、<code>tetx()</code>、<code>val()</code> 这三个方法，来设置或返回 HTML 元素的内容。

html()

设置或返回所选元素的内容（包括 HTML 标签），相当于原生 JavaScript 中的 innerHTML。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设置或返回内容</title>
    <script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<div>
    <p id="p1">这是一个段落。</p>

    <p id="p2">这是一个段落。</p>
</div>
<button id="btn1">获取内容</button>
<button id="btn2">设置内容</button>
<script>
    $(function () {
        // 设置 btn1 点击事件
        $("#btn1").click(function () {
            // 获取内容
            alert($("div").html());
        });

        // 设置 btn2 点击事件
        $("#btn2").click(function () {
            // 设置内容
            $("#p1").html("<b>改变内容</b>");
            $("#p2").html("改变内容");
        });
    });
</script>
</body>
</html>

效果演示：

html().gif

text()

设置或返回所选元素的内容，相当于原生 JavaScript 中的 innerText。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设置或返回内容</title>
    <script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<div>
    <p id="p1">这是一个段落。</p>

    <p id="p2">这是一个段落。</p>
</div>
<button id="btn1">获取内容</button>
<button id="btn2">设置内容</button>
<script>
    $(function () {
        // 设置 btn1 点击事件
        $("#btn1").click(function () {
            // 获取内容
            alert($("div").text());
        });

        // 设置 btn2 点击事件
        $("#btn2").click(function () {
            // 设置内容
            $("#p1").text("<b>改变内容</b>");
            $("#p2").text("改变内容");
        });
    });
</script>
</body>
</html>

效果演示：

text().gif

从上面两个示例就可以看出 <code>html()</code> 和 <code>text()</code> 两者的区别，<code>html()</code> 可以获取到标签，而 <code>text()</code> 不行；同样，使用 <code>html()</code> 可以往 HTML 文档里写入标签，而 <code>text()</code> 则不行，当你试图写入标签时，其实写入的只是普通的字符串。

val()

设置或返回所选置或返回表单字段的值，相当于原生 JavaScript 中的 value。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设置或返回内容</title>
    <script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<input id="ip1" type="text" value="value">
<input id="ip2" type="text">
<button id="btn1">获取内容</button>
<button id="btn2">设置内容</button>
<script>
    $(function () {
        // 设置 btn1 点击事件
        $("#btn1").click(function () {
            // 获取内容
            alert($("#ip1").val());
        });

        // 设置 btn2 点击事件
        $("#btn2").click(function () {
            // 设置内容
            $("#ip2").val("testtesttest");
        });
    });
</script>
</body>
</html>

效果演示：

val().gif

设置或获取属性

设置或获取属性有两个方法，分别是 <code>attr()</code> 和 <code>prop()</code>，两者的区别：

对于 HTML 元素本身就带有的固有属性来说，使用 <code>prop()</code>；
对于 HTML 元素的自定义属性来说，使用 <code>attr()</code>；
添加属性名称该属性就会生效时使用 <code>prop()</code>；
带有 <code>true</code> 和 <code>false</code> 两个属性值的属性使用 <code>prop()</code>；
其他则使用 <code>attr()</code>；
更多请看 attr() - 愚人码头以及 prop() - 愚人码头；
官方建议：

attr_prop.png

删除属性使用 <code>removeAttr()</code> 和 <code>removeProp()</code>。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设置或返回属性</title>
    <script src="js/jquery-1.8.3.js"></script>
    <style>
        .p {
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
<p class="p"><a id="a1" href="http://www.runoob.com" target="_blank">菜鸟教程/w3school</a></p>
<button id="btn1">获取属性</button>
<button id="btn2">更改链接地址</button>
<button id="btn3">设置多个属性</button>
<button id="btn4">删除属性</button>
<script>
    $(function () {
        // 返回元素的属性：attr("propertyName");
        $("#btn1").click(function () {
            alert($("#a1").attr("href"));
        });

        // 设置单个属性：attr("propertyName","propertyValue");
        $("#btn2").click(function () {
            $("#a1").attr("href", "http://www.w3school.com.cn/");
        });

        // 设置多个属性：attr({"propertyName1":"propertyValue1","propertyName2":"propertyValue2",...});
        $("#btn3").click(function () {
            $("#a1").attr({
                "class": "link",
                "title": "a"
            });
        });

        // 删除属性：removeAttr("propertyName");
        $("#btn4").click(function () {
            $(".p").removeAttr("class");
        });
    });
</script>
</body>
</html>

效果：