jQuery中.html(),.text()和.val()的概述

『jQuery』.html(),.text()和.val()的概述及使用

jQuery中为我们提供了多种方法用于对元素的HTML结构和元素的文本内容的操作，比如：你可以给已存在的元素的内部，周围，前面或者后面增加新元素；或者用一个元素替代另一个元素；你也可以读取或者修改一个元素的内容或结构。有时我们就会比较模糊，不知道是给元素增加内容或者增加一个元素，比如说我们需要给一个存在的元素有效的增加这个元素的内容。

这里主要和大家一起分享如何增加，删除和替换元素，jQuery给我们提供了三种方法来对元素的结构，内容进行操作：

.html():读取和修改一个元素的HTML内容，详情.html()；

.text()：读取和修改一个元素的文本内容，详情.text()；

.val()：读取和修改一个表单元素的value字段值，详情.val()。

正如你将看到的，这些方法可以让你轻松的读取或修改元素的原始内容或读取和修改任何HTML的值，也可以轻松的读取或修改表单中的value字段值。

1.读取一个元素的HTML结构——.html()

语法：

$("Element").html();

返回值：string

HTML:

我是div.demo中第一个P元素：我在第一个P里面

这是一个段落元素，里面包含了一个a链接元素W3CPLUS

jQuery Code:

$(document).ready(function(){

alert("Div.demo中的p元素的HTML结构："+$("div.demo p").html());

});

如果你调用多个选定元素的.html()方法，那么其读取的只是第一个元素，换句话说：如果选择器匹配多于一个的元素，那么只有第一个匹配元素的HTML 内容会被获取。

2、修改一个元素的HTML内容——.html(htmlString)

语法：

$("Element").html(htmlString);//htmlString是用来设置每个匹配元素的一个HTML 字符串返回值：jQuery对象

说明：

重新设置第一个匹配元素的html内容，这些元素的任何内容完全被新的内容取代。基于上面的实例，将原来的段落的HTML内容完全取代：

HTML Markup

我是div.demo中第一个P元素：我在第一个P里面

这是一个段落元素，里面包含了一个a链接元素W3CPLUS

jQuery Code:

$(document).ready(function(){

$("div.demo p").html('

新加的标签

我是divdemo中第一个p 元素：我在第一个P里面

');

});

如果使用.html(htmlStrong)方法匹配在多个元素上，那么多个匹配元素将的HTML内容将被替换，并且都被替换成一样的HTML结构，也就是.html(htmlString)方法中指定的“htmlString”

结构。换句话，如果你使用.html(htmlString)方法选定了多个元素，那么这些选定的元素的HTML内容都会被.html(htmlString)方法中的“htmlString”所替代。

3。使用一个回调函数来替换一个元素的HTML内容

语法：

$("Element").html(function(index,html){...});

返回值：jQuery对象

说明：

用来返回设置HTML内容的一个函数。接收元素的索引位置和元素旧的HTML作为参数。

使用个回调函数来替换一个元素的HTML内容，必须满足下面两个条件：

1.当前元素的索引值位置(index值从0开始计算)；

2.当前元素的旧的html内容。

函数的返回值随后被用来作为替代HTML。这种做法很方便的，如果你要替换多个元素的内容，而且不想像上面那们换成相同的内容，而是换成不同的内容，那么我们就可以使用这种方法，根据元素自己的位置或现有的内容（或者两者同时）来给多个元素替换成不同的html 内容。我们来看一个实例：

HTML Markup:

我在第一个P里面

W3CPLUS

jQuery Code:

$(document).ready(function(){

$("div.demo p").html(function(index,oldHtml){

return "我是段落" + (index+1) + "：" + oldHtml;

});

});

操作元素的纯文本内容——.text()

前面的.html()方法让你可以读取或修改元素的HTML内容——包括元素的HTML标签；而jQuery中的.text()方法仅仅是对元素的纯文本的操作。他和.html()方法一样包含了三种使用方法：

1、读取文本内容——.text()

语法：

$("Element").text();

返回值：返回字符串；

说明：

将获取匹配元素集合中每个元素的文本内容结合,包括他们的后代。.text()和.html()方法不同，.text()方法都可以在XML和HTML文档中使用。.text()方法的结果是由所有匹配元素包含的文本内容组合起来的文本(由于不同的浏览器对HTML分析器的不同，在返回的文本换行和其他空格可能会有所不同。)

使用.text()和.html()方法都差不多相同，如：

HTML Markup:

W3CPLUS

jQuery Code:

$(document).ready(function(){

alert(".text()读取的内容：" + $("div.demo p").text());

});