10个为Web设计师准备的jQuery教程| 我想网企业库|免费b2b网站

本文给网页设计师以及新手提供了10个简易的教程，以帮助他们使用jQuery来实现Javascript效果。假如你不知道的话，我这里稍稍做一个简单介绍。它是一个“编写简单，功能强大”（write less, do more）的Javascipt库。它提供许多Ajax和Javascript功能，你可以用它来增强用户体验，以及让代码更易阅读。因为这些教程主要关注以jQuery，所以在CSS细节上我不会做过多纠缠。

注意：本文所使用的jQuery版本是1.2.3

jQuery的工作原理。

首先，你需要下载一份，然后将它添加到你的html页面中（{zh0}是在<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>元素内{dy}个节点的<li> 元素。

1. 简易下拉面板

首先，让我们来学习制作一个简易的下拉面板。你可能已经见过许多下拉面板，在上面你只需要点击链接，页面就会出现一个下拉面板。（看实例）

当点击一个带有class=”btn-slide”的元素时，jQuery就会对 <div id=”panel”> 元素进行展收操作（slideToggle）（展开或者收起），并且给<a class=”btn-slide”>元素添加一个class=”active”的属性。然后.active的class就会改变箭头的背景位置（通过CSS实现）

$(document).ready(function(){

$(“.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）实例。（查看）

{dy}行代码会为<div> 元素中的{dy}个<H3>元素添加一个active的class（这个active的class会改变箭头图标的背景位置）。第二行会隐藏<div>中除{dy}外的所有<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>标签中。（查看）

{dy}行代码将会给菜单的<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收件箱的面板）。注意，我用到了本网站留言列表和信息收件箱中所用到的同一技巧。（）

第1行：将<div>中的所有元素隐藏，{dy}个除外

第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来模仿这个效果。为了动态改变背景颜色，你需要包含颜色动画插件（）。查看

{dy}行：给偶数节点位置的<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;
});

});