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 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
JS IE和FF兼容性问题汇总
Feb 09 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
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
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
使用python绘制cdf的多种实现方法
2020/02/25 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
台湾生鲜宅配:大口市集
2017/10/14 全球购物
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
总经理职责范文
2013/11/08 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
安徽导游词
2015/02/12 职场文书
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android