广告载入中...

网页设计师需要了解的jQuery教程

发表时间:2010-06-02内容来源:站长资讯收集整理

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

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

查看文章中jQuery实例

下载实例代码(ZIP格式)

jQuery的工作原理。

首先,你需要下载一份jQuery,然后将它添加到你的html页面中(最好是在<head>标签内)。然后你需要写一些函数告诉jQuery该做什么。下面这张图详细解释了jQuery的工作原理。

how jquery works

如果获取页面元素?

编写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> 元素。
     

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. 简单的消失效果

这个例子向你演示当用户点击图片按钮时,如何让某些元素消失。(查看实例效果
 

sample

当点击<img class="delete">时,jQuery会首先寻找 <div class="pane">的父元素,然后用缓慢的速度将父元素opacity设置为透明效果,达到隐藏效果
 

$(document).ready(function(){

$(".pane .delete").click(function(){
$(this).parents(".pane").animate({ opacity: "hide" }, "slow");
});

});

3 连续转变效果

现在让我们见识见识jQuery的连锁转变(chainability)的能力。只需用几行代码,我就可以让方框到处乱飞,而且带有缩放和淡出的效果。(查看实例效果
 

sample

第1行:当用户点击<a class="run">
 

第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)实例。(查看实例效果
 

sample

第一行代码会为<div class="accordion"> 元素中的第一个<H3>元素添加一个active的class(这个active的class会改变箭头图标的背景位置)。第二行会隐藏<div class="accordion">中除第一外的所有<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

这里这个例子将会教你制作一个带有淡出和淡入效果的鼠标悬停效果。(查看例子实际效果
 

sample

当鼠标悬停的在菜单链接之上时,他会找到下一个<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>标签中。(查看实例效果
 

sample

第一行代码将会给菜单的<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");
});

});

  • 站长资讯刊登此文只为传递信息,并不表示赞同或者反对作者观点。
  • 如果此内容给您造成了负面影响或者损失,本站不承担任何责任。
  • 如果内容涉及版权问题,请及时与我们取得联系。

文章评论

共有 位CH网友发表了评论 查看完整内容