- 浏览: 97487 次
- 性别:
- 来自: 宁德
最新评论
-
oudoud:
非常不错,没见收藏按钮
240多个jQuery插件 -
idning:
ding
生日悖论 -
java之渴望:
<%@ page contentType="& ...
将网页数据导出到Excel(以最简单的方式呈现) -
zhoujiabin810812:
简介明了!
黑莓(BlackBerry)是什么 -
WiseNeuron:
谢谢。标记一下
240多个jQuery插件
有人说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如何工作的。
图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
opacity=1, left=0, height=100, width=100line5:接着以slow的速度,
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 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" });
});
发表评论
-
jquery技巧总结
2009-08-11 09:39 9341.1、概述随着WEB2.0及ajax思想在互联网上的快速发展 ... -
jQuery入门(二)
2009-08-11 00:18 1359随着WEB2.0及ajax思想在互联网上的快速发展传播,陆 ... -
jQuery入门(一)
2009-08-11 00:17 1018本文目录 ·Hello jQuery ·Find m ... -
jQuery:Core部分的使用
2009-08-11 00:15 810jQuery无疑是现在比较流 ... -
jQuery:DOM部分之Attributes 的使用
2009-08-11 00:14 1888在jQuery函数系列介绍完之后,将会介绍一些比较实用的例子, ... -
jQuery:DOM部分之Manipulation 的使用
2009-08-11 00:13 732开始dom元素节点的添加删除等操作部分的函数学习 函数:a ... -
jQuery:DOM部分之Traversing 的使用
2009-08-11 00:12 914也就是DOM元素的遍历 函数:add(expr) 功 ... -
jQuery:CSS部分
2009-08-11 00:11 1663也就是对dom元素中 ... -
jQuery:Events函数的使用
2009-08-11 00:10 1281函数:blur(),click(),focus(),selec ... -
jquery :使用指南二
2009-08-11 00:06 1003简介 jQuery 逐渐从其他 JavaScript 库选择 ... -
240多个jQuery插件
2009-08-11 00:00 2221概述jQuery 是继 prototype 之后又一个优秀的 ... -
jquery.load()使iframe随内容改变而自适应高度
2009-08-10 23:52 2701很高兴,终于使用jquery实现了点击外部链接,更改ifram ... -
JQuery插件汇总多达240个插件
2009-05-23 20:10 851概述 jQuery 是继 prototype 之后又一个优秀的 ...
相关推荐
**JQuery zTree 开发指南** JQuery zTree是一款基于jQuery的树形插件,它在Web开发中广泛用于构建动态、交互式的树状结构。zTree不仅支持基本的树形展示,还提供了丰富的功能,如节点操作、异步加载、多选模式、...
**jQuery中文入门指南** jQuery是一款广泛应用于Web开发的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。...结合提供的文档和学习资源,相信你可以快速上手并精通jQuery。
本指南旨在帮助初学者在短时间内掌握jQuery的基本概念和核心功能,实现快速上手。 一、开天辟地入门篇 在《从零开始学习jQuery (一) 开天辟地入门篇》中,我们将了解jQuery的核心思想和基本用法。首先,我们需要...
本文旨在为初学者提供一份详尽的jQuery入门指南,帮助大家快速上手,掌握利用jQuery进行网页动态化的基本技巧。 #### 一、jQuery简介 jQuery是一个轻量级的、跨平台的JavaScript库,由John Resig于2006年创建。它的...
通过阅读指南和查阅API,开发者可以快速上手并深入理解jQuery的工作原理。配合实际项目练习,将理论知识转化为实际技能,是成为一名熟练的jQuery开发者的关键。同时,随着技术的发展,不断更新知识,掌握最新的...
本指南将深入讲解jQuery的核心概念、方法和最佳实践,旨在帮助初学者快速上手,并为有经验的开发者提供深入理解的途径。 **一、jQuery基础** 1. **引入jQuery**: 首先,我们需要在HTML文件中通过`<script>`标签...
### JQuery UI 自学指南 #### 一、JQuery UI简介 JQuery UI 是一个基于 JQuery 的用户界面库,它提供了一系列可复用的交互式组件,使得 Web 开发人员能够轻松地创建美观且功能丰富的用户界面。JQuery UI 的目标是...
【标题】"jq官方手册权威指南版本"指出的是jQuery(通常简称为jq)的官方手册,这是一份详细且权威的参考资料,旨在帮助开发者全面理解并掌握jQuery库的使用。jQuery是一个广泛应用于Web开发的JavaScript库,它简化...
5. **《jQuery七天入门指南.pdf》**:这份快速入门指南可能在一周内提供了一个紧凑的学习计划,涵盖jQuery的基础知识和关键功能,如选择器、DOM操作、事件处理、动画、Ajax等,旨在使初学者能在短时间内具备使用...
配合《jQuery UI开发指南》这本书,读者可以深入学习如何有效地使用这些组件。书中通常会涵盖以下主题: 1. **基础介绍**:讲解jQuery UI的基本概念,包括如何引入库文件,以及如何初始化UI组件。 2. **组件详解**...
《jQuery+EasyUI开发指南》是一本面向开发者的技术书籍,主要涵盖了使用jQuery和EasyUI进行Web前端开发的各种技术和实践。jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax...
`jquery-easyui-document.chm` 是 jQuery EasyUI 的官方帮助文档,通常包含了完整的 API 参考、示例代码和使用指南。这个 CHM 文件可以帮助我们深入理解整个框架,不仅仅是 Datagrid,还包括其他如对话框(dialog)...
- `jQuery中文入门教程_译自Getting Started with jQuery.htm` 提供了jQuery的基本用法和示例,涵盖了选择器、DOM操作、事件处理、效果和Ajax等方面,适合初学者快速上手。 3. **jQuery七天入门指南** - `jQuery...
《jQuery StarterKit:初学者的JQUERY实践指南》 jQuery是一个强大的JavaScript库,极大地简化了JavaScript的使用,尤其是处理网页的DOM操作、事件处理、动画效果以及Ajax交互。"jquery-starterkit"是一个专为初学...