本文给网页设计师以及新手提供了10个简易的教程，以帮助他们使用jQuery来实现Javascript效果。假如你不知道jQuery的话，我这 里稍稍做一个简单介绍。它是一个“编写简单，功能强大”（write less, do more）的Javascipt库。它提供许多Ajax和Javascript功能，你可以用它来增强用户体验，以及让代码更易阅读。因为这些教程主要关 注以jQuery，所以在CSS细节上我不会做过多纠缠。
注意：本文所使用的jQuery版本是1.2.3
JQUERY的工作原理。
首先，你需要下载一份jQuery， 然后将它添加到你的html页面中（最好是在<head>标签内）。然后你需要写一些函数告诉jQuery该做什么。下面这张图详细解释了 jQuery的工作原理。
如果获取页面元素？
编写jQuery函数比较简单（这要感谢jQuery完善的文档）。学习jQuery的关键点就 在于对你需要添加效果的页面元素进行定位。
- $(“#header”)等同于获取id为header的页面元素
- $(“h3″)等同于获取所<h3>的页面元素。
- $(“div#content .photo”)等同于获取所有嵌套在 <div id=”content”>中，class为“photo”的元素
- $(“ul li”) 等同于获取所有嵌套在<ul中的 <li> 元素
- $(“ul li:first”)等于获取<ul>元素内第一个节点的<li> 元素。
1. 简易下拉面板
首先，让我们来学习制作一个简易的下拉面板。你可能已经见过许多下拉面板，在上面你只需要点击链接，页面就会出现一个下拉面板。（看实例效果）
当点击一个带有class=”btn-slide”的元素时，jQuery就会对 <div id=”panel”> 元素进行展收操作（slideToggle）（展开或者收起），并且给<a class=”btn-slide”>元素添加一个class=”active”的属性。然后.active的class就会改变箭头的背景位置 （通过CSS实现）
$(“.btn-slide”).click(function(){
$(“#panel”).slideToggle(“slow”);
$(this).toggleClass(“active”);
});
});
2. 简单的消失效果
这个例子向你演示当用户点击图片按钮时，如何让某些元素消失。（查看实例效果）
当点击<img>时，jQuery会首先寻找 <div class=”pane”>的父元素，然后用缓慢的速度将父元素opacity设置为透明效果，达到隐藏效果
$(document).ready(function(){
$(“.pane .delete”).click(function(){
$(this).parents(“.pane”).animate({ opacity: “hide” }, “slow”);
});
});
3 连续转变效果
现在让我们见识见识jQuery的连锁转变（chainability）的能力。只需用几行代码，我就可以让方框到处乱飞，而且带有缩放和淡出的效 果。（查看实例效果）
第1行：当用户点击<a>
第2行：将<div id=”box”>的 opacity值动态改变到0.1，然后left属性改变到400px，整个动画时间为1200（毫秒）
第3行：然后慢速将<div id=”box”>的opacity改变到0.4, top改变到160px, height改变到20, width改变到20,
第4行：然后慢速将该元素的效果过度到 opacity=1, left=0, height=100, width=100,
第5行：将其效果过度到 opacity=1, left=0, height=100, width=100。
第6行：接下来快速将该元素的top设置为0（归位）
第7行：将该元素向上滑动隐藏
第8行：将该元素向下滑动显示，速度为慢速
第9行：返回false，防止浏览器跳到链接的锚记位置（link anchor）
$(document).ready(function(){
$(“.run”).click(function(){
$(“#box”).animate({opacity: “0.1″, left: “+=400″}, 1200)
.animate({opacity: “0.4″, top: “+=160″, height: “20″, width: “20″}, “slow”)
.animate({opacity: “1″, left: “0″, height: “100″, width: “100″}, “slow”)
.animate({top: “0″}, “fast”)
.slideUp()
.slideDown(“slow”)
return false;
});
});
4A.手风琴式的折叠面板#1
下面是手风琴式的折叠面板（accordion）实例。（查看实例效果）
第一行代码会为<div> 元素中的第一个<H3>元素添加一个active的class（这个active的class会改变箭头图标的背景位置）。第二行会隐 藏<div>中除第一外的所有<p>元素。当<h3> 元素被人点击时，他会将下一个<P>元素下拉显示，然后收起所有兄弟节点的内容，接着添加属性class=“active” 。
$(document).ready(function(){
$(“.accordion h3:first”).addClass(“active”);
$(“.accordion p:not(:first)”).hide();
$(“.accordion h3″).click(function(){
$(this).next(“p”).slideToggle(“slow”)
.siblings(“p:visible”).slideUp(“slow”);
$(this).toggleClass(“active”);
$(this).siblings(“h3″).removeClass(“active”);
});
});
4B. 手风琴式的折叠面板#2
本例与上个例子非常类似，但是你可以指定哪个面板下面的内容是默认显示的。（查看实例效果）。
在CSS样式表中，将.accordion p设置为display:none。现在假设你想页面载入时，默认打开第三个面板的内容。你可以写成 $(“.accordion2 p”).eq(2).show()，注意这里标数是从0开始的。
$(document).ready(function(){
$(“.accordion2 h3″).eq(2).addClass(“active”);
$(“.accordion2 p”).eq(2).show();
$(“.accordion2 h3″).click(function(){
$(this).next(“p”).slideToggle(“slow”)
.siblings(“p:visible”).slideUp(“slow”);
$(this).toggleClass(“active”);
$(this).siblings(“h3″).removeClass(“active”);
});
});
5A.动画悬停效果#1
这里这个例子将会教你制作一个带有淡出和淡入效果的鼠标悬停效果。（查看例子实际效果）
当鼠标悬停的在菜单链接之上时，他会找到下一个<em>元素，然后对opacity和top位置进行动画效果处理。
$(document).ready(function(){
$(“.menu a”).hover(function() {
$(this).next(“em”).animate({opacity: “show”, top: “-75″}, “slow”);
}, function() {
$(this).next(“em”).animate({opacity: “hide”, top: “-85″}, “fast”);
});
});
5B. 动画悬停效果#2
这个例子将会获取菜单链接的标题属性，并将其保存在一个变量中，然后将它添加到<em>标签中。（查看实例效果）
第一行代码将会给菜单的<a>元素后面附加一个空的<em>元素。
当鼠标悬停在链接上时，程序会获取链接的标题属性，然后将其保存到在变量”hoverText”中，接着将 <em>文本内容设置成hoverText’变量中的值。
$(document).ready(function(){
$(“.menu2 a”).append(“<em></em>”);
$(“.menu2 a”).hover(function() {
$(this).find(“em”).animate({opacity: “show”, top: “-75″}, “slow”);
var hoverText = $(this).attr(“title”);
$(this).find(“em”).text(hoverText);
}, function() {
$(this).find(“em”).animate({opacity: “hide”, top: “-85″}, “fast”);
});
});
6.让整个元素块可以点击
这里这个例子将教你如何让整个块元素都可以点击，实现这个页面中侧边栏标签的效果。（查看实例效果）
假设你有一个<ul>的列表，其class为”pane-list”，现在你想让嵌套在其中的所有<li>可以点击（整个 元素块），你可以设置给 “.pane-list li”设置一个点击函数。当它点击是，这个函数会寻找<a>元素，然后将浏览器转跳到链接 href 属性所对应的地址。
$(document).ready(function(){
$(“.pane-list li”).click(function(){
window.location=$(this).find(“a”).attr(“href”); return false;
});
});
7. 可折叠的面板
让我们结合之前几个例子的技巧，然后制作一个可折叠的面板（类似Gmail收件箱的面板）。注意，我用到了本网站留言列表和 Next2Friends信息收件 箱中所用到的同一技巧。（演示实例）
第1行：将<div>中的所有元素隐藏，第一个除外
第2行：将第五个后面的所有<li>元素隐藏
第3部分：当用户点击 <p> 时，对下一个<div class=”message_body”>进行下拉显示操作。
第4部分：<a>点击是，将所有<div class=”message_body”>元素折叠起来。
第5部分：当<a>，显示<a class=”show_recent_only”>，以及将第五个<li>元素后面的所有元素下来显示出来。
第6部分：当点击<a>，隐藏被元素，然后显示<a class=”show_all_message”>，并将第5个<li>后面的所有<li>元素折叠隐藏起来。
$(document).ready(function(){
//hide message_body after the first one
$(“.message_list .message_body:gt(0)”).hide();
//hide message li after the 5th
$(“.message_list li:gt(4)”).hide();
//toggle message_body
$(“.message_head”).click(function(){
$(this).next(“.message_body”).slideToggle(500)
return false;
});
//collapse all messages
$(“.collpase_all_message”).click(function(){
$(“.message_body”).slideUp(500)
return false;
});
//show all messages
$(“.show_all_message”).click(function(){
$(this).hide()
$(“.show_recent_only”).show()
$(“.message_list li:gt(4)”).slideDown()
return false;
});
//show recent messages only
$(“.show_recent_only”).click(function(){
$(this).hide()
$(“.show_all_message”).show()
$(“.message_list li:gt(4)”).slideUp()
return false;
});
});
8. 模仿WORDPRESS后台评论管理中的效果
我想你们大多数人已经见过WordPress后台Ajax的评论管理。现在让我们用jQuery来模仿这个效果。为了动态改变背景颜色，你需要包含 颜色动画插件（Color Animations）。查看实例
第一行：给偶数节点位置的<div class=”pane”>的元素添加“alt”class（，给其他所有<div>分配灰色的背景）
第二部分：当用户点击<a>时，弹出警告信息，然后对<div class=”pane”>的背景颜色和透明度设置动画效果。
第三部分：当点击<a> 后，首先让<div class=”pane”>元素的背景颜色动态转变成黄色，然后是白色，接着，添加spam class
第四部分：当点击<a> 是，首先将<div> 背景颜色动态过度到绿色，然后是白色，接着移除“spam” class
第五部分：当点击<a>，将背景颜色设置动态过度到红色，并将opacity设置为hide
//don’t forget to include the Color Animations plugin
//<script type=”text/javascript” src=”jquery.color.js”></script>
$(document).ready(function(){
$(“.pane:even”).addClass(“alt”);
$(“.pane .btn-delete”).click(function(){
alert(“This comment will be deleted!”);
$(this).parents(“.pane”).animate({ backgroundColor: “#fbc7c7″ }, “fast”)
.animate({ opacity: “hide” }, “slow”)
return false;
});
$(“.pane .btn-unapprove”).click(function(){
$(this).parents(“.pane”).animate({ backgroundColor: “#fff568″ }, “fast”)
.animate({ backgroundColor: “#ffffff” }, “slow”)
.addClass(“spam”)
return false;
});
$(“.pane .btn-approve”).click(function(){
$(this).parents(“.pane”).animate({ backgroundColor: “#dafda5″ }, “fast”)
.animate({ backgroundColor: “#ffffff” }, “slow”)
.removeClass(“spam”)
return false;
});
$(“.pane .btn-spam”).click(function(){
$(this).parents(“.pane”).animate({ backgroundColor: “#fbc7c7″ }, “fast”)
.animate({ opacity: “hide” }, “slow”)
return false;
});
});
9. 图片导航的显示。
假设你有一组作品，你想不用转跳到另外一个页面就可以显示多个图片，你可以将JPG图片载入到目标元素中去。（查看实例效果）
首先给H2添加一个空的<em>元素。
当点击<p> 中的链接
将链接的href属性保存到 “largePath”变量中。
然后将标题属性保存到”largeAlt”变量中
将<img id=”largeImg”> 的scr属性用变量 “largePath”替代，而alt属性用变量”largeAlt”替代
将em（在h2中）的内容设置成变量largeAlt的值。
$(document).ready(function(){
$(“h2″).append(‘<em></em>’)
$(“.thumbs a”).click(function(){
var largePath = $(this).attr(“href”);
var largeAlt = $(this).attr(“title”);
$(“#largeImg”).attr({ src: largePath, alt: largeAlt });
$(“h2 em”).html(” (” + largeAlt + “)”); return false;
});
});
10.为不同的链接类型设置样式
当今多数浏览器，对链接设置样式很简单。比如我们要对一个PDF文件的链接设置样式，我们只需使用后面这个CSS规则即可a[href $='.pdf'] { … }。不幸的是IE6不支持。（这里有多了一个仇视IE6的理由）。你可以使用jQUery解决这个问题。（查看实例效果）
前三行代码非常直观。他们只是根据herf属性来给<a>元素添加对应的CSS的class。
第二部分获取所有href属性中不包含”http://www.webdesignerwall.com”或者不以“#”开头的<a> 元素，然后添加”external”这个class并将其target属性设置”_blank”。
$(document).ready(function(){
$(“a[@href$=pdf]“).addClass(“pdf”);
$(“a[@href$=zip]“).addClass(“zip”);
$(“a[@href$=psd]“).addClass(“psd”);
$(“a:not([@href*=http://www.webdesignerwall.com])”).not(“[href^=#]“)
.addClass(“external”)
.attr({ target: “_blank” });
});
3001
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
