最近开始学习jQuery，这款大受好评的轻量级javascript库。买了本《jQuery基础教程》(Learning jQuery)，刚开始看。很喜欢看国外的这些书籍，译本也好，原文也好，感觉讲的很透彻，基本都是以最先进的互联网标准作为依托讲解的，帮助读者建立全新的web design观念。这些也是国内类似的书籍出版商和作者应该学习的。多看看这些文章，绝对会使你的设计水平和国际接轨。
今天在Web Designer Wall上看到了这样一篇关于jQuery的文章，感觉非常实用，拿来编译一下和大家分享。当然你也可以直接查看原文。
该篇文章通过10个最常用的jQuery效果向设计师和初学者讲述了如何使用jQuery创建Javascript特效。
jQuery如何运行?
首先你需要下载jQuery库并将其插入到你的html页面中(最好是放在<head>标签内)。然后你需要调用脚本运行函数。下面的图例像你详细解释了jQuery是如何运行的。
如何获取元素?编写jQuery函数相对来说比较简单。你需要掌握的关键点就是如何准确的使用你所需效果的元素。
$("#header") = 获取id为"header"的元素$("h3") = 获取所有标签为<h3>的元素
$("div#content .photo") = 获取所有<div id="content">内类为"photo"的元素
$("ul li") = 获取所有<ul>内的<li>元素
$("ul li:first") = 获取<ul>内的第一个<li>元素
1.简单的滑动版
让我们从最简单的滑动版开始。你可能已经见过很多类似的效果了，当你点击一个链接的时候，一个滑动版便向上(下)展开 (view demo)
当类名为"btn-slide"的元素被点击的时候，它将向上(或下)切换(slideToggle) <div id="panel">元素，然后切换一个CSS类"active"到<a class="btn-slide">元素。通过使用css样式，类名为.active的元素将会切换箭头图片的背景位置。
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});
});
2.简单的消失效果该示例向你讲述如何设计点击图片按钮后该区域内容消失的效果 (view demo)
当图片元素<img class="delete"> 被点击的时候，它会查找其父元素 <div class="pane">，并且缓慢的隐藏其透明度。
$(document).ready(function(){
$(".pane .delete").click(function(){
$(this).parents(".pane").animate({ opacity: "hide" }, "slow");
});
});
3Chain-able过渡效果现在让我们来看看jQuery强大的Chain-able效果。仅需几行代码就可以设计出一个按比例变化大小并且渐变消失的飞行的盒子。(view demo)
第1行和第2行: 创建<a class="run">元素被点击时的函数
第3行: 赋予<div id="box">元素的.animate函数不透明度值为0.1, 左边可到达的距离为400px, 速度为1200毫秒
第4行: 赋予.animate函数不透明度值为0.4，顶部距离160px, 高20, 宽20, 速度为"slow"
第5行: 接下来赋予.animate函数不透明度值为1, 左边距离为0, 高100, 宽100, 速度为"slow"
第6行: 设置.animate函数的top值为0,速度为"fast"
第7行: 调用slideUp函数 (默认速度值为"normal")
第8行: 调用slideDown, 速度值为"slow"
$(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下面是一个折叠效果 (view demo)
第1行：为<div class="accordion">内的第一个<H3>元素添加名为"active"的类，并应用css样式("active"类将转换箭头图标的背景位置)。
第2行：隐藏<div class="accordion">内的非第一行的所有<p>元素。
当<h3>元素被点击的时候，它将滑动并切换(slideToggle)下一个<p>元素并且向上滑动(slideUp)它的子元素,然后切换类名为"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该示例和上面的很类似，不过可以让你自定义默认展开的面板。 (view demo)
In the CSS stylesheet,将.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.动态悬停效果1该示例将会创建一个非常漂亮的渐入渐出的动画悬停效果 (view demo)
当鼠标悬停在菜单上的时候，将会查找下一个<em>元素，并创建animate函数，设置其不透明度和顶部位置。
$(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该示例为菜单链接添加title属性，并将它放在一个变量里面，然后附加到<em>标签上。 (view demo)
第一行附加了一个空的
<em> 标签到菜单的
<a> 元素上。
当鼠标悬停在链接上时，获取title 属性，将其存放在"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.整个块元素点击效果该示例展示了如何创建整个块元素点击效果变换的方式。(view demo)
假设你有一个类名为"pane-list"的
<ul>a，并让其子元素<li> 的整个模块可以点击。你可以为".pane-list li"创建一个点击函数，当其被点击的时候，函数会查找<a>元素，并重新定向到href属性值的地址。$(document).ready(function(){
$(".pane-list li").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});
});
7.折叠面板让我们结合前面的一些技术来创建一个可折叠的面板。(view demo)
第1段: 隐藏第一个面板后的所有类名为"message_body"的块
第2段: 隐藏第5个以后的所有<li>元素
第3段：当<p class="message_head">被点击的时候，滑动并且换(slideToggle)到下一个<div class="message_body">块。
第4段: 当<a class="collpase_all_message">按钮被点击的时候，向上滑动所有的<div class="message_body">块。
第5段: 当<a class="show_all_message">被点击的时候，隐藏该元素，显示<a class="show_recent_only">元素,并且向下移动(slideDown)所有第5个以后的<li>元素
第6段: 当<a class="show_recent_only">被点击的时候, 隐藏该元素，显示<a class="show_all_message">元素,并且向上移动(slideUp)所有第5个以后的<li>元素
$(document).ready(function(){
$(".message_list .message_body:gt(0)").hide();
$(".message_list li:gt(4)").hide();
$(".message_head").click(function(){
$(this).next(".message_body").slideToggle(500)
return false;
});
$(".collpase_all_message").click(function(){
$(".message_body").slideUp(500)
return false;
});
$(".show_all_message").click(function(){
$(this).hide()
$(".show_recent_only").show()
$(".message_list li:gt(4)").slideDown()
return false;
});
$(".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 插件。(view demo)
第1段: 添加"alt"类到所有偶数行<div class="pane">块，(隔行添加灰色背景)
第2段: 当<a class="btn-delete">被点击的时候, 出现提示信息，并变换<div class="pane">的背景颜色和不透明度
第3段: 当<a class="btn-unapprove"> 被点击的时候, 先将<div class="pane">的背景颜色变为黄色，然后变为白色，并添加"spam"类
第4段: 当<a class="btn-approve">被点击的时候，先将<div class="pane">背景颜色变为绿色，然后变为白色，并移走"spam"类
第5段: 当<a class="btn-spam"> is clicked, animate the backgroundColor to red and opacity ="hide"
$(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图像到目标元素上。 (viewdemo)
首先在H2元素上添加一个空的<em>。
当<p class=thumbs>内的链接被点击的时候：
- 将href 属性存放在变量 "largePath"中
- 将title 属性存放在变量 "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.定义不同的链接样式在大多数现代浏览器中，定义link选择器是非常容易的。例如，定义一个链接到.pdf文件，你可以简单的使用以下css规则：a[href $='.pdf'] { ... }。不幸的是，IE6并不支持这个语法（这是为什么我们恨IE!的另一个原因）。为了实现这样的效果，你可以使用jQuery(view demo)
前三行应该很容易理解，就是根据
href属性为
<a>元素添加CSS类样式。
第二段是来获取href属性中不含有"http://www.webdesignerwall.com"字样或者不是以 "#"开头的<a> 元素，然后为其添加"external"属性，并将目标浏览器开启方式设置为"_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" });
});
博文
