jquery获取textarea⽂本值详解今天⽤jquery获取textarea⽂本值，遇到这么⼀个问题：
⼀开始⽤val()⽅法报错，后⾯使⽤text()，可以运⾏，但是获取的值永远为空，最后在改成val()，可以正常使⽤。
于是乎：为了把这个问题弄清楚，开始了遥远的解读jQuery源码之旅
步骤：
1. 给textarea设置默认值，分别输出text()和value()值
2. 改变textarea的⽂本值，在分别输出text()和value()值
例⼦：
代码：
1<!doctype html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>dom属性测试</title>
6</head>
7<body>
8<div id="js-div">
9<textarea id="js-textarea">hhhh</textarea>
10<button type="button" id="js-button">显⽰⽂本</button>
11
12<input value="hello world" id="js-input">
13</div>
14<script type="text/javascript" src="../demo-plugin/public/js/jquery.js"></script>
15<script type="text/javascript">
16var  $textArea = $('#js-textarea'),
17        textArea  = $textArea.val();
18
19        console.log('val:',textArea);
20        console.log('text:',$());
21
22        $('#js-button').click(function () {
23
24            console.log('changed val:',$textArea.val());
25            console.log('changed text:',$());
26        });
27</script>
28</body>
29</html>
View Code
运⾏结果截图：
从上⾯的例⼦可以看出：
1. text()⽅法只能够获取到textarea的初始化⽂本值。
2. val() ⽅法不仅可以获取textarea的初始化⽂本值，当⽂本值改变时，也能正常获取到。
接下来，看jquery源码：
1. text()⽅法：
text: function( text ) {
if ( typeof text != "object" && text != null )
pty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
var ret = "";
jQuery.each( text || this, function(){
jQuery.each( this.childNodes, function(){
if ( deType != 8 )
ret += deType != 1 ?
( [ this ] );
});
});
return ret;
},
View Code
从jquery源码中可以看出，text()⽅法是通过遍历元素的childNodes，获取每个⼦节点的nodeValue，拼接成字符串返回。
2. val()⽅法：
val: function( value ) {
if ( value == undefined ) {
if ( this.length ) {
var elem = this[0];
// We need to handle select boxes special
if ( deName( elem, "select" ) ) {
var index = elem.selectedIndex,
values = [],
options = elem.options,
one = pe == "select-one";
// Nothing was selected
if ( index < 0 )
return null;
// Loop through all the selected options
for ( var i = one ? index : 0, max = one ? index + 1 : options.length; i < max; i++ ) {
var option = options[ i ];
if ( option.selected ) {
// Get the specifc value for the option
value = jQuery.browser.msie && !option.attributes.value.specified ? : option.value;
jquery源码在线// We don't need an array for one selects
if ( one )
return value;
// Multi-Selects return an array
values.push( value );
}
}
return values;
// Everything else, we just grab the value
} else
return (this[0].value || "").replace(/\r/g, "");
}
return undefined;
}
return this.each(function(){
if ( deType != 1 )
return;
if ( structor == Array && /radio|checkbox/.test( pe ) )
this.checked = (jQuery.inArray(this.value, value) >= 0 ||
jQuery.inArray(this.name, value) >= 0);
else if ( deName( this, "select" ) ) {
var values = structor == Array ?
value :
[ value ];
jQuery( "option", this ).each(function(){
this.selected = (jQuery.inArray( this.value, values ) >= 0 ||
jQuery.inArray( , values ) >= 0);
});
if ( !values.length )
this.selectedIndex = -1;
} else
this.value = value;
});
},
View Code
这⾥由于是获取值，所以只需要看if(value == 'undefined'){...}分⽀，
根据代码，可以知道，当元素为input时，⾛的是else 分⽀，由语句：
return (this[0].value || "").replace(/\r/g, "");
可以看出，返回的元素的value值。
说了⼀堆，⼀定很疑惑分析这个有什么⽤，别⾛开，接下来更精彩：
页⾯初始化时：打印$('#js-textarea')，看看控制台都输出什么东西：
上⾯两张图可以看出，在为改变textarea 的⽂本值时，textarea 的value 属性值=初始值，nodeValue 值为null,text()⽅法返回的是childNodes ⾥⾯每个节点的nodeValue 值拼接起来的字符串，注意区分。
接着看childNodes ⾥⾯的内容：
可以看出，textarea有⼀个text⽂本节点，这个⽂本节点的nodeValue = 初始值。接下来：改变⽂本框的⽂本值，输出$('#js-textarea')，见证奇迹的时刻到了：先看textarea的value属性值：
value值改变，那么⼦节点text的nodeValue值有没有变化呢，看截图
从上图可以看出：很遗憾，textarea的childNodes⾥⾯text⽂本节点的nodeValue值并没有发⽣变化。
为什么会出现这个现象，我也还不知道，不过这个测试结果说明了，为什么val()⽅法可以正常取值，⽽text()取值会出现问题。
后记：经过研究，发现⾃闭合标签childNodes长度为0，⽽其他标签⾄少有⼀个text⽂本节点，⾄于原理，还不是很清楚，等弄清楚了再说，哈哈。

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