本文摘自PHP中文网,作者小云云,侵删。
以前一直觉得script在html中的任何位置都可以,今天做一个需求的时候才更正了自己的错误思想啊--script的位置也不是随便放的。本文主要谈论关于script在html中的摆放位置。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。希望能帮助到大家。首先是想实现一个select标签,有是和无两个option,但是在初始化的时候要求select标签默认选择空值,所以我在点击的时候加了一个方法让他把空值删掉:
XML/HTML Code复制内容到剪贴板
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<script src=
"jquery/jquery-1.11.1.min.js"
></script>
</head>
<script>
$(
'#checkcash'
).click(
function
() {
if
($(
'#checkcash'
).val() ==
'0'
) {
$(
"#checkcash option[value='0']"
).remove();
}
});
$(
"#alert"
).click(
function
(){
alert(
"1123"
);
})
</script>
<body>
是否已提现 <select id=
"checkcash"
style=
"width: 181px"
>
<option selected=
"selected"
value=
"0"
></option>
<option value=
"1"
>是</option>
<option value=
"2"
>否</option>
</select>
<input type=
'button'
id=
'alert'
value=
"anwo"
>
</body>
</html>
但是这样并不能达到想要的效果,起初以为是jquery语法错误还一直在网上查,改,但是都不管用,后来突然想到是不是应该把script放到后面,试了一下,结果果真ok了,这才恍然大悟,原来不是这样的。
后来查了一下原因是因为,html文件是自上而下的执行方式,但引入的css和javascript的顺序有所不同,css引入执行加载时,程序仍然往下执行,而执行到<script>脚本是则中断线程,待该script脚本执行结束之后程序才继续往下执行。所以,一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞。而有一些页面的效果的实现,是需要预先动态的加载一些js脚本,所以这些脚本应该放在<body>之前。其次,不能将需要访问dom元素的js放在body之前,因为此时还没有开始生成dom,所以在body之前的访问dom元素的js会出错,或者无效。就是因为这个,在dom没生成好时我就给它添加了方法,才导致这样。
真的应该多学习很多地方以为所以然了,却没深究。以后还要加油!
ps:其实还有另外一种方法,那就是用jquery的初始化页面方法,把上面给标签添加的点击事件加入到$(function(){})中也是可以的,原理和上面是一样的,这个方法是等页面加载好了才执行,所以不管放在哪都可以了!
相关推荐:
JavaScript中立即执行函数实例详解
JavaScript执行顺序的简单介绍
JavaScript执行顺序详细介绍_基础知识
以上就是关于script在html中的摆放位置解析的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html中的lang属性是干嘛的呢?html中的lang属性有什么作用呢?
更多相关阅读请进入《script》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者