$(document).ready(function() 总结以及和window.onload的区别

转载：http://www.cnblogs.com/MikeChen/articles/1795526.html

页面加载完成后开始运行do stuff when DOM is ready　中的语句!
　　　 $(document).ready(function() {
       // do stuff when DOM is ready
       });

　　　选择器
　　　$(“a”)是一个jquery的选择器（selector）
　　　$("")其中的字段就是元素的标记。比如$("div")就是<div></div>
　　　click是函数对象的一个方法。方法为点击鼠标事件！
     例：
     $(document).ready(function() {
     $("a").click(function() {
        alert("Hello world!");
         });
       });

　　　$("div").click $("div")就是页面中所有的 div标签 这句话就是给所有的标签为div的元素 绑定了一个click事件 即当所有div 被鼠标单　　　　 击的时候 执行 alert("Hello World!");

　　　选择器(selector)和事件(events)
　　　选择DOM元素
　　　选择一个ID为orderedlist的元素,相当于javascript中的document.getElementById("orderedlist"),jquery中只需要$("#id")其中的id为元素的ID,元素为任意元素！addClass为把这个元素的css的class改为red
　　　$(document).ready(function() {
　 　　$("#orderedlist").addClass("red");
　　　});

       $("#id > xx") 这种表示ID的元素下的所有元素标记为xx的元素设置CSS的Class, id为元素的id xx为元素的标记例<div><li><a>等！
      $(document).ready(function() {
         $("#orderedlist > li").addClass("blue");
        });

$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
       $("#form")[0].reset();
});
});



这个代码只是ID为form的表单执行reset()方法。但是万一你有很多个表单需要执行呢？那么你可以这样写：
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
       $("form").each(function() {
         this.reset();
       });
});
});

另外一个你必须面对的问题是选择某个或某几个元素。Jquery提供了filter()和not()方法。当filter()是过滤一些适合filter()表达式元素，而not()是删除和not()表达式相反的元素。当你想选择所有的li元素，并且不包含ul子元素呢？你可以这样写：
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});

find(expr) 在匹配的对象中继续查找符合表达式的对象
<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>

Query代码及功能：
function jq(){
    alert($("p").find("#a").html())
}
在$("p")对象中查找id为a的对象

存疑：

结果是除了包含ul子元素的li，其他所有的li都得到了一个border.可能你也想选择有name属性的anchor(<a>)：
$(document).ready(function() {
$("a[@name]").background("#eee");
});



要匹配属性的值（value），我们可以用”*=”来代替”=”
$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
       // do something with all links that point somewhere to /content/gallery
});
});



直到现在，我们已经学到了很多选择器的使用。这里还有种情况你需要选择前一个或后一个元素。想一想starterkit.htm里的FAQ，当你click问题的时候，它是怎么实现隐藏和显示的呢？代码是这样的：
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
      var answer = $(this).next();
      if (answer.is(':visible')) {
         answer.slideUp();
      } else {
         answer.slideDown();
      }
    });
});



因为上面只有唯一一个选择器（#faq）,我们用chain来减少代码的长度和提高代码的易读性和表现性.这里要说明一下，如果按原文翻译过来我想很多人都看不懂，感觉他自己也没怎么说明白。我说说我自己的理解：
‘dd’和‘dt’都是#faq的子元素，find()的作用就是找到它的子元素。End()应该和next()搭配的，end()实质上是把 ‘dd’过滤了，也就是next()的时候实质上是参考的’dt’。这样每个’dt’的next就是‘dd’，挺容易实现的。要是还不明白你可以边参考边照着做一遍。

除了同属元素外，我们也可以选择父元素：
$(document).ready(function() {
$("a").hover(function() {
       $(this).parents("p").addClass("highlight");
}, function() {
       $(this).parents("p").removeClass("highlight");
});
});


很容易看懂，p就是a的父元素。

 

(document)意思是说，获取整个网页文档对象（类似的于window.document），$(document).ready意思就是说，获取文档对象就绪的时候。

$(document).ready(function() {
// do stuff when DOM is ready//当文档载入后从此处开始执行代码
});

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。
-
1.执行时间 


window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 


2.编写个数不同 


window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 
$(document).ready()可以同时编写多个，并且都可以得到执行 


3.简化写法 


window.onload没有简化写法 
$(document).ready(function(){})可以简写成$(function(){}); 






 以 浏览器装载文档为例，在页面加载完毕后，浏览器会通过 Javascript 为 DOM 元素添加事件。在常规的 Javascript 代码中，通常使用 window.onload 方法，而在 Jquery 中，使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模块中最重要一个函数，可以极大的提高 Web 应用程序的速度。


window.load $(document).ready() 
执行时机 必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行 网页中所有 DOM 结构绘制完毕后就执行，可以能 DOM 元素关联的内容并没有加载完 
编写个数 不能同时编写多个 
以下代码无法正确执行： 
window.onload = function(){ 
alert(“text1”); 
}; 
window.onload = function(){ 
alert(“text2”); 
}; 
结果只输出第二个 能同时编写多个 
以下代码正确执行： 
$(document).ready(function(){ 
alert(“Hello World”); 
}); 
$(document).ready(function(){ 
alert(“Hello again”); 
}); 
结果两次都输出 
简化写法 无 $(function(){ 
// do something 
}); 


另外，需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 ---load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象，则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。 
Jquery 代码如下： 
$(window).load(function (){ 
// 编写代码 
});等价于 JavaScript 中的以下代码 
Window.onload = function (){ 
// 编写代码 
}


——————————————————————————————


最近在改一个嵌入在frame中的页面的时候，使用了jquery做效果，而页面本身也绑定了onload事件。改完后，Firefox下测试正常流畅，IE下就要等个十几秒jquery的效果才出现，黄花菜都凉了。 


　　起初以为是和本身onload加载的方法冲突。网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行，而onload事件是在所有资源都准备完成之后才执行，也就是说$(document).ready()是要在onload之前执行的，尤其当页面图片较大较多的时候，这个时间差可能更大。可是我这页面分明是图片都显示出来十几秒了，还不见jquery的效果出来。 


　　删了onload加载的方法试试，结果还是一样，看来没有必要把原本的onload事件绑定也改用$(document).ready()来写。那是什么原因使得Firefox正常而IE就能呢？接着调试，发现IE下原来绑定的onload方法竟然先于$(document).ready()的内容执行，而Firefox则是先执行$(document).ready()的内容，再执行原来的onload方法。这个和网上的说法似乎不完全一致啊，呵呵，有点意思，好像越来越接近真相了。 


　　翻翻jquery的源码看看$(document).ready()是如何实现的吧： 


复制代码 代码如下:
if ( jQuery.browser.msie && window == top ) (function(){ 
if (jQuery.isReady) return; 
try { 
document.documentElement.doScroll("left"); 
} catch( error ) { 
　　　　　　setTimeout( arguments.callee, 0 ); 
　　　　　　 return; 
　　　　} 
　　 // and execute any waiting functions 
　　　jQuery.ready(); 
})(); 
jQuery.event.add( window, "load", jQuery.ready ); 


结果很明了了，IE只有在页面不是嵌入frame中的情况下才和Firefox等一样，先执行$(document).ready()的内容，再执行原来的onload方法。对于嵌入frame中的页面，也只是绑定在load事件上执行，所以自然是在原来的onload绑定的方法执行之后才轮到。而这个页面中正好在测试环境下有一个访问不到的资源，那十几秒的延迟正是它放大出的时间差。 


您可能感兴趣的文章:
jquery中的$(document).ready()与window.onload的区别
js window.onload 加载多个函数的方法
window.onload 加载完毕的问题及解决方案（下）
window.onload 加载完毕的问题及解决方案（上）
window.onload的页面加载技巧
jquery加载页面的方法(页面加载完成就执行)


详细出处参考：http://www.jb51.net/article/21628.htm