这几天学了点ajax 对Jquery中获取节点文本内容函数html()、text()和val()用途区别有点混乱,索性就写出来顺便学习一下:
为了对比特意写了一点代码测试:
<input type="button" id="button" value="点击"></br>
<input type="text" id="text">
<div id="div">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
$(document).ready(function(){
var button=$("#button");
button.click(function(){
alert("VAL提示:"+button.val());
alert("HTML提示:"+button.html());
alert("TEXT提示:"+button.text());
});
var input=$("#text");
input.keyup(function(event){
var myEvent=event||window.event;
var keyCode=myEvent.keyCode;
if(keyCode==13){
alert("VAL文本框内容为:"+input.val());
alert("HTML文本框内容为:"+input.html());
alert("TEXT文本框内容为:"+input.text());
}
});
var div=$("#div");
div.click(function(){
alert("DIV(VAL)文本内容为:"+div.val());
alert("DIV(HTML)文本内容为:"+div.html());
alert("DIV(TEXT)文本内容为:"+div.text());
});
});
运行结果依次(由于图比较多就不贴了):
按钮:
VAL提示:点击
HTML提示:
TEXT提示:
文本框:
VAL文本框内容为:a
HTML文本框内容为:
TEXT文本框内容为:
Div元素:
DIV(VAL)文本内容为:
DIV(HTML)文本内容为:
<div>1</div>
<div>2</div>
<div>3</div>
DIV(TEXT)文本内容为:
1
2
3
val():从上面可以看出是对button input可以获取其文本值。经过查资料发现val()主要应用于表单元素 如select 等。
html():显示该元素所有节点和文本内容。
text():只显示该元素所有元素的文本内容。
同理就可以通过上述三个函数为某个节点设置文本内容或节点!