1.今天写js碰到一个奇怪的问题，写好的js放到body里面执行，但是放到head中没有任何效果，为什么导致这种原因呢？

看失效代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <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;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中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <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;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. 关于用jQuery的animate方法实现的动画在IE中失效的原因以及解决方法

    这几天在学jQuery,本身还只是一个新手,写了一个简单的动画--圆形头像的缩放.本身是用Firefox进行调试的,一切进行的很顺利,缩放可以按照预期执行,结果拿到IE上去之后,发现缩放动画失效了.后 ...

  2. 在同一个类中，一个方法调用另外一个有注解（比如@Async，@Transational）的方法，注解失效的原因和解决方法

    参考原贴地址:https://blog.csdn.net/clementad/article/details/47339519 在同一个类中,一个方法调用另外一个有注解(比如@Async,@Trans ...

  3. 【转】在同一个类中，一个方法调用另外一个有注解（比如@Async，@Transational）的方法，注解失效的原因和解决方法

    参考 原文链接 @Transactional does not work on method level 描述 在同一个类中,一个方法调用另外一个有注解(比如@Async,@Transational) ...

  4. @Transational）的方法，注解失效的原因和解决方法

    在同一个类中,一个方法调用另外一个有注解(比如@Async,@Transational)的方法,注解是不会生效的. 比如,下面代码例子中,有两方法,一个有@Transational注解,一个没有.如果 ...

  5. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  6. WIN文件放到LINUX中无法CAT过滤的解决方法

    有个WIN文件放到LINUX服务器上处理的时候,由于编码的问题,导致无法过滤,此时需要对文件进行处理 cat file | tr -s "\r" "\n" &g ...

  7. js在php 中出现 unterminated string literal 解决方法

    出现这个问题就是空格造成的(可清空格符,换行符等) 示例代码如下: php 下报错 <?php echo "<a href=javascript:if(window.confir ...

  8. 坑！vue.js在ios9中失效

    坑!vue.js在ios9中失效! 接到实现,在移动端生成一个分享链接,分享到微信,在微信中打开,加入! 好,用vue实现----------------------->写代码--------- ...

  9. oracle 索引失效原因及解决方法

    oracle 索引失效原因及解决方法 2010年11月26日 星期五 17:10 一.以下的方法会引起索引失效 ‍1,<>2,单独的>,<,(有时会用到,有时不会)3,like ...

随机推荐

  1. ila核数据输出

    在Tcl Console中输入以下命令(其中dataxxxx表示文件名,hw_ila_2则为ila窗口名): write_hw_ila_data -csv_file -force dataxxxx [ ...

  2. P2051 [AHOI2009]中国象棋 大力DP

    状压个啥$qwq$ 思路:大力$DP$ 提交:2次(自信的开了$int$) 题解:(见注释) #include<cstdio> #include<iostream> using ...

  3. istio 安装与bookinfo示例运行

    目的 本文旨在帮助想了解istio安装和运行bookinfo示例的同学快速入门 前置准备 安装k8s和helm 1.k8s安装 修改主机名 hostnamectl set-hostname k8s-m ...

  4. [Luogu] 火柴排队

    https://www.luogu.org/problemnew/show/P1966 离散化 树状数组求逆序对个数 #include <bits/stdc++.h> using name ...

  5. bbs项目---表关系

    表关系 用户表个人博客表点赞表文章表文章描述表文章和标签多对多关系表评论表分类表标签表 表关系设计示例收集: 1 https://bbs.csdn.net/topics/390260474 2 上图博 ...

  6. [python]有中文字符程序异常的解决方案

    一. 含有中文字符无法运行 在python3中用的是Unicode编码,Unicode号称万国码,可以向所有的编码进行兼容.不会出现这种问题. Python2中使用的是ASCII编码,会出现这种问题. ...

  7. BZOJ 4898 Luogu P3778 [APIO2017]商旅 (分数规划、最短路)

    题目链接: (bzoj)https://www.lydsy.com/JudgeOnline/problem.php?id=4898 (luogu)https://www.luogu.org/probl ...

  8. art-template自定义函数

    自定义函数 // 百分比计算 template.defaults.imports.percentage = function (num1, num2) { var res; if(!num1 & ...

  9. elasticsearch+logstash+kibana部署

    这篇博客讲的是elasticsearch+logstash+kibana部署的方法. 内容大纲: 1.elasticsearch+logstash+kibana部署 2.收集Tomcat日志 3.收集 ...

  10. iOS UILabel显示HTML文本

    NSString * htmlString = @"<html><body> Some html string \n <font size=\"13\ ...