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. playbook 实例

    vim ~/.vimrc autocmd FileType yaml setlocal sw=2 ts=2 et ai 变量使用及错误处理 --- - hosts: db remote_user: r ...

  2. 创建一个新的laravel

    //创建laravelcomposer create-project laravel/laravel shop 安装好 Laravel 之后的下一步是设置你的应用密钥为随机字符串.如果你通过 comp ...

  3. PHP mysqli_get_client_stats() 函数

    定义和用法 mysqli_get_client_stats() 函数返回有关客户端每个进程的统计. 语法 mysqli_get_client_stats(); 返回有关客户端每个进程的统计: < ...

  4. （十八）链接数据库，QSqlTableModel

    QMYSQL——mysql QSQLITE——sqlite QOICQ——orcale 所需头文件 .pro增加 sql #include <QSqlDatabase> #include ...

  5. 小米 oj 马走日 （bfs 或 双向bfs）

     马走日 序号:#56难度:困难时间限制:1500ms内存限制:10M 描述 在中国象棋中,马只能走日字型.现在给出一个由 N*M 个格子组成的中国象棋棋盘( 有(N+1)*(M+1)个交叉点可以落子 ...

  6. 关于tensorflow里面的tf.contrib.rnn.BasicLSTMCell 中num_units参数问题

    这里的num_units参数并不是指这一层油多少个相互独立的时序lstm,而是lstm单元内部的几个门的参数,这几个门其实内部是一个神经网络,答案来自知乎: class TRNNConfig(obje ...

  7. Eclise快捷键（最全）

    Eclipse常用快捷键 Eclipse常用快捷键 1几个最重要的快捷键 代码助手:Ctrl+Space(简体中文操作系统是Alt+/) 快速修正:Ctrl+1 单词补全:Alt+/ 打开外部Java ...

  8. PySpider的安装

    使用 Pip 安装,命令如下 pip install pyspider 命令执行完毕即可安装成功. 常见错误: Windows 下可能会出现这样的错误提示:Command "python s ...

  9. MySQL优化相关参数--先做个记录，以后可能用得到

    innodb_io_capacity:可设置的磁盘IO性能参数,越高代表当前mysql的IO性能更好,可用做决策刷脏页速度的参数: innodb_flush_neighbors:刷脏页是否开启连坐机制 ...

  10. SpringMVC支持跨域请求

    一.如果项目中使用的SpringMVC4.3.9以下,就需要对该请求配置Filter,设置请求头可支持跨域.使用方法: --spring cloud zuul支持跨域---:https://blog. ...