BlogJava-Sealyu-随笔分类-JQuery

JQuery中常用的Calender和DatePicker组件

seal — Tue, 06 Jul 2010 20:44:00 GMT

14个基于jQuery的图片展示和幻灯片插件（转）

seal — Mon, 17 May 2010 18:03:00 GMT

导言

有时候，图片的效果胜过千言万字，这是毫无疑问的，如CNN，ESPN，它们都是使用了大规模的照片幻灯片放置在头版。这是一个非常有效的吸引观众注意的方法。

所以，从这里。你可以感受到14个以jQuery为基础的图片展示所带来的感受。

1.jQuery Cycle

Website | Demo

jQuery Cycle

2.Pikachoose

Website | Demo

Pikachoose

3.s3Slider

Website | Demo

s3Slider

4.Galleria

Website | Demo

Galleria

5.slideViewer

Website | Demo

slideViewer

6.Image Flow

Website | Demo

Image Flow

7.jQuery Gallery Scroller

Website | Demo

jQuery Gallery Scroller

8.Spacegallery

Website | Demo

Spacegallery

9.Easy Slider

Website | Demo

Easy Slider

10.jFlow

Website | Demo

jFlow

11.Supersized

Website | Demo

Supersized

12.Simple jQuery Slideshow

Website | Demo

Simple jQuery Slideshow

13.CrossSlide

Website | Demo

CrossSlide

14.Innerfade

Website | Demo

Innerfade

结束

希望大家会喜欢这个集合.

seal 2010-05-18 02:03 发表评论

15个使用jQuery实现图片幻灯片效果的JS源码(转)

seal — Mon, 17 May 2010 18:02:00 GMT

导读：jQuery作为JS的重量级框架应用十分普遍，很多效果可以用jQuery来写，具有代码简洁和浏览器兼容的优点，本文着重介绍了15个使用jQuery来写的图片幻灯片效果源码，其中很多效果可以与Flash媲美！

jQuery作为一个应用最广泛的JavaScript框架之一，第三方开发者不断地为其开发出新的 jQuery 插件应用，从而使得jQuery可以帮助用户实现各种各样不同寻常的 Web 效果，作为最常使用的图片幻灯片效果更是jQuery的强项，看完本文为你整理推荐的15个优秀的jQuery图片幻灯片/画廊效果，你会收获更多。

15个优秀的jQuery图片幻灯片/画廊效果，基本都已经包含了原插件的发布地址、使用方法和源代码下载。

1，Gallerific

Galleriffic 是使用 Mike Alsup 的 jQuery Cycle plugin 创建的图片展示效果，包括缩略图、图片标题和描述等详细功能，是一个非常不错的高质量画廊相册展示工具。

2，ZoomImage

zoomimage ，以一种独具魅力的方式展示图片效果。缩略图链接在本页弹出大图，并且可以可以随意拖拽该悬浮图片。

3，EasySlider

Easy Slider 可以实现图片或其他任意内容，在水平或垂直方向上的滑动效果，你还可以通过 CSS 自定义设置样式。

4，The Slider from Barack Obama’s website

一个源自美国总统 Barack Obama 网站的垂下滑动菜单控制的图片幻灯效果。

5，CodaSlider

CodaSlider，又一个不错的滑动控制效果。

6，jQuery Slider II

jQuery Slider II 的布局非常符合操作习惯，在底部列出带滚动条的缩略图控制列表，然后在上面显示对应图片的大图浏览，非常适合做高级相册。

7，Beautiful Slider

Beautiful Slider，光看这个效果图你就知道这个插件有多棒了吧，是的，这个插件实现的效果已经不逊色于Flash完成的效果，整体表现流畅，文字显示效果更是创意独特。

８，LoopedSlider

loopedSlider是又一个任意内容滚动切换的幻灯片插件，使用操作简单。

9，SpaceGallery

SpaceGallery是一个全新的jQuery插件，点击当前图片，会自动放大消失，同时后面的图片向前展示，有一种时光机器的感觉。

10，jQuery Popeye

11，Noobslide

12，Accessible News Slider

13，SmoothGallery

SmoothGallery是一个最好的 Javascript 幻灯片效果之一，可以实现各种不同的幻灯片转换效果。

14，jQuery Multimedia Portfolio

jQuery Multimedia Portfolio是一个基于jQuery 的滑动效果插件,除了可以展示图片之外，还可以加入各种不同类型的多媒体文件。

15，s3Slider

s3Slider是一个非常简单实用的流畅幻灯片效果，这个插件被应用在无数的WordPress专业主题模板中。

seal 2010-05-18 02:02 发表评论

35个夺人眼球的jquery菜单下载（转）

seal — Tue, 29 Dec 2009 07:57:00 GMT

2009年06月25日 by: Ken

菜单一直在网站中扮演着重要的角色，它好比现实生活中的路标，没有它，我们会恍惚的迷失方向。

如果像目前的设计狂 一样，因为分类不算很多，所以没有注重菜单的变换设计。但是，作为一个大型网站或者想要酷炫风格的设计者而言，制作出好的菜单，也是迈向成功的一步。下面的菜单不仅仅风格夺人眼球，而且可以大大节约有限的网站空间。

在这个资源共享的社会，尤其网络体现的淋漓尽致。不必要花太多时间去琢磨代码，有了这35个夺人眼球的菜单帮助你，你就潜心的研究它的表现形式吧。

1.jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Preview || Download

2.Animated Menus Using jQuery

Preview || Download

3Create a Cool Animated Navigation with CSS and jQuery (Tutorial + Download)

Preview || Download

4.jQuery ListNav Plugin

Preview || Download

5. jqDock menu

Preview || Download

6.Sliding Jquery Menu

Preview || Download

7.CSS Sprites 2 – It’s JavaScript Time

Preview

8. CSS Mac Dock Menu

Preview || Download

9.Kwicks for jQuery

7 Examples || Download

10.Jquery File Tree

Preview || Download

11.Learning jQuery: Fading Menu – Replacing Content

Preview || Download

12. How to Make a Smooth Animated Menu with jQuery

