[转]网页设计师的jQuery教程_jQuery Tutorials for Designers

所在分类:事业 > 多媒体&IT技术   日期:2008-08-10

英文原文地址 http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

—————————————————————————–

有人说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如何工作的。

 

 

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的速度，opacity=1, left=0, height=100, width=100

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", width: "20"}, "slow")

   .animate({opacity: "1", left: "0", height: "100", width: "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 块级鼠标样式

工作原理：假设你有一个class属性为”pane-list”的<ul>列表，你希望嵌套在其内部的<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收件箱效果差不多）(点击观看效果)。

 

 

图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 图片展示切换样式

工作原理：首先为H2添加一个空的<em>。当一个<p>内的链接被触发时，把href属性赋给一个”largePath”变量；把title属性赋给一个”largeAlt”变量；用变量”largePath”替换<img id=”largeImg”>的scr属性；用变量”largeAlt”替换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的爱。

菠菜博下载：网站设计师jQuery指南打包下载 原文下载地址

菠菜博DEMO：点击浏览 原文DEMO

原文地址：jQuery Tutorials for Designers

中文翻译：网站设计师jQuery上手指南

翻译博客：菠菜博

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。