有人说AJAX很难，但自从jQuery出现后，再难我们都可以轻松驾驭了。jQuery作为当前流行的JavaScript框架将使 Ajax 变得及其简单。这篇文章就是为各位网站设计师和其他新手讲述的怎样更好地使用jQuery库实现Javascript效果的。
jQuery是这样一个Javascript库，它可以帮助编程人员实现”write less, do more”少写多做的功能。在这个Javascript库中，有很多的Ajax和Javascript特性，来帮助我们提高改善用户体验和语义化Web设计。使用这些常用的jQuery效果，你就不用再为这些繁琐的代码发愁了。
文中用到的jQuery版本为jQuery 1.2.3版。
jQuery是怎样工作的？
首先，你必须下载一个jQuery备份（核心只有一个文件jquery-x.x.x.x.js，其中x.x.x.x表示了文件的版本），并拷贝到对应web项目的javascript脚本目录中；然后在<head></head>HTML标签中插入函数，告诉jQuery你想干什么就好了。下面这个图表就是告诉我们jQuery如何工作的。
图1 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标签
jQuery的常见十大应用
1，简单的隐现滑动面板
先从一个简单的隐现滑动面板开始学习吧！可能你已经看到过很多的类似效果，点击一个链接时，层面板会上下滑动(点击观看效果)。
图2 上下滑动效果
工作原理：当class类标签btn-slide被鼠标点击时，就会滑动这个id=”panel” 的div标签，并把CSS中的active类应用到<a class=”btn-slide”>标签。这个.active类就牵引带有箭头图片的背景层上下滑动了。
代码如下：
$(document).ready(function(){ $(”.btn-slide”).click(function(){
$(”#panel”).slideToggle(”slow”);
$(this).toggleClass(”active”);
});
});2，简单的按钮关闭效果
当点击按钮图标时，关闭对应内容(点击观看效果)。
图3 按钮关闭效果
工作原理：当点击<img class=”delete”>时，它会找到自己所属的上级标签<div class=”pane”>，并激活其不透明性为慢慢地隐藏消失。
代码如下：
$(document).ready(function(){ $(”.pane .delete”).click(function(){
$(this).parents(”.pane”).animate({ opacity: “hide” }, “slow”);
});
});3，联动变换效果
现在我们来看看jQuery强大的联动效果吧。只用简单的几行代码，就能实现飞来飞去渐隐渐现的复杂效果了(点击观看效果)。
图4 联动变换效果
工作原理：
line1：点击<a class=”run”>
line2：激活<div id=”box”>的不透明属性opacity=0.1，以1200ms的速度，left属性移动 400px
line3：接着以slow的速度，opacity=0.4, top=160px, height=20, width=20
line4：接着以slow的速度，opacity=1, left=0, height=100, width=100
line5：接着以slow的速度，
line6：接着以fast的速度，top=0
line7：接着以默认normal速度，slideUp
line8：接着以slow的速度，slideDown
line9：最后返回false来阻止浏览器跳转到link链接锚点
代码如下：
$(document).ready(function(){ $(”.run”).click(function(){
$(”#box”).animate({opacity: “0.1″, left: “+=400″}, 1200)
.animate({opacity: “0.4″, top: “+=160″, height: “20″, “20″}, “slow”)
.animate({opacity: “1″, left: “0″, height: “100″, “100″}, “slow”)
.animate({top: “0″}, “fast”)
.slideUp()
.slideDown(”slow”)
return false;
});
});4a，折叠样式1
这是一个简单的折叠样式(点击观看效果)。
图5 折叠样式1
工作原理：在第一行，为属性为<div class=”accordion”>的第一个<h3>标签添加”active”类方法（用来切换箭头图标的背景位置）；在第二行，隐藏第一个除外的所有<div class=”accordion”>中的<p>标签。
点击<h3>标签时，牵引下一个<p>标签并向上滑动其所有的同类标签。
代码如下：
$(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
这个效果跟4a中的效果基本一致，唯一不同的是指定了初始默认打开的层(点击观看效果)。
工作原理：在CSS样式表中设置.accordion p的display:none。假如你想设置第三个层为默认的打开状态，那么你就可以这样写：
$(".accordion2 p").eq(2).show(); //(eq = equal)默认从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，漂亮的鼠标hover悬停效果1
本例实现的是一个精美的鼠标悬停时的渐隐渐现效果(点击观看效果)。
图6 漂亮的鼠标hover悬停效果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，漂亮的鼠标hover悬停效果2
这个例子是获取链接菜单的title属性，保存在一个变量里面，然后附加给<em>标签(点击观看效果)。
图7 漂亮的鼠标hover悬停效果2
工作原理：在第一行将一个空的<em>赋值给链接菜单的<a>元素。鼠标悬停在链接菜单上时，就会获取title的属性，保存给一个”hoverText”变量，然后把”hoverText”的值赋给<em>的文本内容。
代码如下：
$(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，块级鼠标样式
本例展示的是一个块级鼠标样式，就像Best Web Gallery这个网站的侧边栏效果似的(点击观看效果)。
图8 块级鼠标样式
工作原理：<a>元素，并重定向浏览器位置到它的href属性值。
代码如下：
$(document).ready(function(){ $(”.pane-list li”).click(function(){
window.location=$(this).find(”a”).attr(”href”); return false;
});
});7，折叠面板
现在，让我们结合上面例子的技巧方法，创建一个折叠面板效果吧（跟Gmail收件箱效果差不多）(点击观看效果)。
图9 折叠面板样式
工作原理：
第一行：隐藏除第一个以外的所有<div class=”message_body”>
第二行：隐藏第五个后面的所有<li>标签
第三行：当点击<p class=”message_head”>时，牵引滑动下一个<div class=”message_body”>
第四行：当点击<a class=”collpase_all_message”>按钮时，向上滑动所有的<div class=”message_body”>
第五行：当点击<a class=”show_all_message”>时，隐藏本身，显示<a class=”show_recent_only”>，并向下滑动第五个以后的所有<li>
最后一行：当点击<a class=”show_recent_only”>时，隐藏本身，显示class=”show_all_message”>，并向上滑动第五个以后的所有<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 Aiax后台评论管理效果。在这个例子中，我们就用jQuery模仿出这个效果，不过首先你要用到一个Color Animations插件）(点击观看效果)。
图10 WordPress后台评论管理样式
工作原理：
第一行：添加”alt”类给<div class=”pane”>（给每个<div>赋值灰色背景）
第二行：在点击<a class=”btn-delete”>时，弹出警告框信息后，激活<div class=”pane”>层的背景色和不透明度
第三行：点击<a class=”btn-unapprove”>时，使<div class=”pane”>层的背景色变黄再变白，并增加”spam”类样式
第四行：点击<a class=”btn-approve”>时，使<div class=”pane”>层的背景色变绿再变白，并移除”spam”类样式
最后一行：点击<a class=”btn-spam”>时，背景色变红，并设置不透明度为”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图片加载到一个target中去(点击观看效果)。
图11 图片展示切换样式
工作原理：alt属性；最后，用变量的largeAlt（附加在brackets中）设置H2内em内容。
代码如下：
$(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并不支持这种定义（这也是我们为什么讨厌IE浏览器的一个原因）。为了实现浏览器间的兼容性，我们可以用jQuery实现(点击观看效果)。
图12 图片展示切换样式
工作原理：前三个链接样式要各自定义实现，根据他们的href属性分别调用CSS样式给各自的<a>；其他的部分，使得所有没有”http://www.webdesignerwall.com/“href属性中不是以”#”开头的<a>标签，然后添加”external”样式，并设置打开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” });
});ＰＳ：其实看到这篇文章好几天了，只是没时间翻译过来分享。今天弄到了半夜终于搞定了，翻译比较粗糙，如有错误瑕疵，请一定指正。翻译的过程中，学到了很多东西，加深了我对jQuery的爱。