jQuery属性--html([val|fn])、text([val|fn])和val([val|fn|arr])

html([val|fn])

概述

取得第一个匹配元素的html内容，这个函数不能用于XML文档。但可以用于XHTML文档。

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取

参数

val 用于设定HTML内容的值；function(index,html) 此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("p:eq(0)").click(function() {
                    alert($(this).html());
                });
                
                $("p:eq(1)").click(function() {
                    $(this).html("<a href='#'>第二个段落内容已换。<a>");
                });
                
                $("p:eq(2)").click(function() {
                    $(this).html(function(){
                        return "简单一点就好！";
                    });
                });
            })
        </script>
    </head>

    <body>
        <p><a>第一个段落。</a></p>
        <p>第二个段落。</p>
        <p>第三个段落。</p>
    </body>

</html>

text([val|fn])

概述

取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效

参数

val 用于设置元素内容的文本。function(index,text) 此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("p:eq(0)").click(function() {
                    alert($(this).text());
                });
                
                $("p:eq(1)").click(function() {
                    $(this).text("<a href='#'>第二个段落内容已换。<a>");
                });
                
                $("p:eq(2)").click(function() {
                    $(this).text(function(){
                        return "简单一点就好！";
                    });
                });
            })
        </script>
    </head>

    <body>
        <p><a>第一个段落。</a></p>
        <p>第二个段落。</p>
        <p>第三个段落。</p>
    </body>

</html>

val([val|fn|arr])

概述

获得匹配元素的当前值

参数

val 要设置的值；function(index,value) 此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，text为原先的text值

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("button").click(function(){
                    alert($("input:eq(0)").val());
                    
                    $("input:eq(1)").val("测试二")
                });                                
            })
        </script>
    </head>

    <body>
        测试一：<input type="text" value="测试一"/><br />
        测试二：<input type="text" />
        <button>点击</button>
    </body>

</html>