js放到head中失效的原因与解决方法


Posted in Javascript onMarch 07, 2017

1.今天写js碰到一个奇怪的问题,写好的js放到body里面执行,但是放到head中没有任何效果,为什么导致这种原因呢?

看失效代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <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;background-color:#4E74A5;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中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <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;background-color:#4E74A5;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这个顺序。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
一张Web前端的思维导图分享
Jul 03 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
Bootstrap媒体对象学习使用
Mar 07 #Javascript
angular十大常见问题
Mar 07 #Javascript
Bootstrap表单控件学习使用
Mar 07 #Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 #Javascript
Bootstrap进度条实现代码解析
Mar 07 #Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 #Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 #Javascript
You might like
浅谈PHP语法(1)
2006/10/09 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
php实现简单的上传进度条
2015/11/17 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
python 运算符 供重载参考
2009/06/11 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
Python学习小技巧总结
2018/06/10 Python
python可视化实现代码
2019/01/15 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
精伦电子Java笔试题
2013/01/16 面试题
证婚人搞笑证婚词
2014/01/10 职场文书
学习十八大报告感言
2014/02/04 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python