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中有时候失效的更多相关文章

  1. js 生成的html class属性失效问题

    var html = '<fieldset class="struct-info" id="SlopeZY"><legend>变坡点(Z ...

  2. 外引js — 先引入cdn，cdn失效时引入本地js

    参考:http://www.tianshan277.com/563.html 效果: html: <!DOCTYPE html> <html lang="en"& ...

  3. 在使用dot。js中的值中有空格出现后，进行去除

    title= {{= x.replace(/ /g,' ') 通过replace将数据进行处理再展示

  4. js中返回上一页失效的解决办法

    最近在做移动端的时候,碰到了一个问题,就是点击返回按键,使用history.go(-1)或history.back(-1)不能够生效.于是便寻找其他的方法,终于找到了一位大神的方法如下: if(win ...

  5. JS代码判断字符串中有多少汉字

    $("form").submit(function () { var content = editor.getContentTxt(); var sum = 0; re = /[\ ...

  6. JS代码判断字符串中有多少汉字【转】

    $("form").submit(function () { 2 var content = editor.getContentTxt(); 3 var sum = 0; 4 re ...

  7. 关于 js 动态生成html 绑定事件失效的问题

    在实际问题中,也只到使用新版jq 的on 事件 进行动态元素的绑定: 是这样 (但是依然没有效果——): $('dom节点').on('click',function(){}) 之后经过查阅发现:正确 ...

  8. js 鼠标放到图片上放大某一部分效果

    动图效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

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

    1.今天写js碰到一个奇怪的问题,写好的js放到body里面执行,但是放到head中没有任何效果,为什么导致这种原因呢? 看失效代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

随机推荐

  1. NSUserDefault存储类

    类要实现NSCoding协议 实现encodeWithCoder和initWithCoder方法 先把类的instance archive成NSData,然后存起来 TGTest *tt = [TGT ...

  2. HTML-文本域属性设置

    1.设置文本域的字体 <TEXTAREA STYLE="font-size:9pt;font-family:verdana;color:#333333">输入内容< ...

  3. Linux下如何将文件下载到指定目录

    一.问题描述 当我在搭服务器的时候,发现由于下载的东西太多,所以需要将一些安装包下载到指定的目录下. 二.解决办法 wget -P /usr/test http://download.redis.io ...

  4. 命令提示符下的WQL

    WQL就是英文WMI Query Language的缩写,就是说wmic这个命令支持简单的一些SQL查询,我们以实例来讲解他的部分用法,这个命令过于强大,因此以下只是该命令的冰山一角. 列出本地连接的 ...

  5. Win10远程连接，出现身份验证错误。远程计算机要求的函数不受支持 这可能是由于CredSSP加密Oracle修正 。

    问题: 升级至win10 最新版本10.0.17134,安装最新补丁后无法远程win server 2016服务器,报错信息如下: 出现身份验证错误,要求的函数不正确,这可能是由于CredSSP加密O ...

  6. lua table、ipairs/pairs基础知识

    1.什么是table? table是Lua最复杂最强大的数据结构,Lua本身并不是面向对象语言,但是对面向对象中毒比较深的程序员,可以借助table”完美”地模拟面向对象编程.最简单地,我们可以把ta ...

  7. easyUI----纵向合并单元格

    使用Easyui-DataGrid过程用.做统计/报表等时经常会使用到合并单元格,原生态Easyui-DataGrid没有合并单元格的属性或方法. 解决方案: 代码一 onLoadSuccess: f ...

  8. 浏览器对document.all的支持差异

    从何而来从IE4开始IE的object model才增加了document.all对象,MSDN中也对 Object.all 有详细的说明,Object.all是个HTMLCollection,不是数 ...

  9. GraphQL 总结 + 在Django应用(Graphene)

        由Xmind编辑,下次更新会附加python demo.         附件列表

  10. KVC、KVO实现过程

    1.KVC的实现过程 以 [object setValue:@"134567" forKey:@"uid"];为例子,来探究KVC的实现过程 第一步:搜索1.首 ...