jQuery教程

在线演示1  在线演示2  本地下载

网站和web开发中我们常常需要处理类似标签添加功能的模块，以前我们也介绍过相关的jQuery插件 - textext，可以方便的添加标签增减和自动补齐相关功能。今天这里我们将使用另外一个非常轻量级的jQuery插件来实现漂亮的标签处理功能，这里我们将使用以前的超酷留言板系统为基础来实现一个完整功能的留言发布系统，希望大家喜欢！

主要使用插件

• jQuery UI - 需要使用到autocomplete功能
  
• jQuery tag handler
• 其它插件请参考文章: 使用jQuery插件开发一个完整验证功能的超酷动态留言版系统

注意：jQuery UI的autocomplete在Firefox下处理中文自动补齐功能有个bug，你需要自己解决，解决方法如下：

找到jQueryUI中的如下代码：

            .bind( "blur.autocomplete", function( event ) {

       …

在线演示  本地下载

大家在网站开发和web应用中常常需要处理图片，因为用户上传的图片往往尺寸大小各不相同，如何能够生成统一尺寸的缩略图往往是让我们头疼的问题，常规的方式基本都是使用后台程序PHP，JSP等处理上传后的图片，针对网站或者应用具体需要来切割指定大小的缩略图。主要问题在于你需要开发对应后台相关程序，并且你一旦指定了缩略图大小后，以后如果希望能够随时修改的话，往往需要对后台代码进行修改，非常麻烦！今天我们将介绍一款超强的jQuery缩略图生成插件 - NailThumb，使用这个插件可以帮助你在前台生成无图像扭曲的缩略图，而且支持前台裁剪，添加图片说明及其动画等功能，相信大家一定会喜欢！

主要特性

• 自动处理图形分别率，不会生成扭曲的图片
• 能够添加缩略图特效
• 支持裁剪
• 方便的添加图片说明

如何使用

导入jQuery类库，插件js和css，如下：

<link rel="stylesheet" href="css/jquery.nailthumb.1.0.min.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script…

在线演示  本地下载

大家有没有尝试使用纯CSS和Javascript来生成带有颜色的元素阴影？如果你也想生成这样超酷的特效的话，大家可以尝试使用这个jQuery插件： real shadow。

使用这个简单的插件，你可以迅速给页面上的特定元素添加阴影效果，最酷的地方在于随着你的鼠标位置，阴影会对应改变的哦！

如何使用？

这个插件的使用非常简答，你只需要倒入jQuery和插件类库，如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/realshadow.js"></script>

然后，使用如下代码：

$('#element').realshadow({
});

即可搞定！是不是很简答？

相关插件参数

这个插件拥有几个简单的选项可以帮助你自定义，如下：

• followMouse：缺省为false，指定阴影是否跟随鼠标移动变化
• pageX：用来产生阴影的光源x坐标 
• pageY：用来产生阴影的光源y坐标 
• c：阴影颜色定义，包括r,…

在线演示1  在线演示2  本地下载

大家在开发过程中往往需要有效的展示不同类别下的图片或者文字内容，这个过程中你可能需要使用不同的标签来过滤不同类别下的图片内容，或者提供给用户一个方便的方式来选择不同的列别。今天我们这里将使用jQuery插件 - filtrify来快速精致的实现一个超酷的摩托车分类展示应用，大家可以看到使用filtrify来使用标签分类显示图片是多么的简单，而且使用isotype来生成动画展示特效，希望大家喜欢！

这个插件使用了很多伪类，例如:after和:before，如果你不熟悉它，可以看看这篇文章，希望对大家有帮助！

注意IE8需要指定!DOCTYPE来支持伪类:after和before中的"content"属性，同时如果你需要支持IE7，你可以考虑使用IE7.js。

HTML代码

在HTML代码中，我们使用HTML5的data属性来定义类别，如下：

<ul id="container">

    <li data-tag="Ducati"><strong>Hypermotard…

在线演示  本地下载

很多的网站或者web应用都需要你填写电子邮件地址，而这个过程中，用户往往会拼写错误的电子邮件域名，今天我们将给大家介绍一款很不错的域名拼写校验插件，帮助你有效的帮助校验用户输入的电子邮件域名拼写错误，这里我们将使用这个插件强化我们以前一篇教程中的例子 - 使用jQuery插件开发一个完整验证功能的超酷动态留言版系统，如果你不了解其它相关的插件使用，请首先阅读那篇文章。

电子邮件域名拼写jQuery验证插件

这个插件要求你配置你需要验证的电子邮件域名，比如：

gbin1@gmail.com

如果用户输入了gbin1@gmail.co，那么这个插件会提示用户输入的email是否为 gbin1@gmail.com。

插件下载：GitHub Repository

插件演示：demo

如何使用这个插件？

导入类库：

<script type="text/javascript" src="js/jquery.mailcheck.js"></script>

主要方法：

$('#mail').on('blur', function() {

  $(this).mailcheck({

…