博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

网站设计师jQuery上手指南(转载)

Posted on 2008-05-04 09:52  linFen  阅读(637)  评论(0编辑  收藏  举报

有人说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 pdisplay: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 class=thumbs>内的链接被触发时,把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” });
});

PS:其实看到这篇文章好几天了,只是没时间翻译过来分享。今天弄到了半夜终于搞定了,翻译比较粗糙,如有错误瑕疵,请一定指正。翻译的过程中,学到了很多东西,加深了我对jQuery的爱。