网站设计师jQuery上手指南

中的class="photo">
$("ul li") //获取所有嵌套在ul中的li标签
$("ul li:first") //只获取ul中的第一个li标签
[p][b]jquery的常见十大应用[/b][/p]
[p][b]1，简单的隐现滑动面板[/b][/p]
先从一个简单的隐现滑动面板开始学习吧！可能你已经看到过很多的类似效果，点击一个链接时，层面板会上下滑动([url=http://bbon.cn/wp-content/uploads/demo/jquery/simple-slide-panel.html]点击观看效果[/url])。
[img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample1.gif[/img]
图2 上下滑动效果
[b]工作原理：[/b]当class类标签btn-slide被鼠标点击时，就会滑动这个id="panel" 的div标签，并把css中的active类应用到标签。这个.active类就牵引带有箭头图片的背景层上下滑动了。
[b]代码如下：[/b]$(document).ready(function(){ $(".btn-slide").click(function(){
$("#panel").slidetoggle("slow");
$(this).toggleclass("active");
});
});
[p][b]2，简单的按钮关闭效果[/b][/p]
当点击按钮图标时，关闭对应内容([url=http://bbon.cn/wp-content/uploads/demo/jquery/simple-disappear.html]点击观看效果[/url])。
[url=http://bbon.cn/wp-content/uploads/demo/jquery/simple-disappear.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample2.gif[/img][/url]
图3 按钮关闭效果
[b]工作原理：[/b]当点击时，它会找到自己所属的上级标签

，并激活其不透明性为慢慢地隐藏消失。
[b]代码如下：[/b]$(document).ready(function(){ $(".pane .delete").click(function(){
$(this).parents(".pane").animate({ opacity: "hide" }, "slow");
});
});
[p][b]3，联动变换效果[/b][/p]
[p]现在我们来看看jquery强大的联动效果吧。只用简单的几行代码，就能实现飞来飞去渐隐渐现的复杂效果了([url=http://bbon.cn/wp-content/uploads/demo/jquery/chainable-effects.html]点击观看效果[/url])。[/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/chainable-effects.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/multi-animation.gif[/img][/url]
图4 联动变换效果
[b]工作原理：[/b]
[b]line1：[/b]点击
[b]line2：[/b]激活

的不透明属性opacity=0.1，以1200ms的速度，left属性移动 400px
[b]line3：[/b]接着以slow的速度，opacity=0.4, top=160px, height=20, width=20
[b]line4：[/b]接着以slow的速度，opacity=1, left=0, height=100, width=100
[b]line5：[/b]接着以slow的速度，opacity=1, left=0, height=100, width=100
[b]line6：[/b]接着以fast的速度，top=0
[b]line7：[/b]接着以默认normal速度，slideup
[b]line8：[/b]接着以slow的速度，slidedown
[b]line9：[/b]最后返回false来阻止浏览器跳转到link链接锚点
[b]代码如下：[/b]$(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;
});
});
[p][b]4a，折叠样式1[/b][/p]
[p]这是一个简单的折叠样式([url=http://bbon.cn/wp-content/uploads/demo/jquery/accordion1.html]点击观看效果[/url])。[/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/accordion1.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample3.gif[/img][/url]
图5 折叠样式1
[b]工作原理：[/b]在第一行，为属性为

的第一个

标签添加"active"类方法（用来切换箭头图标的背景位置）；在第二行，隐藏第一个除外的所有
中的
标签。
[p]点击
标签时，牵引下一个
标签并向上滑动其所有的同类标签。[/p]
[b]代码如下：[/b]$(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");
});
});
[p][b]4b，折叠样式2[/b][/p]
[p]这个效果跟4a中的效果基本一致，唯一不同的是指定了初始默认打开的层([url=http://bbon.cn/wp-content/uploads/demo/jquery/accordion2.html]点击观看效果[/url])。[/p]
[b]工作原理：[/b]在css样式表中设置.accordion p的display:none。假如你想设置第三个层为默认的打开状态，那么你就可以这样写：
$(".accordion2 p").eq(2).show(); //(eq = equal)默认从0开始计数
[b]代码如下：[/b]$(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");
});
});
[p][b]5a，漂亮的鼠标hover悬停效果1[/b][/p]
[p]本例实现的是一个精美的鼠标悬停时的渐隐渐现效果([url=http://bbon.cn/wp-content/uploads/demo/jquery/animated-hover1.html]点击观看效果[/url])。[/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/animated-hover1.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample4.gif[/img][/url]
图6 漂亮的鼠标hover悬停效果1
[b]工作原理：[/b]鼠标悬停在链接菜单上时，找到下面的并激活其opacity不透明属性和top位置。
[b]代码如下：[/b]$(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");
});
});
[p][color=#000000][b]5b，漂亮的鼠标hover悬停效果2[/b][/color][/p]
[p][color=#000000]这个例子是获取链接菜单的title属性，保存在一个变量里面，然后附加给标签([url=http://bbon.cn/wp-content/uploads/demo/jquery/animated-hover2.html]点击观看效果[/url])。[/color][/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/animated-hover2.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample4b.gif[/img][/url]
图7 漂亮的鼠标hover悬停效果2
[b]工作原理：[/b]在第一行将一个空的赋值给链接菜单的元素。鼠标悬停在链接菜单上时，就会获取title的属性，保存给一个"hovertext"变量，然后把"hovertext"的值赋给的文本内容。
[b]代码如下：[/b]$(document).ready(function(){ $(".menu2 a").append("");
$(".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");
});
});
[p][color=#000000][b]6，块级鼠标样式[/b][/color][/p]
[p]本例展示的是一个块级鼠标样式，就像[url=http://bestwebgallery.com/]best web gallery[/url]这个网站的侧边栏效果似的([url=http://bbon.cn/wp-content/uploads/demo/jquery/block-clickable.html]点击观看效果[/url])。[/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/block-clickable.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample5.gif[/img][/url]
图8 [color=#000000]块级鼠标样式[/color]
[b]工作原理：[/b]假设你有一个class属性为”pane-list”的
列表，你希望嵌套在其内部的可以实现块状点击样式，你就可以把这个点击方法赋值给”.pane-list li”。在点击时，这个方法就会找到 元素，并重定向浏览器位置到它的href属性值。
[b]代码如下：[/b]$(document).ready(function(){ $(".pane-list li").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});
});
[p][b]7，折叠面板[/b][/p]
[p]现在，让我们结合上面例子的技巧方法，创建一个折叠面板效果吧（跟gmail收件箱效果差不多）([url=http://bbon.cn/wp-content/uploads/demo/jquery/collapsible-panels.html]点击观看效果[/url])。[/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/collapsible-panels.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample6.gif[/img][/url]
图9 [color=#000000]折叠面板样式[/color]
[b]工作原理：[/b]
[p]第一行：隐藏除第一个以外的所有
[/p]
[p]第二行：隐藏第五个后面的所有
标签[/p]
[p]第三行：当点击
时，牵引滑动下一个
[/p]
[p]第四行：当点击 按钮时，向上滑动所有的
[/p]
[p]第五行：当点击 时，隐藏本身，显示 ，并向下滑动第五个以后的所有
[/p]
[p]最后一行：当点击 时，隐藏本身，显示class=”show_all_message”>，并向上滑动第五个以后的所有
[/p]
[b]代码如下：[/b]$(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;
});
});
[p][b]8，模仿wordpress后台评论管理[/b][/p]
[p]可能我们绝大多数人都看到过wordpress aiax后台评论管理效果。在这个例子中，我们就用jquery模仿出这个效果，不过首先你要用到一个[url=http://plugins.jquery.com/project/color][b]color animations[/b][/url]插件）([url=http://bbon.cn/wp-content/uploads/demo/jquery/wordpress-comments.html]点击观看效果[/url])。[/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/wordpress-comments.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample7.gif[/img][/url]
图10 [color=#000000]wordpress后台评论管理样式[/color]
[b]工作原理：[/b]
[p]第一行：添加”alt”类给
（给每个
赋值灰色背景）[/p]
[p]第二行：在点击 时，弹出警告框信息后，激活
层的背景色和不透明度[/p]
[p]第三行：点击 时，使
层的背景色变黄再变白，并增加”spam”类样式[/p]
[p]第四行：点击 时，使
层的背景色变绿再变白，并移除”spam”类样式[/p]
[p]最后一行：点击 时，背景色变红，并设置不透明度为”hide”[/p]
[b]代码如下：[/b]//don't forget to include the color animations plugin
//$(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;
});
});
[p][b]9，图片展示切换[/b][/p]
[p]如果你不想通过页面跳转的方式来展示多幅图片的话，那么这个例子的方法绝对是可行的。你可以把jpg图片加载到一个target中去([url=http://bbon.cn/wp-content/uploads/demo/jquery/img-replacement.html]点击观看效果[/url])。[/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/img-replacement.html][img]http://bbon.cn/wp-content/themes/wpink//images/grey.gif[/img][/url]
图11 [color=#000000]图片展示切换样式[/color]
[b]工作原理：[/b]首先为h2添加一个空的。当一个内的链接被触发时，把href属性赋给一个”largepath”变量；把title属性赋给一个”largealt”变量；用变量”largepath”替换的scr属性；用变量”largealt”替换alt属性；最后，用变量的largealt（附加在brackets中）设置h2内em内容。
[b]代码如下：[/b]$(document).ready(function(){ $("h2").append('')
$(".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;
});
});
[p][b][color=#000000]10，样式化不同链接类型[/color][/b][/p]
对于大多数流行的浏览器来说，定义不同类型的链接样式是非常容易的。例如，定义一个.pdf格式文件的链接样式，我们可以使用这样的css规则实现：a[href $='.pdf'] { ... }.但不幸的是，ie6并不支持这种定义（这也是我们为什么讨厌ie浏览器的一个原因）。为了实现浏览器间的兼容性，我们可以用jquery实现([url=http://bbon.cn/wp-content/uploads/demo/jquery/link-types.html]点击观看效果[/url])。
[url=http://bbon.cn/wp-content/uploads/demo/jquery/link-types.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample9.gif[/img][/url]
图12 [color=#000000]图片展示切换样式[/color]
[b]工作原理：[/b]前三个链接样式要各自定义实现，根据他们的href属性分别调用css样式给各自的 ；其他的部分，使得所有没有"[url=http://webdesignerwall.com/]http://webdesignerwall.com[/url]"和/或在href属性中不是以”#”开头的 标签，然后添加”external”样式，并设置打开target为”_blank”。
[b]代码如下：[/b]$(document).ready(function(){ $("a[@href$=pdf]").addclass("pdf");
$("a[@href$=zip]").addclass("zip");
$("a[@href$=psd]").addclass("psd");
$("a:not([@href*=http://webdesignerwall.com])").not("[href^=#]")
.addclass("external")
.attr({ target: "_blank" });
});
[p][b]ｐｓ：[/b]其实看到这篇文章好几天了，只是没时间翻译过来分享。今天弄到了半夜终于搞定了，翻译比较粗糙，如有错误瑕疵，请一定指正。翻译的过程中，学到了很多东西，加深了我对jquery的爱。[/p]
[p][url=http://bbon.cn/]菠菜博[/url]下载：[url=http://bbon.cn/wp-content/uploads/2008/03/jquery-tutorials.zip]网站设计师jquery指南打包下载[/url] [url=http://webdesignerwall.com/file/jquery-tutorials.zip]原文下载地址[/url][/p]
[p][url=http://bbon.cn/]菠菜博[/url]demo：[url=http://bbon.cn/wp-content/uploads/demo/jquery]点击浏览[/url] [url=http://webdesignerwall.com/demo/jquery/]原文demo[/url][/p]
[p]原文地址：[url=http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers/]jquery tutorials for designers[/url][/p]
[p]中文翻译：[url=http://bbon.cn/post/283]网站设计师jquery上手指南[/url][/p]
[p]翻译博客：[url=http://bbon.cn/]菠菜博[/url][/p]
[p][url=http://bbon.cn/2008/03/%e7%bd%91%e7%ab%99%e8%ae%be%e8%ae%a1%e5%b8%88jquery%e4%b8%8a%e6%89%8b%e6%8c%87%e5%8d%97.html]http://bbon.cn/2008/03/%e7%bd%91%e7%ab%99%e8%ae%be%e8%ae%a1%e5%b8%88jquery%e4%b8%8a%e6%89%8b%e6%8c%87%e5%8d%97.html[/url][/p]

该文章在 2010/4/27 2:48:12 编辑过

网站设计师jQuery上手指南

标签添加"active"类方法（用来切换箭头图标的背景位置）；在第二行，隐藏第一个除外的所有中的标签。 [p]点击