`
tudou721
  • 浏览: 61553 次
  • 性别: Icon_minigender_2
  • 来自: 河南
社区版块
存档分类
最新评论

jquery中$(document).ready()作用

阅读更多

       $(document).ready(),这是学习jQuery首先要明白的jquery语句:如果你想在你的页面应用jQuery,就得在页面中引 用$(document).ready()功能函数。$(document).ready()函数里面的内容将会在整个页面其他内容下载之前预先加载。代 码如下所示:

      $(document).ready(function() { 
          // put all your jQuery goodness in here.
      });
 

$(document).ready()在调用事件方面有非常多的优点,总的来说就是你不必再在HTML中写入任何“行为”标记。有 了$(document).ready(),你可以将所有的JavaScript代码写在一个单独的文件中,这样一来便于管理并和页面内容独立开来,可移 植性大大增强。自此,当我们把鼠标移动到一个超级链接上时,类似于“javascript:void()”之类的信息将不会再在状态栏出现了。
在一些使用了JavaScript语句的页面,通常可以看到body标签中附带了一个onload属性值。问题就在于,使用“onload”属性局限在于 只能使用一个功能函数。甚者,此种方法依然再次在内容上添加了一个“behavioral”标记。Jeremy Keith写的一本非常棒的书 DOM Scripting 给我们展示了如何将导入JavaScript事件函数写在一个单独文件以达到调用多个功能函数的方法。但这种方法有一个最大的缺点就是一些简单的功能却需要写大量的代码。当然,这本书也给了我们另外一种简洁高效的方法,就是使用$(document).ready().
有了$(document).ready(),我们可以在windows加载之前,就预先加载我们想要实现某个功能的代码。这样一来,当你浏览一个运用了jQuery的网站,一打开页面就会看到jQuery效果,没有任何延迟。
下面是一个运用

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
       "http://www.w3.org/TR/html4/strict.dtd">
      <html lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
        <title>your title</title>
        <link rel="stylesheet" type="text/css" href="styles/forms.css"></link>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
          <script src="yourcustomscript.js" type="text/javascript"></script>
      </head>
        <body>
        <!-- the body of your document goes here -->
      </body>
      </html>
 
1
0
分享到:
评论
1 楼 sohighthesky 2010-02-23  
基本无用,更好的方法是把script标签放到body后面

相关推荐

    jQuery(document).ready(function($) { });的几种表示方法

    `jQuery(document).ready()`函数是jQuery中的一个重要概念,它确保了在执行任何JavaScript代码之前,DOM已经完全加载和解析完成。这个特性使得开发者可以在不担心元素未定义的情况下操作DOM。以下是几种常见的表示...

    Jquery中$与$.fn的区别实例.zip

    在jQuery库中,`$`和`$.fn`都是核心组成部分,但它们有着不同的用途和功能。理解这两者的差异对于深入学习和使用jQuery至关重要。本文将详细解释`$`和`$.fn`的区别,并通过实例来帮助你更好地掌握它们。 首先,`$`...

    Jquery中$(document).ready(function(){ })函数的使用详解

    jQuery(document).ready(function(){}); 使用jQuery的好处是它包装了各种浏览器版本对DOM对象(javascript的DOM对象你应该知道吧,就是它了)的操作. 比如jquery写法:$(“div p”); // (1)$(“div.container”); // ...

    jQuery之$(document).ready()使用介绍

    在学习jQuery框架时,了解$(document).ready()函数的作用至关重要。这一函数是管理页面加载顺序和时机的核心部分,它确保了页面的DOM元素完全加载并可被脚本操作之后,才执行包裹在其中的代码。 ### 知识点:jQuery...

    jquery的$(document).ready()和onload的加载顺序

    3. 使用jQuery的`$.holdReady(true)`和`$.holdReady(false)`组合,来控制`$(document).ready`的执行时机。 4. 如果可能,避免在frame中加载页面,或者确保frame内页面的资源都能正确访问。 理解`$(document).ready...

    Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解

    本文着重讲解了在JQuery中使用$(document).ready()函数的详细方法和它的重要性。 在JQuery中,$符号是JQuery库的简写和引用。例如,$()函数等同于jQuery()函数。它为开发者提供了一种方便的方式来选择和操作文档中...

    jquery中的$(document).ready()使用小结

    $(document).ready(function(){…. })这个函数是用来取代页面中的[removed]; document.ready()和传统的方法&lt;body onload=”load()”&gt; 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和...

    jquery.table2excel.js

    $(document).ready(function() { //导出excel $("#output").click(function(){ var myDate = new Date(); $("#example").table2excel({ exclude: ".noExl", name: "Excel Document Name.xlsx", filename: ...

    jquery-1.12.4-jquery.min.js.zip

    2. **事件处理**:jQuery 的事件处理比原生JavaScript更加直观,例如`$(document).ready(function() { ... })`用于页面加载完成后执行代码,`$("button").click(function() { ... })`用于监听按钮点击事件。 3. **...

    $(document).ready(function() {})不执行初始化脚本

    在网页开发中,JavaScript 的 `$(document).ready()` 函数是一个非常重要的工具,它确保了在DOM(文档对象模型)完全加载并准备就绪后,才会执行包裹在其内的代码块。这有助于避免由于元素未加载而导致的错误,尤其...

    JQuery 引发两次$(document.ready)事件

    在JavaScript和jQuery编程中,`$(document).ready`是一个常用的方法,用于确保DOM(文档对象模型)加载完毕后执行特定的函数。然而,有时我们可能会遇到`$(document).ready`被触发两次的情况,这通常会导致代码执行...

    JQuery下关于$.Ready()的分析

    $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload事件...

    比Jquery的document.ready更快的方法

    从给定的文件内容中,我们可以提炼出一些知识点,包括Jquery的$(document).ready()的替代方法、浏览器的DOMContentLoaded事件、以及兼容性处理。 首先,文件中提到的更快的方法实际上是指一种JavaScript的编码实践...

    Jquery.Messager弹出消息插件

    $(document).ready(function() { $.messager.defaults = { showType: 'slide', // 动画效果,如淡入、滑动等 timeout: 3000, // 消息显示后自动关闭的毫秒数 draggable: true // 是否可拖动 }; }); ``` 2. ...

    jquery.lineline.js插件自定义生成代码行号特效.zip

    在这个例子中,`id="code-block"`用于指定jQuery.lineline.js将作用的元素,`class="language-javascript"`则是根据Prism.js或其他代码高亮库进行语法高亮。 然后,在页面加载完成后,通过JavaScript来初始化jQuery...

    jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】

    - `$(document).ready(function() {...})`:页面加载完成时执行的函数。 - `$(element).on('event', function() {...})`:动态绑定事件,支持多种事件类型。 5. **动画效果** - `$(element).fadeIn()`/`.fadeOut...

    用javascript实现jquery的document.ready功能的实现代码

    在jQuery中,提供了非常方便的`$(document).ready()`方法来帮助开发者实现这一目标。本文将详细介绍如何使用原生JavaScript来模拟实现jQuery中的`document.ready`功能。 ### 一、理解`document.ready` 在网页加载...

    jquery操作菜单

    $(document).ready(function(){ $(".menu ul li ul").hide(); $(".menu&gt;ul&gt;li&gt;a").on('click',function(){ $(".menu&gt;ul&gt;li&gt;a").css('background-image',"url('../image/collapsed.gif')"); $(".menu ul li ul...

Global site tag (gtag.js) - Google Analytics