事跟我说他用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监听事件。
最终修改后的页面
者:Tam Hanna
转发链接:https://www.creativebloq.com/how-to/21-ways-to-optimise-your-css-and-speed-up-your-site
大家推荐一个网站(css-loaders.com),这个网站真的是特别好用,将来同学在开发项目的时候基本上都需要用到各种各样的加载状态,各种各样的加载动画。这个网站就提供了各种各样的加载动画,而且用起来超级简单,就不可能不会用,特别简单。
大家看到了吗?这么一堆的加载中动画就很方便,而且我告诉你怎么用。举个例子,比如这个,大家看我喜欢想要哪个动画,只需要把鼠标放上去,有一个叫copy the CSS,把它的CSS样式复制下来。
然后去干什么?找到代码,这是一个空的文件,直接Ctrlv粘贴,它就能自动的把刚才所看中动画的样式给复制进来了。对于页面来说就只需要加一个div,这个div在这就加一个class,名字为loader的DIV,这样一个加载中动画就有了。
然后就直接打开看一下,大家会看到了吗?这个动画就有了,特别方便。想换成别的样式的就随便切换就行了。只要有DIV,将来想用什么动画就直接copy它的CSS样式,比如这个,再复制一下,点击一下就行了。把之前的样式删掉,再粘进来,刚才复制过来的,再粘贴,动画也就出来了。
是不是特别的好用?而且这里面的动画效果特别多,能够让网页变得非常炫酷。这些足够用了,真的是多的不能再多了,给我看的都眼花缭乱了。这样一个闹钟的效果,什么样的都有。而且做的很简单,只需要替换掉CSS,有这样一个div,效果就有了。
看到了吗?各位,就这个网站的,必须收藏,真的好用。
*请认真填写需求信息,我们会在24小时内与您取得联系。