jquery 取问号后参数 jquery取文本框值

您所在的位置：网站首页 › jquery操作文本可以使用什么方法 › jquery 取问号后参数 jquery取文本框值

jquery 取问号后参数 jquery取文本框值

2023-05-28 21:51| 来源: 网络整理| 查看: 265

今天用jquery获取textarea文本值，遇到这么一个问题：

一开始用val()方法报错，后面使用text()，可以运行，但是获取的值永远为空，最后在改成val()，可以正常使用。

于是乎：为了把这个问题弄清楚，开始了遥远的解读jQuery源码之旅

步骤：

1. 给textarea设置默认值，分别输出text()和value()值

2. 改变textarea的文本值，在分别输出text()和value()值

例子：

代码：

1 2 3 4 5 dom属性测试 6 7 8 9 hhhh 10 显示文本 11 12 13 14 15 16 var $textArea = $('#js-textarea'), 17 textArea = $textArea.val(); 18 19 console.log('val:',textArea); 20 console.log('text:',$textArea.text()); 21 22 $('#js-button').click(function () { 23 24 console.log('changed val:',$textArea.val()); 25 console.log('changed text:',$textArea.text()); 26 }); 27 28 29

运行结果截图：

jquery 取问号后参数 jquery取文本框值_jQuery

从上面的例子可以看出：

1. text()方法只能够获取到textarea的初始化文本值。

2. val() 方法不仅可以获取textarea的初始化文本值，当文本值改变时，也能正常获取到。

接下来，看jquery源码：

1. text()方法：

text: function( text ) { if ( typeof text != "object" && text != null ) return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) ); var ret = ""; jQuery.each( text || this, function(){ jQuery.each( this.childNodes, function(){ if ( this.nodeType != 8 ) ret += this.nodeType != 1 ? this.nodeValue : jQuery.fn.text( [ this ] ); }); }); return ret; },

从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 ( jQuery.nodeName( elem, "select" ) ) { var index = elem.selectedIndex, values = [], options = elem.options, one = elem.type == "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.text : option.value; // 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 ( this.nodeType != 1 ) return; if ( value.constructor == Array && /radio|checkbox/.test( this.type ) ) this.checked = (jQuery.inArray(this.value, value) >= 0 || jQuery.inArray(this.name, value) >= 0); else if ( jQuery.nodeName( this, "select" ) ) { var values = value.constructor == Array ? value : [ value ]; jQuery( "option", this ).each(function(){ this.selected = (jQuery.inArray( this.value, values ) >= 0 || jQuery.inArray( this.text, values ) >= 0); }); if ( !values.length ) this.selectedIndex = -1; } else this.value = value; }); },

这里由于是获取值，所以只需要看if(value == 'undefined'){...}分支，

根据代码，可以知道，当元素为input时，走的是else 分支，由语句：

return (this[0].value || "").replace(/\r/g, "");

可以看出，返回的元素的value值。

说了一堆，一定很疑惑分析这个有什么用，别走开，接下来更精彩：

页面初始化时：打印$('#js-textarea'),看看控制台都输出什么东西：

jquery 取问号后参数 jquery取文本框值_Code_02