js为什么放到head中有时候失效
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这个顺序。
js为什么放到head中有时候失效的更多相关文章
- js 生成的html class属性失效问题
var html = '<fieldset class="struct-info" id="SlopeZY"><legend>变坡点(Z ...
- 外引js — 先引入cdn，cdn失效时引入本地js
参考:http://www.tianshan277.com/563.html 效果: html: <!DOCTYPE html> <html lang="en"& ...
- 在使用dot。js中的值中有空格出现后，进行去除
title= {{= x.replace(/ /g,' ') 通过replace将数据进行处理再展示
- js中返回上一页失效的解决办法
最近在做移动端的时候,碰到了一个问题,就是点击返回按键,使用history.go(-1)或history.back(-1)不能够生效.于是便寻找其他的方法,终于找到了一位大神的方法如下: if(win ...
- JS代码判断字符串中有多少汉字
$("form").submit(function () { var content = editor.getContentTxt(); var sum = 0; re = /[\ ...
- JS代码判断字符串中有多少汉字【转】
$("form").submit(function () { 2 var content = editor.getContentTxt(); 3 var sum = 0; 4 re ...
- 关于 js 动态生成html 绑定事件失效的问题
在实际问题中,也只到使用新版jq 的on 事件 进行动态元素的绑定: 是这样 (但是依然没有效果——): $('dom节点').on('click',function(){}) 之后经过查阅发现:正确 ...
- js 鼠标放到图片上放大某一部分效果
动图效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- js放到head中失效的原因与解决方法
1.今天写js碰到一个奇怪的问题,写好的js放到body里面执行,但是放到head中没有任何效果,为什么导致这种原因呢? 看失效代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
随机推荐
- TCP 的保活定时器
引言 可以没有任何数据流过一个空闲的 TCP 连接. 这意味着我们可以启动一个客户与服务器建 立一个连接,然后离去数小时.数天.数个星期或者数月,而连接依然保持.中间路由器可以崩溃和重启,电话线可以被 ...
- 高德地图API获取天气
1.建立行政区规划清单表 use edw; drop table if exists dim_prov_city_adcode; create table if not exists dim_prov ...
- leetcode-680-Valid Palindrome II
题目描述: Given a non-empty string s, you may delete at most one character. Judge whether you can make i ...
- (STM32F4) Timer Compare mode 操作
Timer 比較模式(compare) 具體會用在哪種狀況目前還沒有這種經驗,但Compare有配置功能pin想必有應用會用到這個模式 從Function Block來看比較模式比基本Timer多了比 ...
- 大象——Thinking in UML
目录 大象--Thinking in UML 面向对象 普通民众的面向对象 大师眼中的面向对象 大象--Thinking in UML 大音希声,大象希形, 近来闲暇,随手翻起一些曾经看过的书籍,才发 ...
- 世界最大BT服务器本周死了三回 海盗湾要凉凉？
想當初,我是受到BT網站海盜灣的啟發,開發了一個DHT下載網站:http://www.ibmid.com,有一段時間通宵編程,理解此個協議. 海盗湾(The Pirate Bay)是世界上最大的 BT ...
- 第六次 Scrum Meeting
第六次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/4/10 22:00 30min 大运村1号楼6F 附Github仓库:WEDO 例会照片 工作情况总结(4.10 ...
- C++标准库类模板(stack)和 队列(queue)
在C++标准库(STL)中有栈和队列的类模板,因此可以直接使用 1.栈(stack):使用栈之前,要先包含头文件 : #include<stack> stack.push(elem); / ...
- 文献综述十七：基于 sql环境下超市管理系统的设计与实现
一.基本信息 标题:基于 sql环境下超市管理系统的设计与实现 时间:2018 出版源:智能计算机与应用 文件分类:uml技术的研究 二.研究背景 从超市管理系统的实际应用出发,在系统分析过程中,从功 ...
- python - 斐波那契（Fibonacci）数列
斐波那契数列即数列中每一项等于它前面两项的和,公式如下: f(n) = f(n-1) + f(n-2) n>2 ----- 递推公式 f(n) = 1 ...