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

2020-05-24 21:25:36易采站长站整理

本节内容主要介绍的是如何使用jQuery中的.html(),.text()和.val()三种方法,用于读取,修改元素的html结构,元素的文本内容,以及表单元素的value值的方法。jQuery中为我们提供了多种方法用于对元素的HTML结构和元素的文本内容的操作,比如说,你可以给已存在的元素的内部,周围,前面或者后面增加新元素;或者用一个元素替代另一个元素;你也可以读取或者修改一个元素的内容或结构。有时我们就会比较模糊,不知道是给元素增加内容或者增加一个元素,比如说我们需要给一个存在的元素有效的增加这个元素的内容。


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

.html():读取和修改一个元素的HTML内容,详情.html();
.text():读取和修改一个元素的文本内容,详情.text();
.val():读取和修改一个表单元素的value字段值,详情.val()。

正如你将看到的,这些方法可以让你轻松的读取或修改元素的原始内容或读取和修改任何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 class=”demo”>
<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只有一个P元素,如果有多个呢?会有什么现像发生,我们不枋在看一回: