$(document).ready(function(){ })
一、
Jquery是优秀的Javascrīpt框架,$是jquery库的申明，它很不稳定（我就常遇上）,换一种稳定的写法jQuery.noConflict();
jQuery(document).ready(function(){});
使用jQuery的好处是它包装了各种浏览器版本对DOM对象(javascript的DOM对象你应该知道吧，就是它了)的操作.
比如jquery写法：
$("div p"); // (1)
$("div.container"); // (2)
$("div #msg"); // (3)
$("table a",context); // (4)
$("#myId"); //(5)
第一行代码得到所有<div>标签下的<p>元素。第二行代码得到class 为container的<div>元素,第三行代码得到<div>标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。第五行代码得到id为myid的所有元素
如果你熟悉CSS，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。
现在回答你的具体问题吧
$(document).ready(function(){
alert("hello");
});(1)
<body onload="alert('hello');">（2）
上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作，即$(document).ready (fn)可以在一个页面中重复出现，而不会冲突。基本上Jquery的很多plugin都是利用这个特性，正因为这个特性，多个plugin共同使用起来，在初始化时不会发生冲突。
如果我们在
$(document).ready(function(){
加入的内容
});
加入内容$(".btn-slide").click(function(){
alert("你单击了a标签中class等于btn-slide的连接");
});
则表示当我们单击class=btn-slide的超级连接时弹出“你单击了a标签中class等于btn-slide的连接”对话框.
如此方便易用，因此使用jquery是一个不错的选择。
二、
页面加载完成后开始运行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.getElementByIdx("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(function() { alert("你好"); }); ``` 或者简写为： ```javascript $(document).ready(function() { alert("你好"); }); ``` **第二种：直接传递函数给jQuery** ```javascript jQuery...
$(document).ready(function() { // 在这里编写你的初始化脚本 }); ``` 在这个例子中，当DOM完全加载时，`function() { ... }`中的代码会被执行。通常，这比`window.onload`事件更早触发，因为它等待的是DOM的加载...
$(document).ready(function(){…. })这个函数是用来取代页面中的[removed]; document.ready()和传统的方法<body onload=”load()”> 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和...
jQuery(document).ready(function(){}); 使用jQuery的好处是它包装了各种浏览器版本对DOM对象(javascript的DOM对象你应该知道吧，就是它了)的操作. 比如jquery写法：$(“div p”); // (1)$(“div.container”); // ...
$(document).ready(function(){ $(".menu ul li ul").hide(); $(".menu>ul>li>a").on('click',function(){ $(".menu>ul>li>a").css('background-image',"url('../image/collapsed.gif')"); $(".menu ul li ul...
$(document).ready(function() { alert("hello"); }); 这行代码将会在页面加载完成后立即显示一个包含“hello”的对话框。它等同于传统的JavaScript写法： ('hello');"> 但在使用JQuery时，我们倾向于将表现和...
$(document).ready(function() { $("#a1").appendTo($("#a2")); }); alert('a1'); <div id="a2"></div> ``` `$("#a1")`被移动到了`$("#a2")`的内部，导致包含在`a1`中的`<script>`标签被再次执行，因此`...
$(document).ready(function () { alert("我的第一个jQuery代码!"); }); ``` 这段代码会在DOM解析完毕后立即显示警告框，用户无需等待所有资源加载完毕。 相比之下，`window.onload`是JavaScript原生的事件，它在...
$(document).ready(function() { // 所有代码将在这里执行，一旦DOM加载完毕 }); ``` - 使用简写形式： ```javascript $(function() { // 同样是在DOM加载完毕后执行 }); ``` #### 4. 优势分析 相较于直接...
在给出的实例代码中，我们有三个不同的`$(document).ready()`声明，每个声明中还包含了嵌套的`$(function() {...})`，这是一个简写的`$(document).ready()`形式。这些嵌套的函数会按照它们的嵌套层次执行，而不是...
3. 使用jQuery的`$.holdReady(true)`和`$.holdReady(false)`组合，来控制`$(document).ready`的执行时机。 4. 如果可能，避免在frame中加载页面，或者确保frame内页面的资源都能正确访问。 理解`$(document).ready...
$(document).ready(function() { // DOM已准备就绪，可以进行操作 }); ``` 上述代码等同于： ```javascript $(function() { // DOM已准备就绪，可以进行操作 }); ``` `$.fn`，全称`jQuery.fn`，实际上是jQuery...
$(document).ready(function () { var $box = $('.box'); $('.metro li').each(function () { var color = $(this).css('backgroundColor'); var content = $(this).html(); $(this).click(function ()...
### 使用JavaScript实现jQuery的`document.ready`功能 在前端开发中，经常需要用到DOM操作，而这些操作往往需要等到整个文档加载完成之后才能进行。在jQuery中，提供了非常方便的`$(document).ready()`方法来帮助...
### $(document).ready(function(){ })函数详解 在前端开发领域，尤其是使用JavaScript及其库进行页面交互设计时，`$(document).ready(function(){ })` 函数是开发者经常接触到的一个重要概念。本文将详细介绍这一...
从给定的文件内容中，我们可以提炼出一些知识点，包括Jquery的$(document).ready()的替代方法、浏览器的DOMContentLoaded事件、以及兼容性处理。 首先，文件中提到的更快的方法实际上是指一种JavaScript的编码实践...