+发表新主题
查看: 1978|回复: 0

[代码片段] jquery操作 - 事件

[复制链接]

[代码片段] jquery操作 - 事件

[复制链接]
水中花 发表于 2016-2-9 22:17:36 浏览:  1978 回复:  0 [显示全部楼层] |只看大图 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
1.事件

   * ready() - 作用是类似于window.onload事件

     * 写法

       * $(document).ready(function(){});

       * $().ready(function(){});

       * $(function(){});


     * readyonload的区别

     * ready具有以下特点:

         * 具有简写形式

                 * 等待DOM节点树的内容加载完毕后,就执行(速度快)

                 * 一个HTML页面允许编写多个ready

          * onload具有以下特点:

         * 没有简写形式

         * 必须等待HTML页面中所有内容都加载完毕后,才执行(速度慢)

         * 一个HTML页面只能编写一个onload

例如:

  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4.   <meta charset="UTF-8">

  5.   <title>onload事件机制</title>

  6.   <script src="jquery-1.11.3.js"></script>

  7.   <script>



  8. $(function(){

  9. console.log($("#user").val());

  10. });

  11.   </script>

  12. </head>

  13. <body>

  14.   <input type="text" id="user" value="小龙女">

  15. </body>

  16. </html>
复制代码
效果:

221526ao8nc2yf76wqzn34.png

   


    *$(function(){})window.onload时间加载对比:

   例如:        

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4.     <meta charset="UTF-8">

  5.     <title>26_加载时间对比</title>

  6.     <script src="jquery-1.11.3.js"></script>

  7. </head>

  8. <script>

  9.     var startTime = new Date().getTime();

  10. $(function(){

  11. var endTime = new Date().getTime();

  12. console.log("ready : "+(endTime-startTime)+"ms");

  13. });

  14. window.onload = function(){

  15. var endTime = new Date().getTime();

  16. console.log("onload : "+(endTime-startTime)+"ms");

  17. }

  18. </script>

  19. <body>

  20. <img src="img/0.jpg" style="width:200px;height:200px;"/>

  21. </body>

  22. </html>
复制代码
效果:

    221526ao8nc2yf76wqzn34.png

结果很明显,jQuery时间加载时间要短。


   * jQuery的特点

     * 链式操作 - jQuery几乎所有方法返回jQuery对象

     * 具有相对完善的处理机制 - 不报错(undefined)

  

回复

使用道具 举报


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版| 赣南网

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4

用微信扫一扫

赣南网