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. Angular2 内置指令 NgFor 和 NgIf 详解

    http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个 ...

  2. six

    团队序号:6组 团队名称:拯救地球小分队 团队项目的码云地址:https://gitee.com/lwj5950/seflash 此次博客撰写人姓名:刘威骏 学号:2017*****7168 团队中的 ...

  3. Android Fragment实现微信底部导航

    1.XML布局 (1)主界面 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x ...

  4. Navicat设定mysql定时任务

    有个需求:每天将一张表的前一天的数据抽取到另一张表中,使用Mysql数据库的客户端Navicat配置 第一步,创建过程cust_report,直接在查询窗口中执行,保存后函数列表中就会出现. 第二步, ...

  5. 高阶篇：4.1.2.3）产品零件级别的QFDII

    本章目的:介绍产品零件级别的QFDII编写方法. 1.前言 这章接前面部件级别的QFDII. 产品零件级别的QFDII,其实就是将零件QFDII所得到的设计要求,进一步分配零件的特征(Part Cha ...

  6. hdu1466计算直线的交点数 非原创

    原文链接 平面上有n条直线,且无三线共点,问这些直线能有多少种不同交点数. 比如,如果n=2,则可能的交点数量为0(平行)或者1(不平行). Input输入数据包含多个测试实例,每个测试实例占一行,每 ...

  7. [转] kerberos介绍

    [From] https://www.cnblogs.com/ulysses-you/p/8107862.html 重要术语 1. KDC 全称:key distributed center 作用:整 ...

  8. Hive优化-大表join大表优化

    Hive优化-大表join大表优化 5.大表join大表优化 如果Hive优化实战2中mapjoin中小表dim_seller很大呢?比如超过了1GB大小?这种就是大表join大表的问题.首先引入一个 ...

  9. Python——Django学习笔记

    Django——一个封装好的神奇框架 若本文有任何内容错误,望各位大佬指出批评,并请直接联系作者修改,谢谢!小白学习不易. 一.简要模型 模型类操作数据表: python manage.py shel ...

  10. 怎么搭建vue-cli脚手架

    我们在使用vue搭建项目的时候,经常要使用到vue-cli. 一.安装node.js 去node官网下载并安装node,一直next就行. 等待安装完毕,输入node-v,如果输出版本号,那说明已经成 ...