同事跟我说他用jquery取不到页面上隐藏元素input的值，他的html页面大概内容如下。
<!doctype html><html lang="zh"> <head><meta http-equiv="content-type" content="text/html; chart=utf-8" /><script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script><title>浅谈html页面内容执行顺序</title><script type="text/javascript">var urid = $('#hiddenurid').val();var contextpath = $('#hiddencontextpath').val();var urname = $('#hiddenurname').val();</script></head> <body><input type="hidden" id="hiddenurid" value="101" /><input type="hidden" id="hidd今年圣诞节encontextpath" value="/web" /><input t传播学ype="hidden" id="hiddenurname" 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; chart=utf-8" /><script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script><title>浅谈html页面内容执行顺序</title></head> <body><input type="hidden" id="hiddenurid" value="101" /><input type="hidden" id="hiddencontextpath" value="/web" /><input type="hidden" id="hiddenurname" value="小明" /><script type="text/javascript">var urid = $('#hiddenurid').val();var contextpath = $('#hiddencontextpath').val();var urname = $('#hiddenurname').val();</script></body> </html>把js放到网页的最下面，这样在js执行的时候，网页内容都已经加载完毕。把js放在网页的最下面方法并did的原形不是最好的解决方法，大部分情况js并不是总能放在网页的最下面。这时可以用window的onload事件，onload事件在整个页面都加载完成后才触发，可以把js脚本放在onload里面执行。不同浏览器onload事件添加方式也不一样。
ie下事件：
window金门旅游.attachevent('onload', function(){var urid = $('#hiddenurid').val();var contextpath = $('#hiddencontextpath').val();var urname = $('#hiddenurname').val();});chrome/firefox等dom标准事件：
window.addeventlistener('load', function(){var urid = $('#hiddenurid').val();var contextpath = $('#hiddencontextpath').val();var urname = $('#hiddenurname').val();});由于不同浏览器的事件添加方式不一样，jquery为我们提供了通用的初始化方法，该方法在页面加载完成时触发。
$(function(){var urid = $('#hiddenurid').val();var contextpath = $('#hiddencontextpath').val();var urname = $('#hiddenurname').val();});上面方法本质就是添加onload监听事件。
最终修改后的页面
<!doctype html><html lang="zh"> <head><meta http-equiv="content-type" content="text/html; chart=utf-8" /><script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script><title>浅谈html页面内容执行顺序</title><script type="text/javascript">$(function(){var urid = $('#hiddenurid').val();var contextpath = $('#hiddencontextpath').val();var urname = $('#hiddenurname').val();});</script></head> <body><input type="hidden" id="hiddenurid" v电报挂号alue="101" /><input type="hidden" id="hiddencontextpath" value="/web" /><input type="hidden" id="hiddenurname" value="小明" /></body> </html>本文发布于:2023-04-05 08:59:56，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/4074a182fa1fe7a73c363dc2ffd37d5f.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：js如何获取input里面的值（vue双向绑定原理）.doc
本文 PDF 下载地址：js如何获取input里面的值（vue双向绑定原理）.pdf
| 留言与评论（共有 0 条评论） |
