在我们开始学习之前建议大家先去下载JQuery1.3中文参考. 下载地址
http://www.jb51.net/books/17812.html
好了,进入正题. 再次申明JQuery很简单,take easy!
从那开始呢? 最好的切入地方就从 ready 函数开始!
定义
ready(fn);
功能
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。
请确保在 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
通过上面所述,我们可以把ready看做onLoad的替代方法. 这时有的朋友就会问了,有onLoad方法我们干什么还要用ready方法?
我个人的体会及看法是 onLoad缺点是以后维护起来麻烦,到处都是JavaScript代码,很容易出问题的哟! 在<<ppk谈JavaScript>>中,ppk针对这个问题的看法也是如此,尽量不要在标签中直接编写JavaScript 代码.
实例
两种编写方式
一
$(document).ready(function(){alert("Hello World!");});
二
var myFun = function(){alert("Hello World!");}
$(document).ready(myFun);
到这儿我想大家对ready的用法应该是明白了,但对前面的 $(document)应该很迷惑. 这是什么东东?别急... 现在只要记住这段代码的功能就是当整个文档载入完毕后再执行ready内的函数就够了.
看完下面的代码我们就明白了$()的用法.
index.html代码结构如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery测试</title>
<style type="text/css">
.p1 {
background: #ff0000;
}
.p2 {
background: #00ff00;
}
.p3{
background: #0000ff;
}
.myPCss{
font-size:36px;
}
</style>
<script language="javascript" src="jquery-1.3.2.js">
</script>
<script language = "JavaScript" type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("p").addClass("p1");
$("p").removeClass("p1");
$("#myP").addClass("p2");
$(".myPCss").addClass("p3");
$("#myDiv p").addClass("p3");
$("#myDiv>p").addClass("p3");
$("div+p").addClass("p3");
$("div~p").addClass("p3");
var aP = document.getElementById("myP");
$(aP).addClass("p2");
});
//]]>
</script>
</head>
<body>
<p>快购利众网1</p>
<p id="myP">快购利众网2</p>
<p class="myPCss">快购利众网3</p>
<div id="myDiv">
<div id="myDivInner">
<p>快购利众网4</p>
</div>
<div id="myDivTemp">
</div>
<p>快购利众网5</p>
<p>快购利众网6</p>
</div>