本节内容主要介绍的是如何使用jQuery中的.html(),.text()和.val()三种方法，用于读取，修改元素的html结构，元素的文本内容，以及表单元素的value值的方法。jQuery中为我们提供了多种方法用于对元素的HTML结构和元素的文本内容的操作，比如说，你可以给已存在的元素的内部，周围，前面或者后面增加新元素；或者用一个元素替代另一个元素；你也可以读取或者修改一个元素的内容或结构。有时我们就会比较模糊，不知道是给元素增加内容或者增加一个元素，比如说我们需要给一个存在的元素有效的增加这个元素的内容。
这里主要和大家一起分享如何增加，删除和替换元素，jQuery给我们提供了三种方法来对元素的结构，内容进行操作：
正如你将看到的，这些方法可以让你轻松的读取或修改元素的原始内容或读取和修改任何HTML的值，也可以轻松的读取或修改表单中的value字段值。
操作元素的HTML结构——.html()jQuery中的.html()方法可以让读取和修改一个元素的Html的内容，其主要有三种使用方式：.html(),.html(htmlString),.html(function(index,html){...})，下面依次来看看他们的具体使用方法。
1、读取一个元素的HTML结构——.html()
语法：
$("Element").html();返回值：string
说明：
.html()方法用来获取任意元素的HTML内容，如果选择器同时选中多于一个的元素时，那么其只能读取第一个元素的HTML内容。另外此法对XML方档是无效的。
要读取一个元素的HTML内容，首先你要选择这个元素，然后在调用jQuery中的.html()方法，比如说，下面的代码中，我们选择了div.demo中的p元素，然后通过.html()读取这个元素的HTML内容，如：
HTML Code:
<div> <p>这是一个段落元素，里面包含了一个a链接元素<a href="#">W3CPLUS</a></p> </div>jQuery Code
$(document).ready(function(){ alert("Div.demo中的p元素的HTML结构："+$("div.demo p").html()); });结果
上面代码会弹出一个警告框，显示原始的HTML标记内的元素，如上图所示。上面是div.demo只有一个Ｐ元素，如果有多个呢？会有什么现像发生，我们不枋在看一回：
HTML Markup
<div> <p>我是div.demo中第一个P元素：<a href="#">我在第一个P里面</a></p> <p>这是一个段落元素，里面包含了一个a链接元素<a href="#">W3CPLUS</a></p> </div>jQuery Code
$(document).ready(function(){ alert("Div.demo中的p元素的HTML结构："+$("div.demo p").html()); });效果
从上面效果图中我们可以明显的看出，同样的一段jQuery代码，所得到的效果不一样。这里再次证明了如果你调用多个选定元素的.html()方法，那么其读取的只是第一个元素，换句话说：如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
2、修改一个元素的HTML内容——.html(htmlString)
语法：
$("Element").html(htmlString);//htmlString是用来设置每个匹配元素的一个HTML 字符串返回值：jQuery对象
说明：
重新设置第一个匹配元素的html内容，这些元素的任何内容完全被新的内容取代。基于上面的实例，将原来的段落的HTML内容完全取代：
HTML Markup
<div> <p>我是div.demo中第一个P元素：<a href="#">我在第一个P里面</a></p> <p>这是一个段落元素，里面包含了一个a链接元素<a href="#">W3CPLUS</a></p> </div>jQuery Code:
$(document).ready(function(){ $("div.demo p").html('<h2>新加的标题</h2><p>我是div.demo中第一个P元素：<a href="#">我在第一个P里面</a></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内容，必须满足下面两个条件：
函数的返回值随后被用来作为替代HTML。这种做法很方便的，如果你要替换多个元素的内容，而且不想像上面那们换成相同的内容，而是换成不同的内容，那么我们就可以使用这种方法，根据元素自己的位置或现有的内容（或者两者同时）来给多个元素替换成不同的html内容。我们来看一个实例：
HTML Markup
<div> <p><a href="#">我在第一个P里面</a></p> <p><a href="#">W3CPLUS</a></p> </div>jQuery Code:
$(document).ready(function(){ $("div.demo p").html(function(index,oldHtml){ return "我是段落" + (index+1) + "：" + oldHtml; }); });效果：
前面的.html()方法让你可以读取或修改元素的HTML内容——包括元素的HTML标签；而jQuery中的.text()方法仅仅是对元素的纯文本的操作。他和.html()方法一样包含了三种使用方法：
1、读取文本内容——.text()
语法：
$("Element").text();返回值：返回字符串；
说明：
相关文章
精彩导读
热门资讯
关注我们
