js如何获取input里面的值（vue双向绑定原理）
程序员文章站
2023-12-05 21:51:04
同事跟我说他用jquery取不到页面上隐藏元素input的值，他的html页面大概内容如下。
同事跟我说他用jquery取不到页面上隐藏元素input的值，他的html页面大概内容如下。
<!doctype html>
<html lang="zh">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script>
<title>浅谈html页面内容执行顺序</title>
<script type="text/javascript">
var userid = $('#hiddenuserid').val();
var contextpath = $('#hiddencontextpath').val();
var username = $('#hiddenusername').val();
</script>
</head>
<body>
<input type="hidden" id="hiddenuserid" value="101" />
<input type="hidden" id="hiddencontextpath" value="/web" />
<input type="hidden" id="hiddenusername" value="小明" />
</body>
</html>页面中的js脚本在head中，js脚本要读取的input在body中。浏览器对html页面内容的加载是顺序加载，也就是在html页面中前面先加载，因此当加载到js脚本时，input还没有加载到浏览器中。js是一种解释性的脚本，也是从上而下顺序执行，由于这段js代码是立即执行的，所以当js在执行的时候，读取不到input的值。
最直接的修改方法是把js放到网页的最下面执行。
<!doctype html>
<html lang="zh">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script>
<title>浅谈html页面内容执行顺序</title>
</head>
<body>
<input type="hidden" id="hiddenuserid" value="101" />
<input type="hidden" id="hiddencontextpath" value="/web" />
<input type="hidden" id="hiddenusername" value="小明" />
<script type="text/javascript">
var userid = $('#hiddenuserid').val();
var contextpath = $('#hiddencontextpath').val();
var username = $('#hiddenusername').val();
</script>
</body>
</html>把js放到网页的最下面，这样在js执行的时候，网页内容都已经加载完毕。把js放在网页的最下面方法并不是最好的解决方法，大部分情况js并不是总能放在网页的最下面。这时可以用window的onload事件，onload事件在整个页面都加载完成后才触发，可以把js脚本放在onload里面执行。不同浏览器onload事件添加方式也不一样。
ie下事件：
window.attachevent('onload', function(){
var userid = $('#hiddenuserid').val();
var contextpath = $('#hiddencontextpath').val();
var username = $('#hiddenusername').val();
});chrome/firefox等dom标准事件：
window.addeventlistener('load', function(){
var userid = $('#hiddenuserid').val();
var contextpath = $('#hiddencontextpath').val();
var username = $('#hiddenusername').val();
});由于不同浏览器的事件添加方式不一样，jquery为我们提供了通用的初始化方法，该方法在页面加载完成时触发。
$(function(){
var userid = $('#hiddenuserid').val();
var contextpath = $('#hiddencontextpath').val();
var username = $('#hiddenusername').val();
});上面方法本质就是添加onload监听事件。
最终修改后的页面
<!doctype html>
<html lang="zh">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script>
<title>浅谈html页面内容执行顺序</title>
<script type="text/javascript">
$(function(){
var userid = $('#hiddenuserid').val();
var contextpath = $('#hiddencontextpath').val();
var username = $('#hiddenusername').val();
});
</script>
</head>
<body>
<input type="hidden" id="hiddenuserid" value="101" />
<input type="hidden" id="hiddencontextpath" value="/web" />
<input type="hidden" id="hiddenusername" value="小明" />
</body>
</html>