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. docker部署sftp

    一. 按照我博客中搭建sftp的方法做一个docker镜像 这种方法可用,但不是最好的,待改进.可参照另一篇博客:设置多用户不同权限的sftp服务器搭建 1. dockerfile文件如下,当前目录假 ...

  2. Nginx+Apache动静分离

    Nginx的静态处理能力很强,但是动态处理能力不足,因此,在企业中常用动静分离技术.动静分离技术其实是采用代理的方式,在server{}段中加入带正则匹配的location来指定匹配项 针对PHP的动 ...

  3. 高德地图API获取天气

    1.建立行政区规划清单表 use edw; drop table if exists dim_prov_city_adcode; create table if not exists dim_prov ...

  4. ARC初步介绍

    [转载自 http://onevcat.com/2012/06/arc-hand-by-hand/] 手把手教你ARC——iOS/Mac开发ARC入门和使用 Revolution of Objecti ...

  5. loj #6032. 「雅礼集训 2017 Day2」水箱 线段树优化DP转移

    $ \color{#0066ff}{ 题目描述 }$ 给出一个长度为 \(n\) 宽度为 \(1\) ,高度无限的水箱,有 \(n-1\) 个挡板将其分为 \(n\) 个 \(1 - 1\) 的小格, ...

  6. Intellij IDEA 封装Jar包（提示错误: 找不到或无法加载主类）

    封装的过程如下: 然后准备打包 选择Build或者ReBuild即可. 但这样就会引起开始第一个图的问题.提示无法加载主类,另外一个情况就是所有的外部第三方jar包都被封装到一个jar包里面了. 那么 ...

  7. vue 之bug<1> Warn : [vue-router] Duplicate named routes definition:

    原因:定义重复的路由名称. 我有3个不同的(父级)vue文件分别配置了3个相同的(子级)vue文件,配置路由的js文件里子集路由的name重复了. 解决方案: 一天一个小Bug

  8. Linux 构建ftp服务器

    1.安装vsftpd服务器 $sudo apt-get install vsftpd 2.cd 到etc文件,配置vsftpd.conf文件 $sudo vi /etc/vsftpd.conf 修改至 ...

  9. spring cloud知识点

    eureka注册中心(zookeeper,eureka) 也要集群,可以相互注册,网状结构.后面很多高可用的服务都是用这种方式.Eureka的客户端缓存技术 spring boot actuator ...

  10. springboot+redis实现缓存数据

    在当前互联网环境下,缓存随处可见,利用缓存可以很好的提升系统性能,特别是对于查询操作,可以有效的减少数据库压力,Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存 ...