『jQuery』.html（）,.text（）和.val（）的概述及使⽤
本节内容主要介绍的是如何使⽤中的，和三种⽅法，⽤于读取，修改元素的html结构，元素的⽂本内容，以及表单元素的value 值的⽅法。中为我们提供了多种⽅法⽤于对元素的HTML结构和元素的⽂本内容的操作，⽐如说，你可以给已存在的元素的内部，周围，前⾯或者后⾯增加新元素；或者⽤⼀个元素替代另⼀个元素；你也可以读取或者修改⼀个元素的内容或结构。有时我们就会⽐较模糊，不知道是给元素增加内容或者增加⼀个元素，⽐如说我们需要给⼀个存在的元素有效的增加这个元素的内容。
这⾥主要和⼤家⼀起分享如何增加，删除和替换元素，给我们提供了三种⽅法来对元素的结构，内容进⾏操作：
1. ：读取和修改⼀个元素的HTML内容，详情.html()；
2. ：读取和修改⼀个元素的⽂本内容，详情.text()；
3. ：读取和修改⼀个表单元素的value字段值，详情.val()。
正如你将看到的，这些⽅法可以让你轻松的读取或修改元素的原始内容或读取和修改任何HTML的值，也可以轻松的读取或修改表单中的value字段值。
jQuery中的.html()⽅法可以让读取和修改⼀个元素的Html的内容，其主要有三种使⽤⽅
式：.html(),.html(htmlString),.html(function(index,html){...})，下⾯依次来看看他们的具体使⽤⽅法。
$("Element").html();
string
.html()⽅法⽤来获取任意元素的HTML内容，如果选择器同时选中多于⼀个的元素时，那么其只能读取第⼀个元素的HTML内容。另外此法对XML⽅档是⽆效的。
要读取⼀个元素的HTML内容，⾸先你要选择这个元素，然后在调⽤jQuery中的.html()⽅法，⽐如说，下⾯的代码中，我们选择了div.demo中的p元素，然后通过.html()读取这个元素的HTML内容，如：
复制代码代码如下:
<div class="demo">
<p>这是⼀个段落元素，⾥⾯包含了⼀个a链接元素<a href="#">W3CPLUS</a></p>
</div>
复制代码代码如下:
$(document).ready(function(){
alert("Div.demo中的p元素的HTML结构："+$("div.demo p").html());
});
上⾯代码会弹出⼀个警告框，显⽰原始的HTML标记内的元素，如上图所⽰。上⾯是div.demo只有⼀个Ｐ元素，如果有多个呢？会有什么现像发⽣，我们不枋在看⼀回：
复制代码代码如下:
<div class="demo">
<p>我是div.demo中第⼀个P元素：<a href="#">我在第⼀个P⾥⾯</a></p>
<p>这是⼀个段落元素，⾥⾯包含了⼀个a链接元素<a href="#">W3CPLUS</a></p>
</div>
复制代码代码如下:
$(document).ready(function(){
alert("Div.demo中的p元素的HTML结构："+$("div.demo p").html());
});
从上⾯效果图中我们可以明显的看出，同样的⼀段jQuery代码，所得到的效果不⼀样。这⾥再次证明了
$("Element").html(htmlString);//htmlString是⽤来设置每个匹配元素的⼀个HTML 字符串
jQuery对象
重新设置第⼀个匹配元素的html内容，这些元素的任何内容完全被新的内容取代。基于上⾯的实例，将原来的段落的HTML内容完全取代：
复制代码代码如下:
<div class="demo">
<p>我是div.demo中第⼀个P元素：<a href="#">我在第⼀个P⾥⾯</a></p>
<p>这是⼀个段落元素，⾥⾯包含了⼀个a链接元素<a href="#">W3CPLUS</a></p>
</div>
复制代码代码如下:
$(document).ready(function(){
$("div.demo p").html('<h2 class="title">新加的标题</h2><p>我是div.demo中第⼀个P元素：<a href="#">我在第⼀个P⾥⾯</a></p>');
});
从上⾯的效果中我们得知：如果使⽤.html(htmlStrong)⽅法匹配在多个元素上，那么多个匹配元素将的HTML内容将被替换，
并且都被替换成⼀样的HTML结构，也就是.html(htmlString)⽅法中指定的“htmlString”结构。换句话，如果你使
⽤.html(htmlString)⽅法选定了多个元素，那么这些选定的元素的HTML内容都会被.html(htmlString)⽅法中的“htmlString”所替代。就如上图所⽰。
$("Element").html(function(index,html){...});
jQuery对象
⽤来返回设置HTML内容的⼀个函数。接收元素的索引位置和元素旧的HTML作为参数。
使⽤个回调函数来替换⼀个元素的HTML内容，必须满⾜下⾯两个条件：
1. 当前元素的索引值位置(index值从0开始计算)；
2. 当前元素的旧的html内容。
函数的返回值随后被⽤来作为替代HTML。这种做法很⽅便的，如果你要替换多个元素的内容，⽽且不想像上⾯那们换成相同的内容，⽽是换成不同的内容，那么我们就可以使⽤这种⽅法，根据元素⾃⼰的位置或现有的内容（或者两者同时）来给多个元素替换成不同的html内容。我们来看⼀个实例：
复制代码代码如下:
<div class="demo">
<p><a href="#">我在第⼀个P⾥⾯</a></p>
<p><a href="#">W3CPLUS</a></p>
</div>
复制代码代码如下:
$(document).ready(function(){
$("div.demo p").html(function(index,oldHtml){
return "我是段落" + (index+1) + "：" + oldHtml;
});
});
操作元素的纯⽂本内容——.text()
jquery在一个元素后追加标签
前⾯的.html()⽅法让你可以读取或修改元素的HTML内容——包括元素的HTML标签；⽽jQuery中的.text()⽅法仅仅是对元素的纯⽂本的操作。他和.html()⽅法⼀样包含了三种使⽤⽅法：
$("Element").text();
返回字符串；
将获取匹配元素集合中每个元素的⽂本内容结合，包括他们的后代。.text()和.html()⽅法不同，.text()⽅法都可以在XML和HTML
⽂档中使⽤。.text()⽅法的结果是由所有匹配元素包含的⽂本内容组合起来的⽂本(由于不同的浏览器对HTML分析器的不同，在返回的⽂本换⾏和其他空格可能会有所不同。)
使⽤.text()和.html()⽅法都差不多相同，如：
复制代码代码如下:
<div class="demo">
<p><a href="#">W3CPLUS</a></p>
</div>
复制代码代码如下:
$(document).ready(function(){
alert(".text()读取的内容：" + $("div.demo p").text());
});
从上⾯的效果中我们得知：使⽤.text()⽅法，我们只读取元素的纯⽂本内容，包括他的后代元素，⽽此元素中的HTML标签（包括其后代元素的HTML标签）都被剥离出去，只留下⽂本内容。
.text()和.html()⽅法⼀样可以同时选定多个元素，但有⼀点不同：.html()匹配多个元素时，只会读取匹配元素中的第⼀个；⽽.text()⽅法不同，他在匹配多个元素时，会同时读取多个元素的内容，如：
复制代码代码如下:
<div class="demo">
<p><a href="#">W3CPLUS</a></p>
<p>我是段落⼆：<a href="#">W3CPLUS</a></p>
</div>
复制代码代码如下:
$(document).ready(function(){
alert(".text()⽅法：" + $("div.demo p").text());
alert(".html()⽅法：" + $("div.demo p").html());
});
$("Element").text(textString);//textString⽤于设置匹配元素内容的⽂本
jQuery对象
.text(textString)⽅法和.html(htmlString)⽅法都是⼀样⽤来替换元素的内容，他们不同之种是：html(htmlString)⽅法会把HTML 标签当作新的HTML标签来替换原来的内容，⽽.text(textString)则把HTML标签会转换成纯⽂本内容来代替元素的旧内容。换句话说，.text(textString)⽅法中如果包含了HTML的标签，此⽅法会将< 替换为 <,>替换为>。我们在前⾯
的.html(htmlString)实例基础上把.html()换成.text()。
复制代码代码如下:
<div class="demo">
<p><a href="#">W3CPLUS</a></p>
<p>我是段落⼆：<a href="#">W3CPLUS</a></p>
</div>
复制代码代码如下:
$(document).ready(function(){
$("div.demo p").text('<h2 class="title">新加的标题</h2><p>我是div.demo中第⼀个P元素：< href="#">我在第⼀个P⾥⾯</a> </p>');
});
效果图上可以得知，.text(textString)⽅法会将HTML标签当作纯⽂本内容来替换元素的旧内容，这⼀点和.html(htmlString)⽅法是完全不⼀样，⼤家可以和前⾯的.html(htmlString)进⾏⽐较。不过他们有⼀个相同之处：
.text()⽅法和.html()⽅法⼀样，也要以通过⼀个回调函数来动态的替换多个元素的内容，不致于像.text(textString)把多个元素换成相同的内容。
$("Element").text(function(index,text){...});
jQuery对像
⽤来返回设置⽂本内容的⼀个函数。接收元素的索引位置和元素旧的⽂本值作为参数。使⽤回调函数来替换⼀个元素的内容，必须满⾜下⾯两个条件：
1. 当前元素的索引值位置(index值从0开始计算)；
2. 当前元素的旧的⽂本内容。
函数的返回值随后被⽤来作为替代元素的纯⽂本内容。这种做法很⽅便的，如果你要替换多个元素的内容，⽽且不想像上⾯那们换成相同的内容，⽽是换成不同的内容，那么我们就可以使⽤这种⽅法，根据元素⾃⼰的位置或现有的内容（或者两者同时）来给多个元素替换成不同的千篇⼀⽂本内容。我们来看⼀个实例：
复制代码代码如下:
<div class="demo">
<p><a href="#">我在第⼀个P⾥⾯</a></p>
<p><a href="#">W3CPLUS</a></p>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。