Preview || Download

13.Create Vimeo-like top navigation

Preview + Vimeo site || Download

14. jQuery (mb)Menu 2.3

Preview || Download

15. Coda Slider

Preview || Download

16. jQuery idTabs

Preview || Download

17. Create a Slick Tabbed Content Area using CSS & jQuery

Preview

18. LavaLamp for jQuery lovers!

Preview || Download

19. Animated Drop Down Menu with jQuery

Preview || Download

20. Using jQuery for Background Image Animations

Preview

21. How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

Preview || Download

22. Menumatic Mootools

Preview Vertical || Preview horizontal || Download

23. jQuery convertion: Garagedoor effect using Javascript

Preview || Download

24. Perspective tabs

25. Fisheye Menu

Download

26. Sliding JavaScript Menu Highlight 1kb

Download

27. Mootools Demo Redux

Preview

28. HoverAccordion

29. Simple Javascript Accordions

Preview || Download

30. UvumiTools Dropdown Menu

31. Create a multilevel Dropdown menu with CSS and improve it via jQuery

Preview || Download

32. jQuery & CSS Example – Dropdown Menu

Preview

33. Floating menu jQuery&CSS

Preview || Download

34. Superfish – jQuery menu plugin

Preview || Download

35. JQuery Pager

Preview || Download

seal 2009-12-29 15:57 发表评论

基于jQuery的facebox使用

seal — Fri, 25 Dec 2009 06:46:00 GMT

它是什么?
facebox是一个jquery为基础的lightbox，可显示图像， divs ，或者远程页面。它的使用简单，容易。下载js，请查看例子，然后开始享受facebox给我们带来的乐趣。

首先我们用Facebox观看图片：
text
仅仅这样就OK。

然后我们在来看用Facebox观看div  ：
text
ok,就这样就能简单的实现facebox了。

当然在ajax横行的时代，ajax远程加载页面也是必不可少的。
我们用Facebox加载远程的页面内容：
text
OK，这样就能远程加载 cssrain.html 的内容，以facebox的方式显示了。

这是FamSpam 上的截图

用法：
facebox应该导入

jQuery(document).ready(function($) {
//超链接的rel属性是否具有facebox
  $('a[rel*=facebox]').facebox()
})

演示
演示

下载
你需要在js和css里面加上 loading图片，和四个角的图片和边框图片。这就是你要做的。
Download Facebox v1.0

深入研究
http://famspam.com/facebox/

感谢 & 联系
感谢Facebook的理念和风格。感谢Mindy Tchieu她在工作中对我的帮助。

facebox作者Email: chris@ozmm.org

翻译作者Email: cssrain@gmail.com  Blog:http://www.cssrain.cn

摘自【http://bbs.blueidea.com/thread-2822886-1-1.html】

seal 2009-12-25 14:46 发表评论

jquery和prototype冲突解决 (转)

seal — Wed, 23 Dec 2009 12:52:00 GMT

问题背景: 想用 jQuery 做 AJAX 处理, 用基于 Prototype 的 EasyValidation 做表单验证, 但是二者不能共存, 因为都用了同一个方法名: $().

解决:

jquery和prototype冲突解决, 网上流传的一篇文章,我这里测试结果是错误的! http://ajaxbbs.net/blog/post/71/

另一种方式是:

参考: http://www.d5s.cn/archives/6, 但我这里测试也有问题!

本人测试通过的方式:

1、将jquery.js放到prototype.js前面（这个是必须的!）。
2、在jquery.js后面将$变量重命名。
方法如下：

3、将原来使用的$方法名一律替换为jQuery名，如$("obj")替换为jQuery("obj")。

例如下面的一段代码, 混合了 jQuery和基于Prototype的 EasyValidation:

seal 2009-12-23 20:52 发表评论

jquery-validate学习(转)

seal — Wed, 23 Dec 2009 08:18:00 GMT

摘要: 一、用前必备官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassistance.de/api-browser/plugins.html 当前版本：1.5.5 需要JQuery版本：1.2.6+, 兼容 1.3.2

然后使用以下函数

JavaScript代码

jQuery(document).ready(function(){
jQuery('#password1').pstrength();
});

#password是你的密码框ID

根据你的情况不同，你可以自定义你的密码强度，我定义的是这样的

JavaScript代码

