1.HTML
html()
取得第一个匹配元素的html内容(标签+内容)。
html(val)
设置每一个匹配元素的html内容,就是将上一步取得的内容全部替换成括号中val。
注:html()
方法可以用于XHTML文档,但不能用于XML文档!
** html()方法使用在多个元素上时,只读取第一个元素。 **
demo如下:
html页面代码
<div id="textDiv1">
<span class="textSpan">我是第一个span</span>
<span class="textSpan">我是第二个span</span>
<span class="textSpan">我是第三个span</span>
</div>
执行jQuery代码
alert($("#textDiv1").html());
得到:
如果执行
alert($(".textSpan").html());
得到
可见,
html()
方法使用在多个元素上时,只读取第一个元素。
2.TEXT
text()
取得所有匹配元素的内容(仅包括文本,没有标签)。
text(val)
设置所有匹配元素的文本内容。
** text()用来读取元素的纯文本内容,包括其后代元素,text()方法不能使用在表单元素上。 **
demo如下
html页面代码
<div id="textDiv1">
<span class="textSpan">我是第一个span</span>
<span class="textSpan">我是第二个span</span>
<span class="textSpan">我是第三个span</span>
</div>
执行jQuery代码
alert($("#textDiv1").text());
得到
如果执行
alert($(".textSpan").text());
得到
可见,
text()
是可以作用所有匹配的元素的,但是注意取#textDiv1
和取textSpan
,结果的显示形式还是有区别的。
3.VAL
val()
val()常用来操作标准的表单组件对象,如button
,text
,hidden
。
val(val)
设置每一个匹配元素的值。
demo如下
html代码
<select id="selectVal">
<option value="1" selected="selected">1</option>
<option value="2" >2</option>
</select>
执行jQuery代码
alert($("#selectVal").val()); //取得值为:1
4.text(val)和html(val)的对比
html页面代码:
<div></div>
jquery代码:
$("div").html("<b>Nice to meet you</b>");
//$("div").text("<b>Nice to meet you</b>");
区别立下:
如有不妥,还请斧正!