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 前的按键判断代码
Mar 19 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
vue组件与复用详解
Apr 08 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
Vue 请求传公共参数的操作
Jul 31 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+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
django数据库自动重连的方法实例
2019/07/21 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Django--权限Permissions的例子
2019/08/28 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
节约用水倡议书
2014/04/16 职场文书
商务日语专业自荐信
2014/04/17 职场文书
关爱残疾人标语
2014/06/25 职场文书
医学检验专业自荐信
2014/09/18 职场文书
美容院合作经营协议书
2014/10/10 职场文书
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
python实现会员信息管理系统(List)
2022/03/18 Python