$.extend($.fn, {
pstrength: function(options) {
var options = $.extend({
verdects: ["很不安全", "不安全", "一般", "安全的", "非常安全"],
colors: ["#f00", "#c06", "#f60", "#3c0", "#3f0"],
scores: [10, 15, 30, 40],
common: ["password", "sex", "god", "123456", "123", "liverpool", "letmein", "qwerty", "monkey"],
minchar: 6
}, options);

效果如下：

jQuery密码强度检验插件

一款不错的密码强度插件！

1 jquery.pstrength插件和jquery文件

2 载入jquery文件和jquery.pstrength文件

3 HTML加入密码输入框，id=”user_password”:

密码：

4 css:

.pstrength-minchar {
font-size : 10px;
}
input {
width:180px;
height:12px;
line-height:12px;
padding:4px 0px;
border: #cfcfcf 1px solid;
color: #585858;
}

演示地址

插件官方地址：Ajax Password Strength Meter Script

用jquery写了一个简单的密码强度测试工具

最近正在用功的学习jQuery，在琢磨了不少别人写的功能之后，也开始尝试着自己开发一些功能。今天我做了一个简单的密码强度测试工具。

这可功能的作用可以看下面这个截图。我已经在多种浏览器中测试过它了。

闲话不提，上代码：

无标题文档
$(document).ready(function(){
$("form:eq(0) input:eq(0)").focus();
$("input[type=password][name=password1]").focus(function(){
var position=$(this).offset()
var $pwStrength=$('

').appendTo("body");

$pwStrength.css({"position":"absolute","width":120,"height":12,"left":position.left,"top":position.top+28,"background":"#FFFF80","fontSize":"10px","line-height":"12px","color":"#ffffff"});

$('弱').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#ff0000","position":"absolute","padding-left":"14px"}).appendTo($pwStrength);

$('中').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#FF9900","position":"absolute","padding-left":"54px"}).appendTo($pwStrength);

$('强').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#008000","position":"absolute","padding-left":"94px"}).appendTo($pwStrength);

$('').css({"width":39,"height":12,"display":"block","flowover":"hidden","position":"absolute","margin-left":"40px","border-left":"1px solid #fff","border-right":"1px solid #fff"}).appendTo($pwStrength);

})

.keyup(function(){var pwd=$(this).val();$("#pwStrength span:lt(3)").css({"display":"none"});

var CharMode=function(iN){if(iN>=48&&iN<=57)return 1;if(iN>=65&&iN<=90)return 2;if(iN>=97&&iN<=122)return 4;else return 8;}

var bitTotal=function(num){modes=0;for (i=0;i<5;i++){if(num & 1) modes++;num>>>=1;}return modes;}

var checkStrong=function (sPW){if(sPW.length<=5)return 0;Modes=0;for (i=0;i

if(pwd!=''&&pwd!=null){var level=checkStrong(pwd);if(level==0)$("#pwStrength span:eq(0)").css({"display":"block"});if(level==1)$("#pwStrength span:eq(1)").css({"display":"block"});if(level==2)$("#pwStrength span:eq(2)").css({"display":"block"});}})

.blur(function(){$("#pwStrength").remove()});

})

body{font-size:12px;line-height:20px;text-align:left;}

th{text-align:right;color:#336688;font-weight:normal;}

input{border-right:1px solid #e1e5e8;border-bottom:1px solid #e1e5e8;border-left:1px solid #999999;border-top:1px solid #999999;background:#f1f2f3;font-size:12px;line-height:15px;height:17px;color:#666666;padding:1px 2px;}

button{border-left:1px solid #d4d6d8;border-top:1px solid #d4d6d8;border-right:1px solid #666666;border-bottom:1px solid #666666;background:#999999;font-size:12px;line-height:20px;height:20px;padding:0 8px;color:#ffffff;}

button.submit{border-left:1px solid #d4d6d8;border-top:1px solid #d4d6d8;border-right:1px solid #003366;border-bottom:1px solid #003366;background:#336699;font-size:12px;line-height:20px;height:20px;padding:0 8px;color:#ffffff;}

请输入用户名

请输入密码

请再次输入密码

提交重置





无标题文档








请输入用户名 

请输入密码 

请再次输入密码

你也可以把那段javascript拿出来放在一个独立的js文件里，然后再链接到网页里也可以的。

那个$(document).ready(function(){})里的第一句代码意思是说：一载入就把光标定位到网页中第一个表单的第一个输入项上。

然后再找到一个输入域input，type="password" name="password1"。至所以要这样写，因为在注册页里，往往就是有两个密码输入域，第一个name="password1"第二个名为"password2"，用来重复输入密码。另外呢，在登录页里也有一个密码输入域，但是它的name一般是"password"，而不会是其它。所以哪怕是网页中每一页都插入了这段js，它只能在注册页里起作用；$("input[type=password][name=password1]")能抓到想要的东西。

最近我在啃读《网页重构》这本书，努力在尝试提高网页的可读性，甚至希望自己做的网页对盲人来说也没有障碍。我发现在把那个“请输入用户名” 用包起来，并加上for的属性，可以让盲人的读屏器工作容易。另外，把每个表单的提交按钮的颜色和其它按钮的颜色区分开，也可以增加网页的可读性。

seal 2009-12-21 16:14 发表评论

客户端验证的极品--jQuery.validator(转)

seal — Mon, 21 Dec 2009 06:31:00 GMT

最近在做一个用户注册登录的页面，资料查寻过程中发现了一个非常不错的客户端验证的极品－jQuery.validate。
它是著名的JavaScript包jQuery的一个插件，其实它还有其它的一些插件应该都爽，有待慢慢来学习

官方地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
jQuery用户手册：http://jquery.org.cn/visual/cn/index.xml

开发使用起来非常简单明了，
我的代码：

   1. $(document).ready(function(){
   2.
   3. /* 设置默认属性 */
   4. $.validator.setDefaults({
   5.   submitHandler: function(form) { form.submit(); }
   6. });
   7. // 中文字两个字节
   8. jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
   9.   var length = value.length;
  10.   for(var i = 0; i < value.length; i++){
  11.    if(value.charCodeAt(i) > 127){
  12.     length++;
  13.    }
  14.   }
  15.   return this.optional(element) || ( length >= param[0] && length <= param[1] );
  16. }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
  17.
  18. /* 追加自定义验证方法 */
  19. // 身份证号码验证
  20. jQuery.validator.addMethod("isIdCardNo", function(value, element) {
  21.   return this.optional(element) || isIdCardNo(value);
  22. }, "请正确输入您的身份证号码");
  23.
  24. // 字符验证
  25. jQuery.validator.addMethod("userName", function(value, element) {
  26.   return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
  27. }, "用户名只能包括中文字、英文字母、数字和下划线");
  28.
  29. // 手机号码验证
  30. jQuery.validator.addMethod("isMobile", function(value, element) {
  31.   var length = value.length;
  32.   return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));
  33. }, "请正确填写您的手机号码");
  34.
  35. // 电话号码验证
  36. jQuery.validator.addMethod("isPhone", function(value, element) {
  37.   var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
  38.   return this.optional(element) || (tel.test(value));
  39. }, "请正确填写您的电话号码");
  40.
  41. // 邮政编码验证
  42. jQuery.validator.addMethod("isZipCode", function(value, element) {
  43.   var tel = /^[0-9]{6}$/;
  44.   return this.optional(element) || (tel.test(value));
  45. }, "请正确填写您的邮政编码");
  46. $(regFrom).validate({
  47. /* 设置验证规则 */
  48.   rules: {
  49.    userName: {
  50.     required: true,
  51.     userName: true,
  52.     byteRangeLength: [3,15]
  53.    },
  54.    password: {
  55.     required: true,
  56.     minLength: 5
  57.    },
  58.    repassword: {
  59.     required: true,
  60.     minLength: 5,
  61.     equalTo: "#password"
  62.    },
  63.    question: {
  64.     required: true
  65.    },
  66.    answer: {
  67.     required: true
  68.    },
  69.    realName: {
  70.     required: true
  71.    },
  72.    cardNumber: {
  73.     isIdCardNo: true
  74.    },
  75.    mobilePhone: {
  76.     isMobile: true
  77.    },
  78.    phone: {
  79.     isPhone: true
  80.    },
  81.    email: {
  82.     required: true,
  83.     email: true
  84.    },
  85.    zipCode: {
  86.     isZipCode:true
  87.    }
  88.   },
  89. /* 设置错误信息 */
  90.   messages: {
  91.    userName: {
  92.     required: "请填写用户名",
  93.     byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"
  94.    },
  95.    password: {
  96.     required: "请填写密码",
  97.     minlength: jQuery.format("输入{0}.")
  98.    },
  99.    repassword: {
100.     required: "请填写确认密码",
101.     equalTo: "两次密码输入不相同"
102.    },
103.    question: {
104.     required: "请填写您的密码提示问题"
105.    },
106.    answer: {
107.     required: "请填写您的密码提示答案"
108.    },
109.    realName: {
110.     required: "请填写您的真实姓名"
111.    },
112.    email: {
113.     required: "请输入一个Email地址",
114.     email: "请输入一个有效的Email地址"
115.    }
116.   },
117. /* 错误信息的显示位置 */
118.   errorPlacement: function(error, element) {
119.    error.appendTo( element.parent() );
120.   },
121. /* 验证通过时的处理 */
122.   success: function(label) {
123.    // set   as text for IE
124.    label.html(" ").addClass("checked");
125.   },
126. /* 获得焦点时不验证 */
127.   focusInvalid: false,
128.   onkeyup: false
129. });
130.
131. // 输入框获得焦点时，样式设置
132. $('input').focus(function(){
133.   if($(this).is(":text") || $(this).is(":password"))
134.    $(this).addClass('focus');
135.   if ($(this).hasClass('have_tooltip')) {
136.    $(this).parent().parent().removeClass('field_normal').addClass('field_focus');
137.   }
138. });
139.
140. // 输入框失去焦点时，样式设置
141. $('input').blur(function() {
142.   $(this).removeClass('focus');
143.   if ($(this).hasClass('have_tooltip')) {
144.    $(this).parent().parent().removeClass('field_focus').addClass('field_normal');
145.   }
146. });
147. });

网上的资料有人说，它跟prototype包会有冲突，我还没有同时使用过，这点不是很清楚，但我是发现一个问题：
对于最小/大长度的验证方法，作者可能考虑到大家的命名习惯不同，同时做了minLength和minlength（maxLength和maxlength）方法，应该哪一个都是可以的，但对于用户Message来说，只能够定义针对minlength（maxlength），才能调用用户自定义的Message，
否则只是调用包的默认Message，但具体原因还没有查清楚。同时，这个插件提供了本地化的消息，但对于我这里初学者来说，怎么使用它还有待摸索！

seal 2009-12-21 14:31 发表评论

2009 年度最佳 jQuery 插件(转)

seal — Tue, 15 Dec 2009 02:41:00 GMT

jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery 的特长是网页效果，因此，它的插件库也多与 UI 有关。本文是 webdesignledger.com 网站推选的2009年度最佳 jQuery 插件。

拉洋片

在一个固定区域，循环显示几段内容，这种方式很像旧时的拉洋片，2009年，这种 Web 效果大行其道，jQuery 有大量与此有关的插件，以下插件无疑是最佳的。

AnythingSlider

由 CSS-Tricks 的 Chris Coyier 设计，功能齐全，应用十分广泛。

Easy Slider

这个 Content Slider 插件既包含传统“前后”导航模式，又包含页码式导航。

Coda-Slider 2.0

Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。

图片库

那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过，借助 jQuery，这种效果已经可以在本地实现，以下是本年度备受欢迎的几个 jQuery 图片库插件。

Galleria

这是一个基于 jQuery 的图片库，可以逐个加载图片并显示缩略图。

jQuery Panel Gallery

一个可以高度定义的图片库插件，无需对单个图片进行任何处理，这个插件会帮你完成一切。

slideViewer

slideViewer 会检查你的图片列表中的编号，动态创建各个图片的页码浏览导航。

Supersized

一个令人惊讶的图片循环展示插件，包含各种变换效果和预加载选项，会对图片自动改变尺寸以适应浏览器窗口。

jquery mb.menu

Horizontal Scroll Menu with jQuery

AutoSprites

表单和表格

在 Web 设计中，表单和表格都是不是很讨人喜欢的东西，但你不得不面对，本年度出现几个不错的 jQuery 插件帮你完成这些任务。

Password Strength

这个插件帮你评估用户输入的密码是否足够强壮。

Ajax Fancy Capcha

顾名思义，一个支持 Ajax 又很炫的 jQuery Captcha 插件，它使用了很人性化的验证机制。

Chromatable

这个插件可以帮助你在表格上实现滚动条。

jqTransform

一个式样插件，帮助你对表单中的控件进行式样控制。

Uploadify

实现多个文件同时上传。

jExpand

一个很轻量的 jQuery 插件，使你的表格可以扩展，在一些商业应用中，可以让表格更容易组织其中的内容。

本文来源：http://webdesignledger.com/resources/the-best-jquery-plugins-of-2009

seal 2009-12-15 10:41 发表评论

Textbox to accept only numbers (digits) using jquery

seal — Fri, 06 Nov 2009 09:46:00 GMT

Few days back, my friend Parleen asked me how can we make a textbox which just accepts only numbers specially digits only. And, for his I come up with this solution of textbox which only accepts digits, and if you try to enter any alpha bates in it then it displays the error message with animation.

View Demo

HTML Code

As you can see above, I’ve given the name and id of textbox to “quantity” in this example.This is the textbox which only accepts numbers (digits only). You can see “span” after textbox which is used to display the error message with fading effect using jQuery.

Javascript Code

First of all, we need to use jQuery library as we’re using the jquery’s function to accept only digits.

Now le’ts write the code in JavaScript using jQuery to accept only digits in textbox and displaying error with animation.

//when key is pressed in the textbox$("#quantity").keypress(function (e)



{



  //if the letter is not digit then display error and don't type anything



  if( e.which!=8&& e.which!=0&&(e.which<48|| e.which>57))



  {



    //display error message



    $("#errmsg").html("Digits Only").show().fadeOut("slow");



    returnfalse;



  }



});

When the key is pressed, we’re using the key’s ASCII value to check which button is pressed. In first expression, delete, tab or backspace button is is checked and “8″ is the ASCII values of the Back-space. Digits are checked in the second expression. “48″ is the ASCII values of “0″ and “57″ is the ASCII values of “9″. The the ASCII values of the other digits lies between “48″ to “57″. And, if the key pressed values doesn’t lies withing these range, then we are displaying the error message with jQuery’s fading effect.

And, the “return false” statement means that this functions returns false values which means not to type anything on the text box.

Download Full Source Code

seal 2009-11-06 17:46 发表评论

jQuery中文入门指南（转）

seal — Fri, 17 Apr 2009 07:05:00 GMT

jQuery中文入门指南，翻译加实例，jQuery的起点教程

中文版译者：Keel

此文以实例为基础一步步说明了jQuery的工作方式。现以中文翻译（添加我的补充说明）如下。如有相关意见或建议请 EMAIL 告知。或者在 BLOG中留言。

英文原版：http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery ，感谢原文作者 Jörn Zaefferer 本文发布已征求原作者同意。

说明:在本教程发布之后，得到了几个网友的指正，对部分内容作了修正，但在jQuery版本不断更新的情况下，教程中的某些内容已经过时（尤其是1.3以上版本），在忠于原文的基础上，我将这部分内容加以标红的补充说明，希望更多的前端开发者能对此文提出宝贵意见，谢谢！ --2009-3-10

另外我认为在学习过程中,有两个API文档你要打开随时查看:

http://api.jquery.com/ [注：已更新为jquery新地址]
http://visualjquery.com/

如果想了解更多jQuery及插件信息，可访问本站首页.

以下部分为原文翻译:

jQuery入门指南教程

这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果。

内容提要

安装

一开始,我们需要一个jQuery的库,最新的下载可以到这里找到。这个指南提供一个基本包含实例的包供下载.

下载：jQuery Starterkit

(译者Keel注:一定要下载这个包，光看文章不实践肯定是不行的。)

下载后解压缩，然后用你最喜欢的文本编辑器打开starterkit.html和custom.js这两个文件。(译者Keel注:这两个就是例子文件,所有的例子都用这两个例子作出,custom.js写jQuery代码,starterkit.html观察效果.建议用editPlus打开)

现在,我们就已经做好了一切准备来进行这个著名的"Hello world"例子.

本章的相关链接:

Hello jQuery

在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:

$(document).ready(function() {



// do stuff when DOM is ready



});

放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.

$(document).ready(function() {



$("a").click(function() {



alert("Hello world!");



});



});

这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。

(译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。)

让我们看一下这些修改是什么含义。$("a") 是一个jQuery选择器(selector),在这里，它选择所有的a标签（译者Keel注：即），$号是 jQuery “类”(jQuery "class")的一个别称，因此$()构造了一个新的jQuery 对象(jQuery object)。函数 click() 是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.

这里有一个拟行相似功能的代码:

Link

不同之处很明显,用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像我们使用CSS追求的一样.

下面我们会更多地了解到选择器与事件.

本章的相关链接:

Find me:使用选择器和事件

jQuery提供两种方式来选择html的 elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div > ul a")）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。

为了测试一下这些选择器，我们来试着在我们starterkit.html中选择并修改第一个ordered list.

一开始，我们需要选择这个list本身，这个list有一个ID叫“orderedlist”，通常的javascript写法是document.getElementById("orderedlist").在jQuery中，我们这样做：

$(document).ready(function() {



$("#orderedlist").addClass("red");



});

这里将starterkit中的一个CSS样式red附加到了orderedlist上(译者Keel注：参考测试包中的css目录下的core.css，其中定义了red样式)。因此，在你刷新了starterkit.html后，你将会看到第一个有序列表(ordered list )背景色变成了红色，而第二个有序列表没有变化.

现在，让我们添加一些新的样式到list的子节点.

$(document).ready(function() {



$("#orderedlist > li").addClass("blue");



});

这样，所有orderedlist中的li都附加了样式"blue"。

现在我们再做个复杂一点的，当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效。

$(document).ready(function() {



$("#orderedlist li:last").hover(function() {



$(this).addClass("green");



}, function() {



$(this).removeClass("green");



});



});

还有大量的类似的CSS和XPath例子，更多的例子和列表可以在这里找到。（译者Keel注：入门看此文，修行在个人，要想在入门之后懂更多，所以这段话的几个链接迟早是要必看的！不会又要翻译吧...^_^!）

每一个onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等价表示方法（译者Keel注：jQuery不喜欢onXXX，所以都改成了XXX，去掉了on）。其他的一些事件，如ready和hover,也提供了相应的方法。

你可以在Visual jQuery找到全部的事件列表，在Events栏目下.

用这些选择器和事件你已经可以做很多的事情了，但这里有一个更强的好东东！

$(document).ready(function() {



$("#orderedlist").find("li").each(function(i) {



$(this).html( $(this).html() + " BAM! " + i );



});



});

find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li")一样。each()方法迭代了所有的li，并可以在此基础上作更多的处理。大部分的方法,如addClass(), 都可以用它们自己的 each() 。在这个例子中, html()用来获取每个li的html文本, 追加一些文字，并将之设置为li的html文本。（译者Keel注：从这个例子可以看到.html()方法是获取对象的html代码，而.html('xxx')是设置'xxx'为对象的html代码）

另一个经常碰到的任务是在没有被jQuery覆盖的DOM元素上call一些方法，想像一个在你用AJAX方式成功提交后的reset：

$(document).ready(function() {



// use this to reset a single form



$("#reset").click(function() {



$("#form")[0].reset();



});



});

（译者Keel注：这里作者将form的id也写成了form，源文件有

，这是非常不好的写法，你可以将这个ID改成form1或者testForm，然后用$("#form1")或者$("#testForm")来表示它，再进行测试。）

这个代码选择了所有ID为"form"的元素，并在其第一个上call了一个reset()。如果你有一个以上的form，你可以这样做：

$(document).ready(function() {



// use this to reset several forms at once



$("#reset").click(function() {



$("form").each(function() {



this.reset();



});



});



});

（译者Keel注：请注意一定要亲自将这些代码写在custom.js中并在starterkit.html上测试效果才能有所体会！必要时要观察starterkit.html的html代码）

这样你在点击Reset链接后，就选择了文档中所有的form元素，并对它们都执行了一次reset()。

还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的list，你想要选择所有的没有ul子元素的li元素。

$(document).ready(function() {



$("li").not("[ul]").css("border", "1px solid black");



});

这个代码选择了所有的li元素，然后去除了没有ul子元素的li元素。刷新浏览器后，所有的li元素都有了一个边框，只有ul子元素的那个li元素例外。

（译者Keel注：请注意体会方便之极的css()方法，并再次提醒请务必实际测试观察效果，比方说换个CSS样式呢？再加一个CSS样式呢？像这样：$("li").not("[ul]").css("border", "1px solid black").css("color","red");）

上面代码中的[expression] 语法是从XPath而来，可以在子元素和属性(elements and attributes)上用作过滤器，比如你可能想选择所有的带有name属性的链接:

$(document).ready(function() {



$("a[name]").background("#eee"); //原文为“$("a[@name]").background("#eee");”在jQuery1.2及以上版本中,@符号应该去除



});

这个代码给所有带有name属性的链接加了一个背景色。（译者Keel注：这个颜色太不明显了，建议写成$("a[name]").background("red");） [注：在jQuery1.2及以上版本中,@符号应该去除,下文中不再说明]

更常见的情况是以name来选择链接，你可能需要选择一个有特点href属性的链接，这在不同的浏览器下对href的理解可能会不一致，所以我们的部分匹配("*=")的方式来代替完全匹配("=")：

$(document).ready(function() {



$("a[href*=/content/gallery]").click(function() {



// do something with all links that point somewhere to /content/gallery



});



});

到现在为止，选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素，比如一个FAQ的页面，答案首先会隐藏，当问题点击时，答案显示出来，jQuery代码如下：

$(document).ready(function() {



$('#faq').find('dd').hide().end().find('dt').click(function() {



var answer = $(this).next();



if (answer.is(':visible')) {



answer.slideUp();



} else {



answer.slideDown();



}



});



});

这里我们用了一些链式表达法来减少代码量，而且看上去更直观更容易理解。像'#faq' 只选择了一次，利用end()方法，第一次find()方法会结束(undone)，所以我们可以接着在后面继续find('dt')，而不需要再写$('#faq').find('dt')。

在点击事件中的，我们用 $(this).next() 来找到dt下面紧接的一个dd元素，这让我们可以快速地选择在被点击问题下面的答案。

（译者Keel注：这个例子真是太酷了，FAQ中的答案可以收缩！从利用next()的思路到实现这些效果都有很多地方需要我们消化，注意 if (answer.is(':visible'))用法，注意answer.slideUp();不懂的地方赶紧查我在最开始提到的两个必看API文档）

除了选择同级别的元素外，你也可以选择父级的元素。可能你想在用户鼠标移到文章某段的某个链接时，它的父级元素--也就是文章的这一段突出显示，试试这个：

$(document).ready(function() {



$("a").hover(function() {



$(this).parents("p").addClass("highlight");



}, function() {



$(this).parents("p").removeClass("highlight");



});



});

测试效果可以看到，移到文章某段的链接时，它所在的段全用上highlight样式，移走之后又恢复原样。

（译者Keel注：highlight是core.css中定义的样式，你也可以改变它，注意这里有第二个function()这是hover方法的特点，请在API文档中查阅hover，上面也有例子说明）

在我们继续之前我们先来看看这一步： jQuery会让代码变得更短从而更容易理解和维护，下面是$(document).ready(callback)的缩写法：

$(function() {



// code to execute when the DOM is ready



});

应用到我们的Hello world例子中，可以这样:

$(function() {



$("a").click(function() {



alert("Hello world!");



});



});

现在，我们手上有了这些基础的知识，我们可以更进一步的探索其它方面的东西，就从AJAX开始！

本章的相关链接:

Rate me:使用AJAX

在这一部分我们写了一个小小的AJAX应用，它能够rate一些东西（译Keel注：就是对某些东西投票），就像在youtube.com上面看到的一样。

首先我们需要一些服务器端代码，这个例子中用到了一个PHP文件，读取rating参数然后返回rating总数和平均数。看一下rate.php代码.

虽然这些例子也可以不使用AJAX来实现，但显示我们不会那么做，我们用jQuery生成一个DIV容器，ID是"rating".

$(document).ready(function() {



// generate markup



var ratingMarkup = ["Please rate: "];



for(var i=1; i <= 5; i++) {



ratingMarkup[ratingMarkup.length] = "" + i + " ";



}



// add markup to container and applier click handlers to anchors



$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {



e.preventDefault();



// send requests



$.post("rate.php", {rating: $(this).html()}, function(xml) {



// format result



var result = [



"Thanks for rating, current average: ",



$("average", xml).text(),



", number of votes: ",



$("count", xml).text()



];



// output result



$("#rating").html(result.join(''));



} );



});



});

这段代码生成了5个链接，并将它们追加到id为"rating"容器中，当其中一个链接被点击时，该链接标明的分数就会以rating参数形式发送到rate.php，然后，结果将以XML形式会从服务器端传回来，添加到容器中，替代这些链接。

如果你没有一个安装过PHP的webserver，你可以看看这个在线的例子.

不使用javascript实现的例子可以访问 softonic.de 点击 "Kurz bewerten!"

更多的AJAX方法可以从这里找到，或者看看API文档下面的AJAX filed under AJAX.

（译者Keel注：这个在线实例从国内访问还是比较慢的，点击后要等一会儿才能看到结果，可以考虑对它进行修改，比如加上loading，投票后加上再投票的返回链接等。此外，这个例子中还是有很多需要进一步消化的地方，看不懂的地方请参考API文档。）

一个在使用AJAX载入内容时经常发生的问题是：当载入一个事件句柄到一个HTML文档时，还需要在载入内容上应用这些事件，你不得不在内容加载完成后应用这些事件句柄，为了防止代码重复执行，你可能用到如下一个function:

// lets use the shortcut



$(function() {



var addClickHandlers = function() {



$("a.clickMeToLoadContent").click(function() {



$("#target").load(this.href, addClickHandlers);



});



};



addClickHandlers();



});

现在，addClickHandlers只在DOM载入完成后执行一次，这是在用户每次点击具有clickMeToLoadContent 这个样式的链接并且内容加载完成后.

请注意addClickHandlers函数是作为一个局部变量定义的，而不是全局变量(如：function addClickHandlers() {...})，这样做是为了防止与其他的全局变量或者函数相冲突.

另一个常见的问题是关于回调(callback)的参数。你可以通过一个额外的参数指定回调的方法，简单的办法是将这个回调方法包含在一个其它的function中:

// get some data



var foobar = ...;



// specify handler, it needs data as a paramter



var handler = function(data) {



...



};



// add click handler and pass foobar!



$('a').click( function(event) { handler(foobar); } );







// if you need the context of the original handler, use apply:



$('a').click( function(event) { handler.apply(this, [foobar]); } );

用到简单的AJAX后，我们可以认为已经非常之“web2.0”了，但是到现在为止，我们还缺少一些酷炫的效果。下一节将会谈到这些效果.

本章的相关链接:

Animate me(让我生动起来):使用FX

一些动态的效果可以使用 show() 和 hide()来表现:

$(document).ready(function() {



$("a").toggle(function() {



$(".stuff").hide('slow');



}, function() {



$(".stuff").show('fast');



});



});

你可以与 animate()联合起来创建一些效果,如一个带渐显的滑动效果:

$(document).ready(function() {



$("a").toggle(function() {



$(".stuff").animate({



height: 'hide',



opacity: 'hide'



}, 'slow');



}, function() {



$(".stuff").animate({



height: 'show',



opacity: 'show'



}, 'slow');



});



});

很多不错的效果可以访问interface plugin collection. 这个站点提供了很多demos和文档

这些效果插件是位于jQuery插件列表的前面的，当然也有很多其他的插件，比如我们下一章讲到的表格排序插件。

本章的相关链接:

Sort me(将我有序化):使用tablesorter插件(表格排序)

这个表格排序插件能让我们在客户端按某一列进行排序，引入jQuery和这个插件的js文件，然后告诉插件你想要哪个表格拥有排序功能。

要测试这个例子，先在starterkit.html中加上像下面这一行的代码：

然后可以这样调用不着:

$(document).ready(function() {



$("#large").tableSorter();



});

现在点击表格的第一行head区域，你可以看到排序的效果，再次点击会按倒过来的顺序进行排列。

这个表格还可以加一些突出显示的效果，我们可以做这样一个隔行背景色（斑马线）效果:

$(document).ready(function() {



$("#large").tableSorter({



stripingRowClass: ['odd','even'],	// Class names for striping supplyed as a array.



stripRowsOnStartUp: true		// Strip rows on tableSorter init.



});



});

关于这个插件的更多例子和文档可以在 tablesorter首页找到.

几乎所有的特件都是这样用的:先include插件的js文件,然后在某些元素上使用插件定义的方法,当然也有一些参数选项是可以配置的

经常更新的插件列表可以从jQuery官方站 on the jQuery site找到.

当你更经常地使用jQuery时,你会发现将你自己的代码打包成插件是很有用处的,它能方便地让你的公司或者其他人进行重用.下一章我们将谈到如何构建一个自己的插件.

本章的相关链接:

Plug me:制作自己的插件

写一个自己的jQuery插件是非常容易的,如果你按照下面的原则来做,可以让其他人也容易地结合使用你的插件.

为你的插件取一个名字,在这个例子里面我们叫它"foobar".
创建一个像这样的文件:jquery.[yourpluginname].js,比如我们创建一个jquery.foobar.js

创建一个或更多的插件方法,使用继承jQuery对象的方式,如:

jQuery.fn.foobar = function() {

    

    // do something

    

    };

可选的:创建一个用于帮助说明的函数,如:

jQuery.fooBar = {

    

    height: 5,

    

    calculateBar = function() { ... },

    

    checkDependencies = function() { ... }

    

    };

你现在可以在你的插件中使用这些帮助函数了:

jQuery.fn.foobar = function() {

    

    // do something

    

    jQuery.foobar.checkDependencies(value);

    

    // do something else

    

    };

可选的l:创建一个默认的初始参数配置,这些配置也可以由用户自行设定,如:

jQuery.fn.foobar = function(options) {

    

    var settings = {

    

    value: 5,

    

    name: "pete",

    

    bar: 655

    

    };

    

    if(options) {

    

    jQuery.extend(settings, options);

    

    }

    

    };

现在可以无需做任何配置地使用插件了,默认的参数在此时生效:

$("...").foobar();

或者加入这些参数定义:

$("...").foobar({

    

    value: 123,

    

    bar: 9

    

    });

如果你release你的插件, 你还应该提供一些例子和文档,大部分的插件都具备这些良好的参考文档.

现在你应该有了写一个插件的基础,让我们试着用这些知识写一个自己的插件.

很多人试着控制所有的radio或者checkbox是否被选中,比如:

$("input[type='checkbox']").each(function() {



this.checked = true;



// or, to uncheck



this.checked = false;



// or, to toggle



this.checked = !this.checked;



});

注：在jQuery1.2及以上版本中，选择所有checkbox应该使用 input:checkbox , 因此以上代码第一行可写为:
$('input:checkbox').each(function() {

无论何时候，当你的代码出现each时，你应该重写上面的代码来构造一个插件,很直接地:

$.fn.check = function() {



return this.each(function() {



this.checked = true;



});



};

这个插件现在可以这样用:

$('input:checkbox').check();

注：在jQuery1.2及以上版本中，选择所有checkbox应该使用 input:checkbox 原文为：$("input[type='checkbox']").check();

现在你应该还可以写出uncheck()和toggleCheck()了.但是先停一下,让我们的插件接收一些参数.

$.fn.check = function(mode) {



var mode = mode || 'on'; // if mode is undefined, use 'on' as default



return this.each(function() {



switch(mode) {



case 'on':



this.checked = true;



break;



case 'off':



this.checked = false;



break;



case 'toggle':



this.checked = !this.checked;



break;



}



});



};

这里我们设置了默认的参数,所以将"on"参数省略也是可以的,当然也可以加上"on","off", 或 "toggle",如:

$("input[type='checkbox']").check();



$("input[type='checkbox']").check('on');



$("input[type='checkbox']").check('off');



$("input[type='checkbox']").check('toggle');

如果有多于一个的参数设置会稍稍有点复杂,在使用时如果只想设置第二个参数,则要在第一个参数位置写入null.

从上一章的tablesorter插件用法我们可以看到,既可以省略所有参数来使用或者通过一个 key/value 对来重新设置每个参数.

作为一个练习,你可以试着将第四章的功能重写为一个插件.这个插件的骨架应该是像这样的:

$.fn.rateMe = function(options) {



var container = this; // instead of selecting a static container with $("#rating"), we now use the jQuery context







var settings = {



url: "rate.php"



// put more defaults here



// remember to put a comma (",") after each pair, but not after the last one!



};







if(options) { // check if options are present before extending the settings



$.extend(settings, options);



}







// ...



// rest of the code



// ...







return this; // if possible, return "this" to not break the chain



});

Next steps(下一步)

如果你想做更好的javascript开发,建议你使用一个叫 FireBug的firefox插件. 它提供了断点调试(比alert强多了)、观察DOM变化等很多漂亮的功能

如果你还有未解决的问题，或者新的想法与建议，你可以使用jQuery的邮件列表 jQuery mailing list.

关于这个指南的任何事情，你可以写mail给作者或者发表评论在他的日志：blog.

关于这个指南的翻译任何事情，你可以写mail给我.或者在 BLOG中留言.

还有什么...

大大感谢John Resig创造了这么好的library! 感谢jQuery community 为John提供了如此多的咖啡和其他的一切!

中文版翻译:Keel 上次更新:2006-12-13 -- 最后更新: 2009-3-10 访问本站首页

seal 2009-04-17 15:05 发表评论

超强1000个jquery极品插件！（转）

seal — Thu, 16 Apr 2009 04:45:00 GMT

摘要: 花N长时间积累的Jquery插件，希望大家喜欢。大家还有什么新的插件，请留言，我们一并收录。感谢大家的支持。 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ accordion类 ++++++++++++++++++++++++++++++++++++++++++++++++++... 阅读全文

seal 2009-04-16 12:45 发表评论

BlogJava-Sealyu-随笔分类-JQuery

JQuery中常用的Calender和DatePicker组件

1、Full Calendar

3、jQuery Week Calendar

4、jMonthCalendar

5、Date Picker

14个基于jQuery的图片展示和幻灯片插件（转）

导言

1.jQuery Cycle

2.Pikachoose

3.s3Slider

4.Galleria

5.slideViewer

6.Image Flow

7.jQuery Gallery Scroller

8.Spacegallery

9.Easy Slider

10.jFlow

11.Supersized

12.Simple jQuery Slideshow

13.CrossSlide

14.Innerfade

结束

15个使用jQuery实现图片幻灯片效果的JS源码(转)

1，Gallerific

2，ZoomImage

3，EasySlider

4，The Slider from Barack Obama’s website

5，CodaSlider

6，jQuery Slider II

7，Beautiful Slider

８，LoopedSlider

9，SpaceGallery

10，jQuery Popeye

11，Noobslide

12，Accessible News Slider

13，SmoothGallery

14，jQuery Multimedia Portfolio

15，s3Slider

35个夺人眼球的jquery菜单下载（转）

1.jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

2.Animated Menus Using jQuery

3Create a Cool Animated Navigation with CSS and jQuery (Tutorial + Download)

4.jQuery ListNav Plugin

5. jqDock menu

6.Sliding Jquery Menu

7.CSS Sprites 2 – It’s JavaScript Time

8. CSS Mac Dock Menu

9.Kwicks for jQuery

10.Jquery File Tree

11.Learning jQuery: Fading Menu – Replacing Content

12. How to Make a Smooth Animated Menu with jQuery

13.Create Vimeo-like top navigation

14. jQuery (mb)Menu 2.3

15. Coda Slider

16. jQuery idTabs

17. Create a Slick Tabbed Content Area using CSS & jQuery

18. LavaLamp for jQuery lovers!

19. Animated Drop Down Menu with jQuery

20. Using jQuery for Background Image Animations

21. How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

22. Menumatic Mootools

23. jQuery convertion: Garagedoor effect using Javascript

24. Perspective tabs

25. Fisheye Menu

26. Sliding JavaScript Menu Highlight 1kb

27. Mootools Demo Redux

28. HoverAccordion

29. Simple Javascript Accordions

30. UvumiTools Dropdown Menu

31. Create a multilevel Dropdown menu with CSS and improve it via jQuery

32. jQuery & CSS Example – Dropdown Menu

33. Floating menu jQuery&CSS

34. Superfish – jQuery menu plugin

35. JQuery Pager

基于jQuery的facebox使用

jquery和prototype冲突解决 (转)

jquery-validate学习(转)

jQuery密码强度检验插件

用jquery写了一个简单的密码强度测试工具