jQuery 文档操作 - html() 方法与text()方法

一、html()

        1、用法：html() 方法返回或设置被选元素的内容 (inner HTML)。

        2、语法

              a、$(selector).html()

                    说明：当使用该方法返回一个值时，它会返回第一个匹配元素的内容。

                    注意：是第一个匹配元素的内容。

                    实例：

$("p").html()

              b、$(selector).html(content)

                    说明：当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。

                    注意：是改变所有匹配元素的内容

                    实例：

$("p").html("Hello <b>world!</b>")                             //显示Hello <strong>World!</strong>

              c、$(selector).html(function(index,oldcontent))

                    说明：使用函数来设置所有匹配元素的内容。index是元素的索引，oldcontent为元素的旧值。

                    实例：

$("p").html(function(n，old){    return "这个 p 元素的 index 是：" + n;    });

二、text()

        语法

        a、$(selector).text()

               说明：当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。

               与html()不同一：注意是获取所有匹配元素的内容

               实例：

$("p").text() 

              与html()不同二：取出来的内容会自动删除HTML标记

        b、$(selector).text(content)

               说明：当该方法用于设置值时，它会覆盖被选元素的所有内容。

               实例：

$("p").text("Hello <b>world!</b>")                    //显示Hello <span style="font-family: Arial, Helvetica, sans-serif;"><b>world!</b></span>

               与html()不同三：此时world！不会加粗,且会把标记以文本形式显示出来

        c、$(selector).text(function(index,oldcontent))

               说明：使用函数设置所有被选元素的文本内容。

               补充：index为匹配元素的索引，oldcontent为匹配元素的旧内容

               实例：

$("p").text(function(n，old){    return "这个 p 元素的 index 是：" + n;    });

三、总结

       1、text()返回值时会删除HTML标记且会匹配所有项，而html()返回值时不删除HTML标记且只匹配第一项

       2、text()设置值时不会识别HTML标记，会把HTML标记以文本的形式显示，而html()设置值时会识别HTML标记