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 相关文章推荐
Jquery 动态添加按钮实现代码
May 06 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 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
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
IE php关于强制下载文件的代码
2008/08/23 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
python处理文本文件并生成指定格式的文件
2014/07/31 Python
python回调函数用法实例分析
2015/05/09 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
Python如何输出百分比
2020/07/31 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
电子商务专业推荐信范文
2013/12/02 职场文书
企业军训感想
2014/02/07 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
庆七一活动总结
2014/08/27 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
四年级语文教学反思
2016/03/03 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
Python何绘制带有背景色块的折线图
2022/04/23 Python