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. shell中tr的用法

    转自http://blog.csdn.net/zhuying_linux/article/details/6825568 tr(translate缩写)主要用于删除文件中的控制字符,或进行字符转换.语 ...

  2. Android来电、去电监听

    Android手机中添加手机来电的状态,使用PhoneStateListener来监听. TelephonyManager telephonyManager = (TelephonyManager) ...

  3. 函数新特性、内联函数、const详解

    一.函数回顾与后置返回类型 函数定义中,形参如果在函数体内用不到的话,则可以不给形参变量名字,只给其类型. 函数声明时,可以只有形参类型,没有形参名 把函数返回类型放到函数名字之前,这种写法,叫前置返 ...

  4. Win10通电自动开机的解决办法

    前几天Win10强推系统升级,更新后无意中发现每次通电电脑就自动开机了. 解决办法: 打开控制面板>电源选项>选择电源按钮的功能,把关机设置里的“启用快速启动(推荐)”选项去掉就可以了. ...

  5. 安装mysqlclient, 链接mysql失败，提示“Library not loaded: @rpath/libmysqlclient.21.dylib”

    问题: >>> import MySQLdb Traceback (most recent call last): File "<stdin>", l ...

  6. 使用百度地图API查地理坐标

    在网络编程中,我们会和API打交道.那么,什么是API?如何使用API呢?本文分享了一下我对API的理解以及百度地图API的使用. API是"Application Programming ...

  7. 进阶篇：5.3.1）均方根法(Root-Sum-Squares，RSS)

    本章目的:了解均方根法,运用均方根法. 1.定义 均方根法(Root-Sum-Squares,RSS):均方根法是统计分析法的一种,是把尺寸链中的各个尺寸公差的平方之和再开根即得到关键尺寸的公差. 其 ...

  8. 安装Windows 64 位 mysql 最新版本解压包中没有data目录和my-default.ini及服务无法启动的快速解决办法

    mysql官网下载地址:https://dev.mysql.com/downloads/mysql/ 首先安装包解压后,没有网上教程里面提到的data文件夹和my-default.ini 配置环境变量 ...

  9. cucumber & selenium & bddtest

    目录 1.Cucumber介绍 refer link: 2.使用步骤 2.1 引入依赖 2.2新建test.future文件 2.3在resource目录下创建cucumber.bat,执行bat,c ...

  10. 关于ASP.NET MVC+Repository+Service架构的一些思考

    看了一些ASP.NET MVC开源项目后的一些想法,关于ASP.NET MVC+Repository+Service架构的一些思考 最近在学习ASP.NET MVC 2.0的一些开源项目,发现这些项目 ...