这是精心为jQuery初学者整理的106个实例代码集下（xià）载，精心为jQuery初学者整理的106个实例代码集（jí），包括了各种功能（néng）的使用，非常适合（hé）初学者。
精心为（wéi）jQuery初学（xué）者（zhě）整理的106个实例代码集是由最火软件（jiàn）（原烈火网）为您精（jīng）心（xīn）整理的106个jQuery入门实例代（dài）码合集（jí），共（gòng）有三（sān）季（jì）。其（qí）中一些代码已经在文章（zhāng）教程发表过。
0，jQ的关键程序：
程序代码
window.onload = function(){ ... } .
访问HTML文档的元素，必须先载入文档对象模型(DOM)。当window.onload函数执行的时候，说（shuō）明（míng）所有东（dōng）西（xī）已（yǐ）经载入，包（bāo）括图（tú）像和横（héng）幅等等。要知道较大的图片下载速度（dù）会比（bǐ）较（jiào）慢，因此用（yòng）户必须（xū）等（děng）待大图片（piàn）下（xià）载完毕才能（néng）看到（dào）window.onload()执行（háng）的（de）代码效（xiào）果（guǒ），这样（yàng）就花费了很长的等待时间，这不（bú）是我（wǒ）们（men）想要的。
对于此，jquery提供了一个（gè）"ready"事件，你可以（yǐ）使用以下的代（dài）码片段（duàn）：
demo0:
程序代码
$(document).ready(function(){
// 你的代码
});
$(document)意思（sī）是说，获取整个网页（yè）文档对象（xiàng）（类（lèi）似的于（yú）window.document），$(document).ready意思就是说，获取文（wén）档对象就绪的时候。
上面这段代码的意思是检查文档对（duì）象直（zhí）到它能（néng）够允许被操作（译（yì）者（zhě）注（zhù）：这样做比（bǐ）window.onload()函数要快的多，因为只要文档对象载入完成就（jiù）能（néng）够执行（háng）代码了，而（ér）不（bú）需要（yào）等待页面（miàn）中的图片下载是否已（yǐ）经完（wán）成）---这是我（wǒ）们想（xiǎng）要的。
好了 ，其他的（de）也不多说（shuō）了，我们开始来用jQ写几（jǐ）个简单的例子。
1，demo1:
鼠标点击时的（de）触发
首先，我们尝试鼠标点击超链接时（shí）触发某些行为。在ready函数里（lǐ）加入以下（xià）代码：
程序代码
$("p").click(function(){
alert("hello world");
});
2，demo2:
增加 CSS Class
另外一个事情（qíng）就是，一个（gè）共同（tóng）的任务：增加或移除（chú）元素的css class，例如:
程序（xù）代（dài）码
$("a").addClass("test");
$("a").removeClass("test");
那么当你调用了（le）addClass函数后，所有超链（liàn）接（jiē）的字（zì）体将（jiāng）变成粗体。
3，demo3:
show( )和（hé）html()的（de）使用
$("a").addClass("test").show().html("foo");
程（chéng）序（xù）解释：
首先增加样（yàng）式，
然后
show( ):显示（shì）隐（yǐn）藏的匹配（pèi）元素。
html("foo"):设置每一个匹配（pèi）元（yuán）素的（de）html内容
4，demo4:
特效hide（）
$("a").click(function(){
$(this).hide("slow");
return false;
});
程序解释（shì）：
点击超链接，超（chāo）链接就会慢慢的消失。
“return false"表示保留默（mò）认行（háng）为，因此页（yè）面不会跳（tiào）转（zhuǎn）。
5，demo5:
demo5-收缩（suō）展（zhǎn）开功能
$("#head").click(function()
{$("#content").slideToggle("slow"，function(){ alert("Hello，cssrain..");});
});
程（chéng）序解释：
1，首先把JQ导入.
2，然后开始写函数了（le）。$(document).ready(function(){});
3，前面说过了，获取标（biāo）签能直接（jiē） $("标签（qiān）")。给（gěi）标签注册（cè） onclick事件直接可以 click.
4，核心代码:
$("head").click(function(){$("content").slideToggle("slow");});
5，slideToggle(speed， callback)
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触（chù）发一（yī）个回调函数。
这个动画效果只调整元素的高度（dù），可以（yǐ）使匹配的（de）元（yuán）素以“滑动”的方式隐（yǐn）藏（cáng）或显示。
6，demo6:
appendTo的用法
{$("#head2").click(function()
{$("<input type='text' name='ddd' id='ddd' value='hello，cssrain..' ><br>").appendTo("#ccc");});}
<input type="button" name="head2" id="head2" value="appendTo" >
<div name="ccc" id="ccc" >看这里的变化</div>
程序解（jiě）释：
appendTo():
把所有匹配的元素追（zhuī）加到（dào）另一个、指定的元素元素集合中（zhōng）
7， demo7:
表格隔行变（biàn）色， 鼠标（biāo）滑过（guò）变色，点击变色.
代码解释：
例子中我已经把 解（jiě）释放上去了（le），这里就不（bú）再贴注（zhù）释了。
例子中用了：mouseover（），addClass（），mouseout（），removeClass（），click（），
toggleClass（），tr:even 等方法（fǎ）。
另外解释了toggle()和toggleClass（）的区（qū）别（bié）。
另外这个例子 我用了 链式操作 .可（kě）以查看 链式操（cāo）作（zuò）.txt 里（lǐ）面有解释。
8，demo8:
toggle( )的（de）用法：
$("p").toggle()
切换元素的可见状态。
如果元素是可见的，切换为隐（yǐn）藏的；如果元素是隐（yǐn）藏的，切（qiē）换（huàn）为（wéi）可见的。
9，demo9:
hover()的用（yòng）法：
Hover(function over ，function out )
一（yī）个模仿悬（xuán）停事件（鼠标移动（dòng）到一个对象上面及移出这个（gè）对象）的（de）方法.
Table里也可以用。
10，demo10:
忘记（jì）说了
其实（shí）$(document).ready(function(){
// 你的代码
});
中（zhōng）的$ 也（yě）可以用 jQuery代替
jQuery(document).ready(function(){
jQuery(".").click(function(){jQuery(this).toggleClass("")})
});
代替有什么（me）好处（chù）呢？ 有（yǒu）可（kě）能你会用其（qí）他的js库，象prototype也是$， 有可能会冲突（tū）。
所以（yǐ）用jQuery代替$是比较安全的写法。
还有就（jiù）是：
$(document).ready(function(){
//
}); 的缩写法：
$(
function() {
//
}
);
11，demo11:
each—find的用法（fǎ）
$("#orderedlist").find("li").each(function(i) {})
each( Function 函数（shù） fn要执行的（de）函数 )以每一个匹配的元素作为上下文（wén）来执行一个函数（shù）
12，demo12:
parents()的用法：
$(this).parents("p").addClass("highlight");
parents( String expr )
取得一个包（bāo）含着所（suǒ）有匹（pǐ）配元素的唯（wéi）一祖先元素的元素集（jí）合（不包含根（gēn）元素）。
13，demo13:
load()的用法（fǎ）：
$("#feeds").load("FAQ1.html"，function() { alert("load is done");}
<div id="feeds"></div>
从远（yuǎn）程的一个文件（jiàn）中载入HTML并且将它（tā）注入到DOM中
14，demo14:
next的用法:
$("p").next().html()
取得一个包含匹配（pèi）的元素集合中每一个元素紧邻的后面同辈元素的（de）元素集合。
这个函数只返回后（hòu）面那（nà）个（gè）紧邻的同辈元（yuán）素，而不是后（hòu）面（miàn）所有的（de）同（tóng）辈元素（sù）。
可以用一个可（kě）选的表达式进行筛选。
15，demo15:
demo1-鼠标点击（jī）时的触发.html
demo2-1-增加 CSS Class.html<br /demo3-show( )和html().html
demo4-特效（xiào）(hide).html
demo5-收缩展开功（gōng）能（néng）.html
demo6-appendTo的用法.html
demo8-1-toggle( )的用法（fǎ）.html
demo9-1-hover()的用（yòng）法.html
demo10-可以用jQuery代替$.怕（pà）冲突.html
demo11-each--find.html
demo12-1-parents()的（de）用法.html
demo12-2-parents()的（de）用法.html
demo13-load()的用法.html
demo14-next的用法（fǎ）.html
jQ学习第（dì）二（èr）季
介绍略
jQ学习第三季
介（jiè）绍略
