js放到head中失效的原因与解决方法
1.今天写js碰到一个奇怪的问题,写好的js放到body里面执行,但是放到head中没有任何效果,为什么导致这种原因呢?
看失效代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < head > < title > new document </ title > < meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" /> < style type = "text/css" > .login{width:40px;height:25px;line-height:25px;margin-top:30px;text-align:center;color:#FFF;} </ style > < script type = "text/javascript" src = "jquery-1.7.1.min.js" ></ script > < script type = "text/javascript" > $(".login").click(function(){ alert(1); }); </ script > </ head > < body > < input type = "text" class = "pass" /> < div id = "enter" class = "login" > 登录</ div > </ body > </ html > |
2.解决办法:把js代码放到body中,或者利用 window.onload = function(){} 代码包裹,文档加载之后再执行,以后不建议放到head中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < head > < title > new document </ title > < meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" /> < style type = "text/css" > .login{width:40px;height:25px;line-height:25px;margin-top:30px;text-align:center;color:#FFF;} </ style > < script type = "text/javascript" src = "jquery-1.7.1.min.js" ></ script > < script type = "text/javascript" > window.onload = function(){ $(".login").click(function(){ alert(1); }); } </ script > </ head > < body > < input type = "text" class = "pass" /> < div id = "enter" class = "login" > 登录</ div > </ body > </ html > |
3.原因:
因为文档还没加载,就读了js,js就不起作用了想在head里用的话,用window.onload = function(){//这里包裹你的代码}
js可以分为外部的和内部的,外部的js一般放到head内。内部的js也叫本页面的JS脚本,内部的js一般放到body内,这样做的目的有很多:
1.不阻塞页面的加载(事实上js会被缓存)。
2.可以直接在js里操作dom,这时候dom是准备好的,即保证js运行时dom是存在的。
3.建议的方式是放在页面底部,监听window.onload 或 readystate 来触发js。
4.延伸:
head内的js会阻塞页面的传输和页面的渲染。head 内的 JavaScript 需要执行结束才开始渲染 body,所以尽量不要将 JS 文件放在 head 内。可以选择在 document 完成时,或者特定区块后引入和执行 JavaScript。head 内的 JavaScript 需要执行结束才开始渲染 body,所以尽量不要将 JS 文件放在 head 内。可以选择在 document 完成时,或者特定区块后引入和执行 JavaScript。
所以在head内的js一般要先执行完后,才开始渲染body页面。为了避免head引入的js脚本阻塞流浪器中主解析引擎对dom的解析工作,对dom的渲染,一般原则是,样式在前面,dom文档,脚本在最后面。遵循先解析再渲染再执行script这个顺序。
最新文章
- cookie小记
- Win7 系统下 Firefox hostadmin插件无法修改Host
- Canvas学习
- qq临时会话代码修改
- Linux_常用命令_03_磁盘/挂载_信息查看
- Linux查找文件夹名
- 深入理解 CSS 中的行高与基线
- 前端学习——JQuery Ajax使用经验
- 10个必备的移动UI设计资源站
- 配置rhel 6.4(64位)安装使用syslog-ng 3.5
- Android手势识别(单击 双击 抬起 短按 长按 滚动 滑动)
- /usr 的由来及/usr目录结
- http的几种请求的方式(Get、Post、Put、Head、Delete、Options、Trace和Connect)
- SQL Server2008 安装及概述
- 迎战大数据-Oracle篇
- DDD实战进阶第一波(十一):开发一般业务的大健康行业直销系统(实现经销商代注册用例与登录令牌分发)
- spo0lsv病毒分析
- MyEclipse 10 注册码 破解 到期限制
- 记2013年度成都MVP社区巡讲
- 共用tableview一个继承类里面有
热门文章
- Comet OJ - Contest #11 D isaster 重构树+倍增+dfs序+线段树
- Bzoj 1798: [Ahoi2009]Seq 维护序列seq(线段树区间操作)
- python利用pybind11调用PCL点云库
- 想学习linux操作系统,于是选择了在win8 虚拟机VM player 里装了Linux版本Centos7
- shell tail 命令
- Spring Cloud Eureka(一): 开篇说明及目录汇总
- 预处理、const、static与sizeof-sizeof与strlen有哪些区别
- 网络编程udp入门
- Linux之profile、bash_profile、bashrc文件
- Vue之混入(mixin)与全局混入