Jquery中获取节点内容的html、text和val对比

来源：互联网发布：编写手机app软件编辑：程序博客网时间：2024/06/16 01:36

这几天学了点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():只显示该元素所有元素的文本内容。

同理就可以通过上述三个函数为某个节点设置文本内容或节点！

0 0