JQuery Tips相关(1)----关于$.Ready()_jquery

 最近一直在研究JQuery,这个东西还是很博大精深的.下面分享一下我的学习总结.

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法

     接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里.

     对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:

1.加载多个函数的问题

<body onload="a();b();">

</body>

     在Onload事件中只能这样加载,很丑陋…而在JQuery中你可以利用多个JQuery.Ready()方法,它们会按次序依次执行

2.代码和内容不分离
    这个貌似不用说了,让人深恶痛绝-.-!!

3.执行先后顺序不同
    对于Body.Onload事件,是在加载完所有页面内容才会触发,我的意思是所有内容,包括图片,flash等.如果页面的这些内容很多会让用户等待很长时间.

    而对于$(document).ready()方法,这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.

    但是对于一些特殊应用,比如图片的放大缩小,图片的剪裁。需要网页所有的内容加载完毕后才执行的呢?我推荐使用$(window).load()方法,这个方法会等到页面所有内容加载完毕后才会触发,并且同时又没有OnLoad事件的弊端.

  <script type="text/javascript">
    $(window).load(function() {
      alert("hello");
    });
    $(window).load(function() {
      alert("hello again");
    });
  </script>

    上面的代码会在页面所有内容加载完成后按先后顺序依次执行.

  当然不要忘了与之对应的Unload方法

$(window).unload(function() {
      alert("good bye");
    });

  上面代码会在页面关闭时引发.

在所有DOM加载之前引发JS代码
这个方法是我在调试的时候最喜欢的,有时候开发的时候也用这种方法

<body>
  <script type="text/javascript">
    (function() {
      alert("hi");
    })(jQuery)
  </script>
</body>

对,就是利用js闭包的形式将js代码嵌入body,这段代码会自动执行,当然也可以直接嵌入js代码,这种方式要注意顺序问题,如下:

<body>
<div id="test">this is the content</div>
  <script type="text/javascript">

    alert($("#test").html());//I Can display the content

  </script>
</body>
<body>

  <script type="text/javascript">

    alert($("#test").html());//I Can't display the content

  </script>
  <div id="test">this is the content</div>
</body>

上面两段代码,第二段代码当中因为只能解释到当前代码之前的DOM,而test并不存在于已经解析的DOM数.所以第二段代码无法正确显示.

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, tips
ready()
jquery tips、jquery tips 插件、jquery tips提示、jquery.tips.js、jquery.tips.js 用法,以便于您获取更多的相关知识。

时间: 2024-11-01 04:07:30

JQuery Tips相关(1)----关于$.Ready()_jquery的相关文章

关于锚点跳转及jQuery下相关操作与插件_jquery

一.锚点跳转简介 锚点嘛,业余点的解释就是可以让页面定位到某个位置的点.在高度较高的页面中经常见到,例如,百度百科页面,<火影忍者>这个词条,结果就会看到如下的锚点列表: 点击其中一个链接,就会跳转到页面的相应位置.这就是锚点的作用之一.锚点还可以用在跳转到其他页面的相应位置,例如我的博客,点击博客首页文章下面的评论链接,则会跳转到文章的评论处. 起关键作用的就是链接地址后面跟着的#comments,见下图标示: 我知道的实现锚点跳转有两种方式,一种是a标签+name属性,还有一种就是使用标签

jQuery中noConflict()用法实例分析_jquery

本文实例讲述了jQuery中noConflict()用法.分享给大家供大家参考.具体分析如下: jQuery默认使用"$"操作符,$ 符号只是 window.jQuery 对象的一个引用,jQuery.noConflict() ,这个函数将变量$的控制权让渡给第一个实现它的那个库.这有助于确保jQuery不会与其他库的$对象发生冲突.在运行这个函数后,就只能使用jQuery变量访问jQuery对象.例如,在要用到$("div p")的地方,就必须换成jQuery(&

jQuery中:not选择器用法实例_jquery

本文实例讲述了jQuery中not选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够移除元素集合中与给定选择器匹配的元素. 语法结构: 复制代码 代码如下: $(":not(selector)") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等.例如: 复制代码 代码如下: $("li:not(.second)").css("color","green") 以上代码是将li元素集合中,类名不为s

jQuery基础知识点总结(必看)_jquery

jQuery是一个优秀的.轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),而jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择. 1.jQuery入口函数与

jQuery unbind()方法实例详解_jquery

本文实例讲述了jQuery unbind()方法使用方法.分享给大家供大家参考,具体如下: jQuery 中的 unbind() 方法是 bind() 方法的反向操作,从每一个匹配的元素中删除绑定的事件. 语法结构: 复制代码 代码如下: unbind([type][, data]); type是事件类型,data为将要移除的事件.具体说明如下: 1.如果没有参数,则删除所有的绑定事件: 2.如果提供了事件类型(type)作为参数,则只删除该类型的绑定事件: 3.如果把在绑定时传递的处理函数作为

jquery遍历函数siblings()用法实例_jquery

本文实例讲述了jquery遍历函数siblings()用法.分享给大家供大家参考,具体如下: siblings([expr]) 得到所有匹配元素集合中各个元素的所有兄弟元素集合.返回匹配元素集合 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &l

jQuery入门基础知识学习指南_jquery

打开一个网页,如果 HTML 没有完全加载完毕,就去操作页面中元素是不安全的,但是监测 HTML 是否加载完毕呢?jQuery 提供了一个 $(document).ready() 方法,任何 ready 中的代码在 HTML 完全加载完成后才会被执行. $(document).ready(function() { console.log('ready!'); }); 此外,它还有一个简写方式 $(function() { console.log('ready!'); }); $(document

jquery中.add()的使用分析_jquery

add() 将元素添加到匹配元素的集合中.这是jquery参考手册上的表述.但其提供的例子链接错误,因此没有对add()的实例说明.这里就提供几个例子,以便更好的掌握add()的用法. 例一 复制代码 代码如下: <!DOCTYPE html><html><head><style>div { width:60px; height:60px; margin:10px; float:left; }p { clear:left; font-weight:bold;

jquery的相关内容:jquery的简单分析

文章简介:jquery原理的简单分析,扒开jquery的小外套. 引言 最近LZ还在消化系统原理的第三章,因此这部分内容LZ打算再沉淀一下再写.本次笔者和各位来讨论一点前端的内容,其实有关jquery,在很久之前,LZ就写过一篇简单的源码分析.只不过当时刚开始写博客,写的相对来讲比较随意,直接就把源码给贴上来了,尽管加了很多注释,但还是会略显粗糙. 这次LZ再次执笔,准备稍微规范一点的探讨一下jquery的相关内容. jquery的外衣 jquery是一个轻量级的JS框架,这点相信大部分人都听过