script脚本中写不写$(document).ready(function() {});的区别

$(document).ready() 里的代码是在页面内容都加载完才执行的,如果把代码直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了,此时如果你标签里执行的代码调用了当前还没加载过来的代码或者dom,那么就会报错,当然如果你把script标签放到页面最后面那么就没问题了,此时和ready效果一样。

$(document).ready(function(){})可以简写成$(function(){});


点击段落后,此段落隐藏:

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("p").click(function(){  
  7.     $(this).hide();  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12.   
  13. <body>  
  14.   <p>If you click on me, I will disappear.</p>  
  15. </body>  
  16.   
  17. </html>   

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="jquery.js"></script>  
  4. <script type="text/javascript">  
  5.   $("p").click(function(){  
  6.     $(this).hide();  
  7.   });  
  8. </script>  
  9. </head>  
  10.   
  11. <body>  
  12.   <p>If you click on me, I will disappear.</p>  
  13. </body>  
  14.   
  15. </html>   

但是把script放到页面最后的话,就可恢复隐藏效果:

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <html>  
  2. <head>  
  3. </head>  
  4.   
  5. <body>  
  6.   <p>If you click on me, I will disappear.</p>  
  7. </body>  
  8.   
  9. <script type="text/javascript" src="jquery-1.7.2.min.js"></script>  
  10. <script type="text/javascript">  
  11.   $("p").click(function(){  
  12.       $(this).hide();  
  13.   });  
  14. </script>  
  15.   
  16. </html>   

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值