jQuery is free, open source software, dual-licensed under the MIT License and the GNU General Public License, Version 2. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library.

This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery framework allows the creation of powerful and dynamic web pages and web applications (source: Wikipedia).

jQuery is a “write less, do more” JavaScript library, developers can trust jQuery blindly to produce awesome inspiring effects to get the best results. Here are 15 useful and new  jQuery Plugins which I have handpicked from jQuery articles or plugins published in last couple of months on the blogosphere, I hope you’ll like the latest on jQuery Plugins ..

Super Simple Lightbox with CSS and jQuery

Rather than using a bloated plugin that has features you’ll never use, this tutorial shows you how to create a super simple lightbox for handling images. It’s perfect for image galleries, portfolios, and more!

Demo | Tutorial | Download

Animated Scroll to Top

A detailed tutorial on how to create an animated scroll to top, it is very simple to do with jQuery (just a few lines of code). It checks if the scrollbar top position is greater than certain value, then fade in the scroll to top button. Upon the link is clicked, it scrolls the page to the top.

Demo | Tutorial | Download

Creating a Modern Gallery with Raphael

How to create a modern gallery (with cool animation effect) using Raphael library and jQuery. First of all, check out Raphael website and read the documentation. In this tutorial we will use just a little part of this what Raphael offer.

Demo | Tutorial | Download

Simple Tooltip w/ jQuery & CSS

There are a lot of tooltip plugins out there, but not many of them explain what exactly goes on in the logic of a tooltip. The markup is as simple as possible but at the same time flexible enough to accommodate various scenarios you would run into.

Demo | Tutorial

Circular Content Carousel with jQuery

The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.

Demo | Tutorial | Download

Diagonal Fade

This is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you’re off and away. DiagonalFade is great for inventory or anything with a large amount of items ordered in a grid. diagonalFade has been tested in all modern browser’s with jQuery 1.3.2

Demo & Download

Parallax Slider with jQuery

Making use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.

Demo | Tutorial | Download

Dropdown Login Form

A simple jQuery dropdown login form, it’s easy to implement and lightweight and does everything you need it to. All you have to do is implement and hook it up to your website.

Demo | Download

Smart Wizard

Smart Wizard is a flexible jQuery plug-in for wizard like interface. It allows to group contents into sections and so it saves page space and also gives a neat and stylish interface for users. Using Smart Wizard 2.0 you can easily do input validation and so it is good for user registration and kind of tasks.

Demo | Download

Animated Skills Diagram with Raphaël

how to create a diagram using Raphaël – a small JavaScript library that is great for working with vector graphics. The idea is very simple: we will draw some arcs using mathematical functions and we’ll be displaying a skill percentage in a main circle when we hover over those arcs.

Demo | Tutorial | Download

Expanding Fullscreen Grid Portfolio

A neat experimental portfolio template. The main idea is to have a grid layout that is created with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image. Each item has a little slideshow of thumbs which will be animated to the right position once the portfolio item gets “expanded”.

Demo | Tutorial | Download

Simple Vote Using JQuery Animate

Simple idea to use JQuery animate function in voting system, the idea is just expanding the div element (css width property) using the animate function, we just need to add the same value on the width element.

Demo | Tutorial

Ezoverlay

A self-contained jQuery plugin that enables element and fullscreen overlays, with optional static and dynamic modal content – that virtually eliminates the need for additional html or css code.

Demo | Download

Sliding Boxes and Captions with jQuery

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in this css) that essentially acts as a window where two other items of your choosing “peek” through.

Demo | Tutorial | Download

Triggered Infinite Scroll

This plugin aims to progressively enhance your page. Your navigation/pagination elements should be present in the HTML for non-js users, but the plugin will utilize those links to build out a more rich browsing experience.(Custom trigger, non-automatic. Twitter-style)

Demo | Tutorial

1.Animated Scroll to Top

2.jQuery topLink Plugin

3.Scroll To Top Plugin

4.Disappearing “Scroll to top” link with jQuery and CSS

5.UItoTop jQuery Plugin

6.jQuery Scroll to Top Control v1.1

7.Smooth GoToTop WordPress plugin

jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入漂亮的效果，其中之一就是幻灯片，一种在有限的网页空间内展示系列项目时 非常好的方法。今天要给大家分享的是60款很酷的 jQuery 幻灯片，一起欣赏。

Cloud Carousel (演示 | 下载)

ShineTime (演示 | 下载)

Nivo Slider (演示 | 下载)

Interactive Photo Desk (演示 | 下载)

Beautiful Photo Stack Gallery with jQuery and CSS3 (演示 | 下载)

Micro Image Gallery: A jQuery Plugin (演示 | 下载)

Minimalistic Slideshow Gallery with jQuery (演示 | 下载)

Image Slider with Unique Effects (演示 | 下载)

Create image gallery in 4 lines of jQuery (演示 | 下载)

Slideshow with strip effects (演示 | 下载)

关于测试代码

本文不是使用Dreamweaver编辑，以下测试代码可能已经在赋值粘贴的过程做了一些调整，可能执行失效。可以参看本文的pdf版本。

匹配结尾的数字

来源：如何用 javascript 正则表达式 取出字符串最后一组数字，谢谢

如
30CAC0040 取出40
3SFASDF92 取出92

 正则如下：/\d+$/g

统一空格个数

来源：正则匹配空格的问题

字符串内字符键有空格，但是空格的数量可能不一致，通过正则将空格的个数统一变为一个。

例如：蓝 色  理    想

变成：蓝 色 理 想

aobert的正则：

 <script type="text/javascript">
 var str="蓝 色 理 想"
 var reg=/\s+/g
 str = str.replace(reg," ")
 document.write(str)
 </script>

判断字符串是不是由数字组成

来源：有没有简单的方法判断字符串由数字组成？

这个正则比较简单，写了一个测试

 <script type="text/javascript">
 function isDigit(str){
  var reg = /^\d*$/;
  return reg.test(str);
 }
 var str = "7654321";
 document.write(isDigit(str));
 var str = "test";
 document.write(isDigit(str));
 </script>

电话号码正则

来源：想问一下关于电话号码的正则判断

：求一个验证电话号码的JS正则

 /^\d{3,4}-\d{7,8}(-\d{3,4})?$/

区号必填为3-4位的数字，区号之后用“-”与电话号码连接

 ^\d{3,4}-

电话号码为7-8位的数字

 \d{7,8}

分机号码为3-4位的数字，非必填，但若填写则以“-”与电话号码相连接

 (-\d{3,4})?

手机号码正则表达式

正则验证手机号，忽略前面的0，支持130-139，150-159。忽略前面0之后判断它是11位的。

cloeft的正则：

 /^0*(13|15)\d{9}$/

^0*匹配掉开头任意数量的0。

由于手机号码是13任意数字9位，和15任意数字9位，所以可以用(13|15)\d{9}匹配。

测试代码如下：

 function testReg(reg,str){
  return reg.test(str);
 }
 var reg = /^0*(13|15)\d{9}$/;
 var str = '13889294444';
 var str2 = '12889293333';
 var str3 = '23445567';
 document.write(testReg(reg,str)+'<br />');
 document.write(testReg(reg,str2)+'<br />');
 document.write(testReg(reg,str3)+'<br />');

使用正则表达式实现删除字符串中的空格：

来源：请问js中有没有去掉空格的函数

代码以及测试代码如下：

 <script type="text/javascript">
 //删除字符串两侧的空白字符。
 function trim(str){
  return str.replace(/^\s+|\s+$/g,'');
 }
 //删除字符串左侧的空白字符。
 function ltrim(str){
  return str.replace(/^\s+/g,'');
 }
 //删除字符串右侧的空白字符。
 function rtrim(str){
  return str.replace(/\s+$/g,'');
 }
 //以下为测试代码
 var trimTest = " 123456789 ";
//前后各有一个空格。
 document.write('length:'+trimTest.length+'<br />');
//使用前
 document.write('ltrim length:'+ltrim(trimTest).length+'<br />');
//使用ltrim后
 document.write('rtrim length:'+rtrim(trimTest).length+'<br />');
//使用rtrim后
 document.write('trim length:'+trim(trimTest).length+'<br />');
//使用trim后
 </script>

测试的结果如下：

 length:11
 ltrim length:10
 rtrim length:10
 trim length:9

限制文本框只能输入数字和小数点等等

来源：文本框输入限制的问题？？？？

只能输入数字和小数点

 var reg = /^\d*\.?\d{0,2}$/

开头有若干个数字，中间有0个或者一个小数点，结尾有0到2个数字。

只能输入小写的英文字母和小数点，和冒号，正反斜杠(：./\)

 var reg = /[a-z\.\/\\:]+/;

a-z包括了小写的英文字母，\.是小数点，\/和\\分别是左右反斜线，最后是冒号。整个组成一个字符集和代码任一均可，最后在加上+，1或者多个。

替换小数点前内容为指定内容

来源：求一正则表达式！

请问 怎么把这个字符串的小数点前面的字符替换为我自定义的字符串啊？
例如：infomarket.php?id=197 替换为 test.php?id=197
应该可以把第一个点“.”之前的所有单词字符替换为test就可以了。我写的正则如下：

 <script type="text/javascript">
 var str = "infomarket.php?id=197";
 var reg = /^\w*/ig;
 //匹配字符串开头的任意个单词字符
 str = str.replace(reg,'test');
 document.write(str);
 </script>

原帖的有点复杂，没太看明白。

只匹配中文的正则表达式

来源：关于上传的时候，只能选择中文名称的图片（是否可以用toASCII方法呢？）

前两天看的《JavaScript开发王》里恰好有中文的unicode范围，正则如下：

 /[\u4E00-\u9FA5\uf900-\ufa2d]/

写了一个简单的测试，会把所有的中文替换成“哦”。

 <script type="text/javascript">
 var str = "有中文?and English.";
 var reg = /[\u4E00-\u9FA5\uf900-\ufa2d]/ig;
 str = str.replace(reg,'哦');
 document.write(str);
 </script>

返回字符串的中文字符个数

来源：有没返回中文字符字节的函数！

一般的字符长度对中文和英文都是不分别的 如JS里的length，那么如何返回字符串中中文字符的个数呢？guoshuang老师在原帖中给出了解决方案，我又没看懂……

不过我自己也想到了一个办法：先去掉非中文字符，再返回length属性。函数以及测试代码如下：

 <script type="text/javascript">
 function cLength(str){
  var reg = /[^\u4E00-\u9FA5\uf900-\ufa2d]/g;
  //匹配非中文的正则表达式
  var temp = str.replace(reg,'');
  return temp.length;
 }
 var str = "中文123";
 document.write(str.length+'<br />');
 document.write(cLength(str));
 </script>

结果：

 5
 2

中文两个，数字三个，正确。

下面的测试也正确。

 var str = "中文123tets@#!#%$#[][{}";
 document.write(str.length+'<br />');
 document.write(cLength(str));

正则表达式取得匹配IP地址前三段

来源：如何用正则取IP前3段

192.168.118.101，192.168.118.72, 192.168.118.1都替换成：192.168.118

只要匹配掉最后一段并且替换为空字符串就行了，正则如下：

 /\.\d{1,3}$/

匹配结尾的.n,.nn或者.nnn。

测试代码如下：

 function replaceReg(reg,str){
  return str.replace(reg,'')
 }
 var reg = /\.\d{1,3}$/;
 var str = '192.168.118.101';
 var str2 = '192.168.118.72';
 var str3 = '192.168.118.1';
 document.write(replaceReg(reg,str)+'<br />');
 document.write(replaceReg(reg,str2)+'<br />');
 document.write(replaceReg(reg,str3)+'<br />');

相似的有，这个帖子里有一个验证IP地址的方法：求检验MAC地址的正则表达例子

匹配<ul>与<ul>之间的内容

来源：请教个正则的小问题吧
<ul>safsf<ul>safsf</ul><ul>safsf</ul></ul>

用正则可以得到 <ul>起到下个<ul> 之间的内容。

正则如下：

 /<ul>[\s\S]+?<ul>/i

首先匹配两侧的ul标签，中间的[\s\S]+?可以匹配一个或者多个任意字符，一定要非贪婪，否则会匹配<ul>safsf<ul>safsf</ul><ul>。

用正则表达式获得文件名

来源：C:\006.jpg

c:\images\tupian\006.jpg

可能是直接在盘符根目录下，也可能在好几层目录下，要求替换到只剩文件名。

xlez的正则如下：

 /[^\\\/]*[\\\/]+/g

首先匹配非左右斜线字符0或多个，然后是左右斜线一个或者多个。形如“xxx/”或者“xxx\”或者“/”或者“\”

函数以及测试代码：

 <script type="text/javascript">
 function getFileName(str){
  var reg = /[^\\\/]*[\\\/]+/g;
  //xxx\或者是xxx/
  str = str.replace(reg,'');
  return str;
 }
 var str = "c:\\images\\tupian\\006.jpg";
 document.write(getFileName(str)+'<br />');
 var str2 = "c:/images/tupian/test2.jpg";
 document.write(getFileName(str2));
 </script>

注意，\需要转义。

绝对路径变相对路径

来源：讨论一个正则

将<IMG height="120" width="800" src="http://23.123.22.12/image/somepic.gif">转换为：<IMG height="120" width="800" src="/image/somepic.gif">。

其中网址可能改变，例如http://localhost等等。

cloudchen的正则：

 /http:\/\/[^\/]+/

首先是http://，然后[^\/]+找过1个或者多个非/字符，因为遇到第一个/表示已经到目录了，停止匹配。

测试代码如下：

 <script type="text/javascript">
 var str = '<IMG height="120" width="800" \
src="http://23.123.22.12/image/somepic.gif">';
 var reg = /http:\/\/[^\/]+/;
 str = str.replace(reg,"");
 alert(str)
 </script>

用户名正则

来源：求正则，急急呀！！

用于用户名注册，，用户名只 能用 中文、英文、数字、下划线、4-16个字符。

hansir和解决方案弄成正则：

 /^[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/

中文字符或者单词字符，4到16个。实现4到16结成到正则里的关键就是开始^和结束$，这就等于整个字符串只能有这些匹配的内容，不能有多余的。

函数和测试代码如下：

 <script type="text/javascript">
 function isEmail(str){
  var reg = /^[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/;
   return reg.test(str);
 }
 var str = '超级无敌用户名regExp';
 var str2 = '捣乱的@';
 var str3 = '太短'
 var str4 = '太长longlonglonglonglonglonglonglong'
 document.write(isEmail(str)+'<br />');
 document.write(isEmail(str2)+'<br />');
 document.write(isEmail(str3)+'<br />');
 document.write(isEmail(str4)+'<br />');
 </script>

匹配英文地址

来源：-求助- 正则问题

规则如下:
包含 "点", "字母","空格","逗号","数字"，但开头和结尾不能是除字母外任何字符。

[\.a-zA-Z\s,0-9]这个字符集就实现了字母，空格，逗号和数字。最终正则如下：

 /^[a-zA-Z][\.a-zA-Z\s,0-9]*?[a-zA-Z]+$/

开头必须有字母，结束也必须是一个以上字母。测试代码如下：

 <script type="text/javascript">
 function testReg(reg,str){
  return reg.test(str);
 }
 var reg = /^[a-zA-Z][\.a-zA-Z\s,0-9]*?[a-zA-Z]+$/;
 var str = 'No.8,ChangAn Street,BeiJing,China';
 var str2 = '8.No,ChangAn Street,BeiJing,China';
 var str3 = 'No.8,ChangAn Street,BeiJing,China88';
 document.write(testReg(reg,str)+'<br />')
 document.write(testReg(reg,str2)+'<br />')
 document.write(testReg(reg,str3)+'<br />')
 </script>

正则匹配价格

来源：为什么这个正则不起作用啊？急啊？

价格的格式应该如下：

开头数字若干位，可能有一个小数点，小数点后面可以有两位数字。hansir给出的对应正则如下：

 /^(\d*\.\d{0,2}|\d+).*$/

hansir给出的测试代码如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>无标题文档</title>
 <script type="text/javascript">
 function checkPrice(me){
  if(!(/^(?:\d+|\d+\.\d{0,2})$/.test(me.value))){
  me.value = me.value.replace(/^(\d*\.\d{0,2}|\d+).*$/,'$1');
  }
 }
 </script>
 </head>
 <body>
 <input type="text" onkeyup="checkPrice(this);"/>
 </body>
 </html>

身份证号码的匹配

来源：关于正则的,大家帮帮忙,急,在线等

身份证号码可以是15位或者是18位，其中最后一位可以是X。其它全是数字，正则如下：

 /^(\d{14}|\d{17})(\d|[xX])$/

开头是14位或者17位数字，结尾可以是数字或者是x或者是X。

测试代码如下：

 <script type="text/javascript">
 function testReg(reg,str){
  return reg.test(str);
 }
 var reg = /^(\d{14}|\d{17})(\d|[xX])$/;
 var str = '123456789012345';//15位
 var str2 = '123456789012345678';//18位
 var str3 = '12345678901234567X';//最后一位是X
 var str4 = '1234';//位数不对
 document.write(testReg(reg,str)+'<br />');
 document.write(testReg(reg,str2)+'<br />');
 document.write(testReg(reg,str3)+'<br />');
 document.write(testReg(reg,str4)+'<br />');
 </script>

要求文本有指定行数

来源：[求助]求一句正则表达式的写法

匹配至少两行的字符串，每行都为非空字符。

只要匹配到[\n\r]就表示有换行了，再保证换行的两段都不是空字符就可以了。正则如下：

 /\S+?[\n\r]\S+?/i

这个正则的应用应该是用在textarea里，如果是如下要求：可以支持所有字符，中间可带空格，可以包括英文、数字、中文、标点

这样的话，只要针对空格再改一下就行了。（按照非空的要求，上面有不能匹配“字符+空格+换行+字符”的字符串）。修改如下：

 /\S+?\s*?[\n\r]\s*?\S+?/i

单词首字母大写

来源：求个正则，处理英文单词或词组的

每单词首字大写，其他小写。如blue idea转换为Blue Idea，BLUE IDEA也转换为Blue Idea

cloeft的正则：

 /\b(\w)|\s(\w)/g

所谓“首字母”包括两种情况：第一种是边界(开头)的单词字符，一种是空格之后的新单词的第一个字母。测试代码如下：

 <script type="text/javascript">
 function replaceReg(reg,str){
  str = str.toLowerCase();
  return str.replace(reg,function(m){return m.toUpperCase()})
 }
 var reg = /\b(\w)|\s(\w)/g;
 var str = 'blue idea';
 var str2 = 'BLUE IDEA';
 var str3 = 'Test \n str is no good!';
 var str4 = 'final test';
 document.write(replaceReg(reg,str)+'<br />');
 document.write(replaceReg(reg,str2)+'<br />');
 document.write(replaceReg(reg,str3)+'<br />');
 document.write(replaceReg(reg,str4)+'<br />');
 </script>

正则验证日期格式

来源：yyyy-mm-dd的正则怎样写啊？

yyyy-mm-dd格式

正则如下：

 /^\d{4}-\d{1,2}-\d{1,2}$/

4位数字，横线，1或者2位数字，再横线，最后又是1或者2位数字。

测试代码如下：

 <script type="text/javascript">
 function testReg(reg,str){
  return reg.test(str);
 }
 var reg = /^\d{4}-\d{1,2}-\d{1,2}$/;
 var str = '2008-8-8';
 var str2 = '2008-08-08';
 var str3 = '08-08-2008';
 var str4 = '2008 08 08';
 document.write(testReg(reg,str)+'<br />');
 document.write(testReg(reg,str2)+'<br />');
 document.write(testReg(reg,str3)+'<br />');
 document.write(testReg(reg,str4)+'<br />');
 </script>

第二种格式：来源：求一正则表达式
yyyy-mm-dd
或
yyyy/mm/dd

用“或”简单地修改一下就行了。

 /^\d{4}(-|\/)\d{1,2}(-|\/)\d{1,2}$/

去掉文件的后缀名

来源：求一个正则

www.abc.com/dc/fda.asp变为www.abc.com/dc/fda

如果文件后缀已知的话这个问题就非常简单了，正则如下：

 /\.asp$/

匹配最后的.asp而已，测试代码如下：

 <script type="text/javascript">
 function delAspExtension(str){
  var reg = /\.asp$/;
  return str.replace(reg,'');
 }
 var str = 'www.abc.com/dc/fda.asp';
 document.write(delAspExtension(str)+'<br />');
 </script>

如果文件名未知的话就用这个正则：/\.\w+$/，测试代码如下：

 <script type="text/javascript">
 function delExtension(str){
  var reg = /\.\w+$/;
  return str.replace(reg,'');
 }
 var str = 'example.com/dc/fda.asp';
 document.write(delExtension(str)+'<br />');
 var str2 = 'test/regular/fda.do';
 document.write(delExtension(str2)+'<br />');
 var str3 = 'example.com/dc/fda.strange_extension';
 document.write(delExtension(str3)+'<br />');
 </script>

验证邮箱的正则表达式

来源：找javascript写的表单检查代码！

fuchangxi的正则：

 /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

开始必须是一个或者多个单词字符或者是-，加上@，然后又是一个或者多个单词字符或者是-。然后是点“.”和单词字符和-的组合，可以有一个或者多个组合。

 <script type="text/javascript">
 function isEmail(str){
  var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
  return reg.test(str);
 }
 var str = 'test@hotmail.com';
 document.write(isEmail(str)+'<br />');
 var str2 = 'test@sima.vip.com';
 document.write(isEmail(str2)+'<br />');
 var str3 = 'te-st@qq.com.cn';
 document.write(isEmail(str3)+'<br />');
 var str4 = 'te_st@sima.vip.com';
 document.write(isEmail(str4)+'<br />');
 var str5 = 'te.._st@sima.vip.com';
 document.write(isEmail(str5)+'<br />');
 </script>

我不太了解邮箱的具体规则。感觉这个正则比较简单，EMAIL校验 正则 讨论 求解里有比较详细的邮箱正则讨论。

匹配源代码中的链接

来源：正则

能够匹配HTML代码中链接的正则。

原帖正则：

/<a href=".+?">.+?<\/a>/g

感觉有点严格，首先要<a href="".+?">有，而且href属性可以是一个或者多个除换行外任意字符(非贪婪)。后面是.+?<\/a>，一个或者多个除换行外任意字符（非贪婪），再加上结束标签。

有个问题，如果a的起始标签最后有空格，或者除了href还有其它属性的话，上面的正则就不能匹配这个链接了。

例如：

<a href="asdfs" >……多了个空格。

<a id="xx" href=""asdfs">……前面有属性。

……

重写正则：

/<a\s(\s*\w*?=".+?")*(\s*href=".+?")(\s*\w*?=".+?")*\s*>[\s\S]*?<\/a>/

思路如下：首先要有<a和一个空格。/<a\s/

第一个(\s*\w*?=".+?")*

可以匹配一个属性，属性前面可能有或者没有多余的空格，用\s*匹配；属性名肯定是单词字符，用\w*?匹配；=".+?"就是匹配属性值了非换行字符若干个；整个括号外面加个*表示可能有任意多个属性。

(\s*href=".+?")

匹配href，它也是一个属性，所以只要把上面子正则表达式中的\w修改为href=就行了。

(\s*\w*?=".+?")*重复第一个子正则表达式，再次接受任意个属性。

\s*>，属性最后再加上若干个空格和>。

[\s\S]*?，链接的文字，可能有任何字符组成，若干个，非贪婪。

<\/a>最后是结束标签。

补充：属性名和=之间，以及=和属性值之间也可能有空格。所以要再加上几个\s*。

最后的实例代码如下：

 <script type="text/javascript">
 function findLinks(str){
  var reg = /<a\s(\s*\w*?\s*=\s*".+?")*(\s*href\s*=\s*".+?")(\s*\w*?\s*=\s*".+?")
 *\s*>[\s\S]*?<\/a>/g;
  var arr = str.match(reg);
  for(var i=0;i<arr.length;i++){
  //alert(arr[i]);
  document.write('link:'+arr[i]+'<br />');
  }
 }
 var str = '<p>测试链接：<a id = "test" href="http://bbs.blueidea.com" title="无敌">经典论坛
 </a></p><a? href = "http://www.blueidea.com/"? >蓝色理想</a>';
 var arr = findLinks(str);
 </script>

会把所有的链接在页面直接显示出来。注意，

本帖遗留问题：如何执行从右到左的匹配。貌似JS或者VBS没有提供这个功能2、JS或者VBS不支持 后行断言。。用什么方法实现这个功能。

匹配链接的文字

来源：求一正则?

代码：<a href="#>这里要保存</a>，只保存链接的文本内容，标签信息删掉。

前面写过一个匹配链接的正则：

 /<a\s(\s*\w*?=".+?")*(\s*href=".+?")(\s*\w*?=".+?")*\s*>[\s\S]*?<\/a>/

不过我们需要捕获的是文字内容，所以需要做一定的修改。第一步就是在所有的括号内都加上?:表示不捕获。第二步就是再多加一个括号放在[\s\S]*?两侧，这样就可以捕获到链接的文字内容了。最后正则如下：

 /<a\s(?:\s*\w*?\s*=\s*".+?")*(?:\s*href\s*=\s*".+?")(?:\s*\w*?\s*=\s*".+?")*\s*>([\s\S]*?)<\/a>/

测试代码如下：

 <script type="text/javascript">
 function anchorText(str){
  var reg =/<a\s(?:\s*\w*?\s*=\s*".+?")*(?:\s*href\s*=\s*".+?")(?:\s*\w*?\s*=\s*".+?")*\s*> 

 ([\s\S]*?)<\/a>/;
  str = str.replace(reg,'$1');
  return str;
 }
 var str = '<a id = "test" href="http://bbs.blueidea.com" title="无敌">经典论坛</a>';
 document.write(anchorText(str));
 </script>

正则判断标签是否闭合

来源：求助 超难！正则表达式如何判断一个标签是否闭合

例如：<img xxx=”xxx” 就是没有闭合的标签；

<p>p的内容，同样也是没闭合的标签。

从简单的正则开始，先匹配起始标签

 /<[a-z]+/i

再加上若干属性：

 /<[a-z]+(\s*\w*?\s*=\s*".+?")*/i

下面就到关键点了，标签的闭合。标签可能有两种方式闭合，<img xxx=”xxx” />

或者是<p>xxx </p>。

(\s*\/>)

匹配img类的结束，即/>。

(\s*?>[\s\S]*?<\/\1>)

匹配\p类标签的结束标签。>是其实标签末尾，之后是标签内容若干个任意字符，最后的<\/\1>就是结束标签了。

加上一个或就可以解决了，最后的完整正则表达式：

整个正则：

/<([a-z]+)(\s*\w*?\s*=\s*".+?")*(\s*?>[\s\S]*?<\/\1>|\s*\/>)/i

拿这个正则，只要匹配到了就表示闭合，没匹配到则没有闭合。不过没有考虑相同标签嵌套的问题，例如

<div>aaaaaa<div>test</div>

也被判断为合格，可以通过把最后的匹配p类结束标签写成子正则表达式，并且更改为非贪心，然后在匹配结果中检查是否成对。正则如下：

 /<([a-z]+)(\s*\w*?\s*=\s*".+?")*(\s*?>[\s\S]*?(<\/\1>)+|\s*\/>)/i

用正则获得指定标签的内容

来源：求一正则

有如下代码：

 <channel>
   <title>蓝色理想</title>
 </channel>
 <item>
   <title>界面设计测试规范</title>
 </item>
 <item>
     <title>《古典写实美女》漫画教程</title>
 </item>
 <item>
     <title>安远――消失的光年</title>
 </item>
 <item>
     <title>asp.net 2.0多语言网站解决方案</title>
 </item>

要求匹配item里的title而不匹配channel里的title。

基本正则：

 /<title>[\s\S]*?<\/title>/gi

首先是title标签，内容为任意字符若干个，然后是title结束标签。这个正则已经能匹配到所有的title标签。

首先，我简单地修改了一下原正则：

 /<title>[^<>]*?<\/title>/gi，

因为title里面不应该再嵌有其它标签，这个正则同样是匹配所有标题的内容，最后再加上不去匹配channel中的title。整个正则如下：

 /<title>[^<>]*?<\/title>(?!\s*<\/channel>)/gi

(?!\s*<\/channel>)表示要匹配字符串的后面不能跟着若干个空格和一个channel的结束标签。

原帖里有很方便的测试工具，这里就不给测试代码了。

正则判断是否为数字与字母的混合

来源：关于正则

不能小于12位，且必须为字母和数字的混合。

验证字符串包含数字简单，验证字符串包含字母也简单，验证字符串不包含其它字符也简单，可以用这三个正则分别检查一次字符串，逻辑运算出最终结果。

但是怎么能把这些功能写进一个正则表达式里呢？这个问题真有点伤脑筋。

下面是lexrus的正则：

 /^([a-z]+(?=[0-9])|[0-9]+(?=[a-z]))[a-z0-9]+$/ig

思路非常的清晰啊：

[a-z]+(?=[0-9])

字母开头，后面必须紧跟着数字。

[0-9]+(?=[a-z]

数字开头，后面必须紧跟着字母。

[a-z0-9]+

后面的字符只要是数字或者字母就可以了。经过测试，发现不好使，123dd会被识别为不合法，dd123则为合法，可见“数字开头，紧跟字母”的正则没有起作用。测试代码如下：

 <script type="text/javascript">
 function istrue(str){
 var reg=/^([a-z]+(?=[0-9])|[0-9]+(?=[a-z]))[a-z0-9]+$/ig;
 return reg.test(str);
 }
 var str? = 'AaBc';
 var str2 = 'aaa123';
 var str3 = '123dd';
 var str4 = '1230923403982';
 document.write(istrue(str)+'<br />');
 document.write(istrue(str2)+'<br />');
 document.write(istrue(str3)+'<br />');
 document.write(istrue(str4)+'<br />');
 </script>

结果为：

false，true，false，false

结果中的第三个，将'123dd'判断为非法是错误的。刚开始以为是g的问题，去掉了还是不好使。应该是浏览器bug，我认为lexrus的正则是正确的，可能是浏览器无法处理或”|”的两边都包含正向预查(?=)。

修改之后的正则如下：

 /^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i

意思和上面差不多，但是没有使用正向预查，测试代码如下：

 <script type="text/javascript">
 function istrue(str){
 var reg=/^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i;
 return reg.test(str);
 }
 var str? = 'AaBc';
 var str2 = 'aaa123';
 var str3 = '123dd';
 var str4 = '1230923403982';
 document.write(istrue(str)+'<br />');
 document.write(istrue(str2)+'<br />');
 document.write(istrue(str3)+'<br />');
 document.write(istrue(str4)+'<br />');
 </script>

结果为

false，true，true，false

正确。

空格与英文同时存在

来源：正则问题请指教啊！

匹配英文以及空格，要求必须既有英文字母又有空格。

这个思路和上面的差不多，只要把数字改成空格就可以了。正则如下：

 /^(([a-z]+\s+)|(\s+[a-z]+))[a-z\s]*$/i

英文开头加空格，或者是空格开头加英文，后面可以是英文或者空格。测试代码如下：

 <script type="text/javascript">
 function istrue(str){
 var reg=/^(([a-z]+\s+)|(\s+[a-z]+))[a-z\s]*$/i;
 return reg.test(str);
 }
 var str? = 'asdf';
 var str2 = 'sadf sdf';
 var str3 = 'asdf ';
 document.write(istrue(str)+'<br />');
 document.write(istrue(str2)+'<br />');
 document.write(istrue(str3)+'<br />');
 </script>

利用这个思路也可以实现英文空格英文，英文单词多于两个的匹配。同样，也可以把英文字母换成单词字符\w。

显示或者保存正则表达式匹配的部分内容

有如下电话号码：

13588888333
13658447322
13558885354
13587774654
13854554786

要求，要求只匹配135开头的电话，但是匹配结果只保留135后面的数字。

由于JavaScript里的正则不支持(?=xx)xxx的模式，只支持xxx(?=xx)的模式。所以只能将135后面的内容作为一个子正则表达式匹配的内容，然后再在后面引用。

 Carl给出的函数如下：
 function f(phoneNumber) {
   var pattern = /^(135)(\d{8})$/;
     if(pattern.test(phoneNumber))
  return phoneNumber.replace(pattern,"$2");
   else
  return "不是135打头的手机号码！";
 }
 /^(135)(\d{8})$/

正则中，135作为开头表示第一个子正则表达式，第二个括号内的子正则表达式则匹配后面的8个数字，然后在replace中使用$2就可以引用这个子正则表达式匹配的内容了。测试代码如下：

 <script type="text/javascript">
 function f(phoneNumber) {
   var pattern = /^(135)(\d{8})$/;
   if(pattern.test(phoneNumber))
  return phoneNumber.replace(pattern,"$2");
   else
  return "不是135打头的手机号码！";
 }
 var arr = new Array(
   "13588888333",
   "13658447322",
   "13558885354",
   "13587774654",
   "13854554786"
 );
 for(var i = 0; i < arr.length; i++)
   document.write(f(arr[i])+'<br />');
 </script>

正则表达式替换变量

来源：求教正则

有一个数组：

var _A = ['A','B','C','D'];

有一个有“变量”的字符串。

var _B = '<ul><li>$0$</li><li>$1$</li><li>$2$</li><li>$3$</li></ul>';

说是变量，其实只是字符串中的特殊字符，例如$0$，就称这个为伪变量吧。

最后的要求就是使用正则获得下面这样一个字符串：

_C = '<ul><li>A</li><li>B</li><li>C</li><li>D</li></ul>';

IamUE给出了代码：

 <script type="text/javascript">
 var _A = ['A','B','C','D'];
 var _B = '<ul><li>$0$</li><li>$1$</li><li>$2$</li><li>$3$</li></ul>';
 var reg=/\$\d+\$/ig;
 C=_B.replace(reg,function($1){
 var indexnum=$1.replace(/\$/ig,"");
 if (indexnum<_A.length)
 {return _A[indexnum];}
 else{return ""}
 });
 alert(C);
 </script>

代码分析：看到代码之后感觉有点晕，首先，正则reg中没有任何的括号，应该是没有捕获内容的，那么后面怎么又使用$1了引用了呢？通过alert测试，发现它是整个正则匹配的内容，而且不一定要写作$1，可以写为$0，甚至是写为x都没关系，它总是整个匹配。

第一次，$1匹配到_B中的“$0$”，匿名函数中将它的$去掉，变成了0，检查是否越界之后，用这个0作为下标去访问数组_A。

由于正则reg定义了g属性，所以会继续替换$1$、$2$等等。步骤都和上面一样。

正则替换指定属性中的文本

来源：怎样用正则来查找替换？

有如下代码：

<td align="center"><img src="../photo/ccg/thumbnails/O'Malley's West_jpg.gif" border="0" onClick="MM_openBrWindow('../photo/ccg/pages/O'Malley's West_jpg.htm','BE','width=386,height=306')"><br>
O'Malley's West</td>

要求将所有onclick属性中的’替换成\’，也就是将单引号转义。

首先，需要匹配onclick属性：

 /onclick\s*=\s*".+?"/ig

然后再将所有的’都替换成\’就可以了。

将阿拉伯数字替换为中文大写形式

来源：正则问题

将123替换成壹贰叁。

只要匹配一个数字就可以了，测试代码如下（如果显示为乱码就调整一下浏览器的字符编码）：

 function replaceReg(reg,str){
  return str.replace(reg,function(m){return arr[m];})
 }
 arr=new Array("零","壹","贰","叁","肆","伍","陆","柒","捌","玖");
 var reg = /\d/g;
 var str = '13889294444';
 var str2 = '12889293333';
 var str3 = '23445567';
 document.write(replaceReg(reg,str)+'<br />');
 document.write(replaceReg(reg,str2)+'<br />');
 document.write(replaceReg(reg,str3)+'<br />');

替换文本中的URL为链接

来源：求一链接替换正则

将一个用户输入的一段文字中的url替换成可以点击的link地址。例如：http://www.blueidea.com可以替换成 [url]http://www.cctv.com[/url]

或<a href="http://www.cctv.com">http://www. blueidea.com</a>.

这个正则的关键就在于匹配链接，匹配之后，在两边加上a标签和属性不是问题。

 /http:\/\/[\w-]*(\.[\w-]*)+/ig

首先匹配http://。

[\w-]*是可能的www和bbs等。

\.[\w-]*匹配.xxx形式，至少有一个。

测试代码如下：

 <script type="text/javascript">
 function replaceReg(reg,str){
  return str.replace(reg,function(m){return '<a href="'+m+'">'+m+'</a>';})
 }
 var reg = /http:\/\/[\w-]*(\.[\w-]*)+/ig;
 var str = '将一个用户输入的一段文字中的url替换成可以点击的link地址。\
测试一下：http://www.blueidea.com紧接着中文，还有http://bbs.blueidea.com \
is very good!http://blueidea.com!最后在看看带.cn的：http://www.sina.com.cn呵呵。';
 document.write(replaceReg(reg,str)+'<br />');
 </script>

从HTML代码段删除指定标签极其内容

来源：关于正则的问题

在一段代码中去除<script ...... /script>, <head>...</head>,<%.....%>等代码块

隆的正则：

 /<(script|meta|%)[\s\S]*?\/(script|meta|%)>/

试了一下，匹配如下文本正常：

 <script type="text/javascript">
 我是要被删除的脚本
 </script>
 哎。就剩下我了。

但是，如果使用类似的正则：

 /<(script|head|%)[\s\S]*?\/(script|head|%)>/ig

匹配有嵌套的标签：

 <head>
 <script type="text/javascript">
 我是要被删除的脚本
 </script>
 </head>
 哎。就剩下我了。

实际匹配的内容是：

 <head>
 <script type="text/javascript">
 我是要被删除的脚本
 </script>

这是因为[\s\S]*?里的非贪婪造成的。可以使用JavaScript正则里的反向引用来解决这个问题，如果起始标签匹配了head，那么结束标签也必须是head。最后的正则如下：

 /<(script|head|%)[\s\S]*?\/\1>/ig

用正则给文本分段

来源：怎样用正则分段落

原代码：[title]标题一[/title]内容一232323sdfga [title]标题二[/title]内容二2232323 [title]标题三[/title]内容三2232323

要把文本分段成如下格式：
一、[title]标题一[/title]内容一232323sdfga
二、[title]标题二[/title]内容二2232323
三、[title]标题三[/title]内容三2232323

只要用正则匹配title就可以了，所以正则比较简单

 /\[title\]/ig

至于开始的的汉字序号，只要一个数组就解决了，最终代码如下：

 <script type="text/javascript">
 function replaceReg(reg,str){
  var mark =0;
  return str.replace(reg,function(m){mark++;return '<br />'+arr[mark]+'、'+m;})
 }
 var arr = ["零","壹","贰","叁","肆","伍","陆","柒","捌","玖"];
 var reg = /\[title\]/ig;
 var str = '[title]标题一[/title]内容一232323sdfga \
[title]标题二[/title]内容二2232323 [title]标题三[/title]内容三2232323';
 document.write(replaceReg(reg,str)+'<br />');
 </script>

转换源代码中的标签

来源：一个正则上的问题

将代码中的HTML标签img转换为[img]url[/img]。

/<img(?:\s*\w*?\s*=\s*".+?")*?\s*src\s*=\s*"(.+?)"(?:\s*\w*?\s*=\s*".+?")*\s*>/ig

这段正则和匹配链接标签的正则基本一样，修改如下,标签名img，没有结束标签而是>结束。

测试代码如下：

 <script type="text/javascript">
 function replaceReg(reg,str){
  return str.replace(reg,'[img]$1[/img]')
 }
 var reg =
/<img(?:\s*\w*?\s*=\s*".+?")*?\s*src\s*=\s*"(.+?)"(?:\s*\w*?\s*=\s*".+?")*\s*>/ig;
 var str = '我就是传说中的图片了<img src="URL">哎。';
 document.write(replaceReg(reg,str)+'<br />');
 </script>

第二个是替换object代码嵌入的flash代码替换为[swf]url[/swf]。

针对原文的正则如下：

 /<object[\s\S]*?src=([\s\S]+?)(?=\s)[\s\S]*<\/object>/i

如果是所有的属性都有双引号的话正则也需要修改。

测试如下：

 <script type="text/javascript">
 function replaceReg(reg,str){
  return str.replace(reg,'[swf]$1[/swf]')
 }
 var reg = /<object[\s\S]*?src=([\s\S]+?)(?=\s)[\s\S]*<\/object>/i;
 var str = '<object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 \
codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/\
swflash.cab#version=5,0,0,0 width=255 height=250><param name=movie \
value=url><param name=quality value=high><embed src=url quality=high \
pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?\
P1_Prod_Version=ShockwaveFlash type=application/x-shockwave-flash \
width=255 height=250></embed></object>';
 document.write(replaceReg(reg,str)+'<br />');
 </script>

给属性添加双引号

来源：请教正则表达式高手

给HTML标签中的属性添加双引号。

<a href=xxx>改为：<a href="xxx">

LeXRus的第一个正则如下：

 /(?!\<\w+)(\s+\w+)\=([^>\"\s]+)/ig

第一个括号没看明白，JS应该是不支持。所以我擅自给删掉了，剩下的正则如下：

 /(\s+\w+)\=([^>\"\s]+)/ig

第一个括号里的\s+\w+匹配的是属性名。

然后是=，不用转义。

第二个括号里的[^>\"\s]+匹配属性值。不匹配>”和空格。这里的引号不用转义。在意思不改变的情况下，稍微改了改，正则如下：

 /(\s+\w+)=([^>"\s]+)/ig

需要注意的是这个正则不匹配=两边有空格的属性，例如href = xxx。相匹配的话就改成：

 /(\s+\w+)\s*=\s*([^>"\s]+)/ig

代码：

 str=str.replace(/(?!\<\w+)(\s+\w+)\=([^>\"\s]+)/ig,'$1="$2"');

其中’$1=”$2”’就实现了给属性值添加上双引号。不过ncs指出了这个正则替换的几个问题，一是上面的空格问题，二是如果非标签内部有等号，且前面又恰巧有空白字符的话，它将会被误识别为属性，例如：

<a href=xxx target=yyy title = asdfasf> test=sd

里面的test=sd也会被匹配。三是如果属性原来使用了单引号，会被再包上一层双引号……

来看看LeXRus前辈的新正则替换方法：

 str=str.replace(/(?!<\w+)(\s+\w+)\s*=\s*([^>\"\s]+)(?=[^>]*>)/ig,'$1="$2"')
.replace(/\"\'([^\'\"]+)\'\"/ig,'\"$1\"');

先来看第一个正则：

 / (\s+\w+)\s*=\s*([^>"\s]+)(?=[^>]*>)/ig

结尾新添的(?=[^>]*>)意在解决普通文本中有等号被误识别为属性的问题：

<a href=xxx target=yyy title = asdfasf> test=sd

就没问题了，但是

<a href=xxx target=yyy title = asdfasf> test=sd<tag>又一个标签</tag>

中的test=sd<tag>又会被识别为属性。

我觉得改成下面的正则就没问题了：

 /(\s+\w+)\s*=\s*([^<>"\s]+)(?=[^<>]*>)/ig

分别在第二个括号的字符集合和最后的反向预查的字符集合中添加了一个<。

下面再来分析第二个正则，

 /\"\'([^\'\"]+)\'\"/ig

这个正则用于匹配双引号，单引号多层嵌套的情况，同样，不用转义，修改正则如下：

/"'([^'"]*)'"/ig

这样基本任务就完成了。测试代码如下：

 <script type="text/javascript">
 function rp(str,trg){
  var reg1 = /(\s+\w+)\s*=\s*([^<>"\s]+)(?=[^<>]*>)/ig
  var reg2 = /"'([^'"]*)'"/ig;
  str=str.replace(reg1,'$1="$2"').replace(reg2,'\"$1\"');
  trg.value=str;
 }
 </script>
 <textarea id="sou" style="width:100%">
 <a href = xxx name=aaa target=_blank title='asdfasf'
 onclick=alert('blueidea')> asfd=asfd
 </textarea>
 <input type="button" onclick="rp(sou.value,sou)" value="replace"/>

原帖里LeXRus又提出了新问题：

hint=i am lexrus

这样的属性会有问题，不过我感觉不加引号的话，属性值里就不可能有空格，否则会被识别为多个属性了。不过看到最后ncs的回帖我就哭了：

onclick=if(document.forms.length>0)

这样的属性怎么办？大于号会被识别为标签结束……还是分离行为与文档吧。补充一下，其实修补一下正则也可以解决，只要改成如下正则即可：

 /(\s+\w+)\s*=\s*([^"\s]+)(?=[^<>]*>)/ig

就是去掉第二个括号内字符集合里的<>。最后这个问题也解决。

给table加上tbody

来源：通过正则表达式快速在后加上

有若干table，但是没有tbody。现在需要用正则批量加上。

匹配table结束标签</table>比较简单，在前面加上一个</tbody>就行了。
但是，匹配table的起始标签有点难度，因为可能有属性。不过之前匹配过链接了，这个也大同小异。

实例table代码如下：
<table width="100%" border="0" cellpadding="2" cellspacing="3">
<table width="100%">
正则：

 /<table\s(\s*\w*?\s*=\s*".+?")*?\s*?>/g

匹配一个<table，在匹配若干个属性，最后只要再找到>就代表标签结束。

之后再replace一下，加上<tbody>就可以了。

去掉标签的所有属性

来源：正则表达式(Dreamweaver8)

<td style="width: 23px; height: 26px;" align="left">***</td>

变成没有任何属性的

<td>***</td>

思路：非捕获匹配属性，捕获匹配标签，使用捕获结果替换掉字符串。正则如下：

 /(<td)\s(?:\s*\w*?\s*=\s*".+?")*?\s*?(>)/

首先，td匹配掉了标签，后面可以用$1引用，后面的若干属性被(?:)匹配掉，而最后匹配的>则可以在后面用$2引用。

示意代码：

str = str.replace(reg,’$1$2’);

正则替换特定单词

来源：正则表达式,拒绝几个单词的输入该怎样表达?

要求禁止输入某几个单词，如果拒绝red,yellow,white。这个帖子到时不难，但是让我弄清楚了好几个概念。

第一个，小心字符集合里的“或”

 /[^red|yellow|white]/

这个正则里的所有或都没有意义，等同于：

 /[^redyellowwhite]/

意思就是不能含有以下列出的所有字母。

正解：

 /red|yellow|white/

第二个概念：

只要整个正则匹配成功，无论子正则表达式是否匹配成功，括号都会捕捉。例如

 /(red)|(yellow)|(white)/

会捕捉到三个结果，尽管实际上最多只可能有一个括号匹配成功。但是只要有一个匹配到了，两外两个也会记录空串。

指定文字高亮显示

来源：如何用正则把网页中的指定的字高亮显示

请教正则表达式：如何替换搜索结果中的关键字为高亮显示？

不劳而获一次，这个子虚乌有前辈已经给出了非常好的解决方案：我直接把代码贴出来了：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <META name="Author" content="Sheneyan" />
 <script type="text/javascript">
 function encode(s){
   return  s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/([\\\.\*\[\]\(\)\$\^])/g,"\\$1");
 }
 function decode(s){
   return  s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g,"$1").replace(/&gt;/g,">").replace(/&lt;/g,"<").replace(/&amp;/g,"&");
 }
 function highlight(s){
   if (s.length==0){
  alert('搜索关键词未填写！');
  return false;
   }
   s=encode(s);
   var obj=document.getElementsByTagName("body")[0];
   var t=obj.innerHTML.replace(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi,"$1");
   obj.innerHTML=t;
   var cnt=loopSearch(s,obj);
   t=obj.innerHTML
   var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g
   t=t.replace(r,"<span class='highlight'>$1</span>");
   obj.innerHTML=t;
   alert("搜索到关键词"+cnt+"处")
 }
 function loopSearch(s,obj){
   var cnt=0;
   if (obj.nodeType==3){
  cnt=replace(s,obj);
  return cnt;
   }
   for (var i=0,c;c=obj.childNodes[i];i++){
  if (!c.className||c.className!="highlight")
  cnt+=loopSearch(s,c);
   }
   return cnt;
 }
 function replace(s,dest){
   var r=new RegExp(s,"g");
   var tm=null;
   var t=dest.nodeValue;
   var cnt=0;
   if (tm=t.match(r)){
  cnt=tm.length;
  t=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}")
  dest.nodeValue=t;
   }
   return cnt;
 }
 </script>
 <style type="text/css">
 .highlight{background:green;font-weight:bold;color:white;}
 </style>
 </head>
 <body>
 <form onsubmit="highlight(this.s.value);return false;">
 <p><input name="s" id="s" title="搜索内容："/><input type="submit" value="搜索"/></p>
 </form>
 <div id="content">
 测试高亮的代码。很长很长的代码……………………
 </div>
 </body>
 </html>

删除标签

来源：如何使用正则表达式去除大部分HTML标记？

删除除了<img>、<br>、<p>之外所有的标签。子虚乌有给出代码中关键的一句：

 o.innerHTML.replace(/(<\/?(?!br|p|img)[^>\/]*)\/?>/gi,'');

刚开始没反应过来，后来才想起来，这个正则不用区分起始和结束标签。

<\/?(?!br|p|img)

匹配除了保护标签外标签的起始标签或者是结束标签的一部分。

[^>\/]*

匹配到>或者/就结束。

\/?>

起始标签或者结束标签的结尾。

错误贴

熟悉正则的帮忙看看，一个小问题：反斜线灾难。

正则表达式通过变量传递后，\t转义字符的奇怪表现。：同上。

太难贴

我从来没用过UBB，这个关于UBB的帖子，我觉得比较难，就没有总结：关于表格的正则表达式讨论（已实现，特别感谢lexrus）。

JSON我也不太明白，这个贴还没看，以后学了JSON再说。正则替换json数据问题。

还有一个挺难的帖子，正则的难题，感觉不应该用正则。

正则表达式做打字练习游戏：有什么特别好的办法（正则表达式问题）。里面有位高手做出来了，不过是只在IE下有效。

匹配数字的“正则”

来源：[求助]匹配数字的正则式

匹配数字字符挺简单，但是匹配正数，负数之类的还真挺麻烦。不过子虚乌有前辈的一句话到是非常经典：“不要一想到验证就想去用正则”。

是啊，不会正则的时候使劲躲，看了两天正则恨不得JavaScript编程“正则Script”。

类似的：

请问这个问题是不是必须要用正则表达式才能结局啊解决啊？

哪位高手知道怎么用正则替换图片名称吗？

复杂正则求助。。。。。。

正则资源

主题：JS正则表达式详解[收藏]

发个正则测试工具

http://www.regexlib.com

JavaScript正则表达式

• JavaScript正则表达式
• JavaScript正则表达式(PDF格式)
• 经典JavaScript正则表达式实战
• 经典JavaScript正则表达式实战(PDF格式)
• JavaScript正则表达式测试工具

字符/
意义：对于字符，通常表示按字面意义，指出接着的字符为特殊字符，不作解释。
例如：/b/匹配字符’b’,通过在b 前面加一个反斜杠，也就是/b/，则该字符变成特殊字符，表示
匹配一个单词的分界线。
或者：
对于几个字符，通常说明是特殊的，指出紧接着的字符不是特殊的，而应该按字面解释。
例如：*是一个特殊字符，匹配任意个字符(包括0个字符)；例如：/a*/意味匹配0个或多个a。为了匹配字面上的*，在a前面加一个反斜杠；例如：/a*/匹配’a*’。

字符^
意义：表示匹配的字符必须在最前边。
例如：/^A/不匹配"an A,"中的’A’，但匹配"An A."中最前面的’A’。

字符$
意义：与^类似，匹配最末的字符。
例如：/t$/不匹配"eater"中的’t’，但匹配"eat"中的’t’。

字符*
意义：匹配*前面的字符0次或n次。
例如:/bo*/匹配"A ghost booooed"中的’boooo’或"A bird warbled"中的’b’，但不匹配"Agoat g
runted"中的任何字符。

字符+
意义：匹配+号前面的字符1次或n次。等价于{1,}。
例如：/a+/匹配"candy"中的’a’和"caaaaaaandy."中的所有’a’。

字符?
意义：匹配?前面的字符0次或1次。
例如：/e?le?/匹配"angel"中的’el’和"angle."中的’le’。

字符.
意义：(小数点)匹配除换行符外的所有单个的字符。
例如：/.n/匹配"nay, an apple is on the tree"中的’an’和’on’，但不匹配’nay’。

字符(x)
意义：匹配’x’并记录匹配的值。
例如：/(foo)/匹配和记录"foo bar."中的’foo’。匹配子串能被结果数组中的素[1], ...,[n] 返
回，或被RegExp对象的属性, ..., 返回。

字符x│y
意义：匹配’x’或者’y’。
例如：/green│red/匹配"green apple"中的’green’和"red apple."中的’red’。

字符{ n }
意义：这里的n是一个正整数。匹配前面的n个字符。
例如：/a{ 2 }/不匹配"candy,"中的’a’，但匹配"caandy," 中的所有’a’和"caaandy."中前面的两个’a’。

字符{ n, }
意义：这里的n是一个正整数。匹配至少n个前面的字符。
例如：/a{ 2, }不匹配"candy"中的’a’，但匹配"caandy"中的所有’a’和"caaaaaaandy."中的所有’a’

字符{ n,m }
意义：这里的n和m都是正整数。匹配至少n个最多m个前面的字符。
例如：/a{ 1,3 }/不匹配"cndy"中的任何字符，但匹配 "candy,"中的’a’，"caandy," 中的前面两个
’a’和"caaaaaaandy"中前面的三个’a’，注意：即使"caaaaaaandy" 中有很多个’a’，但只匹配前面的三 个’a’即"aaa"。

字符[xyz]
意义：一字符列表，匹配列出中的任一字符。你可以通过连字符-指出一个字符范围。
例如：[abcd]跟[a-c]一样。它们匹配"brisket"中的’b’和"ache"中的’c’。

字符[^xyz]
意义：一字符补集，也就是说，它匹配除了列出的字符外的所有东西。 你可以使用连字符-指出一 字符范围。
例如：[^abc]和[^a-c]等价，它们最早匹配"brisket"中的’r’和"chop."中的’h’。

字符
意义：匹配一个空格(不要与b混淆)

字符b
意义：匹配一个单词的分界线，比如一个空格(不要与混淆)
例如：/bnw/匹配"noonday"中的’no’，/wyb/匹配"possibly yesterday."中的’ly’。

字符B
意义：匹配一个单词的非分界线
例如：/wBn/匹配"noonday"中的’on’，/yBw/匹配"possibly yesterday."中的’ye’。

字符cX
意义：这里的X是一个控制字符。匹配一个字符串的控制字符。
例如：/cM/匹配一个字符串中的control-M。

字符d
意义：匹配一个数字，等价于[0-9]。
例如：/d/或/[0-9]/匹配"B2 is the suite number."中的’2’。

字符D
意义：匹配任何的非数字，等价于[^0-9]。
例如：/D/或/[^0-9]/匹配"B2 is the suite number."中的’B’。

字符f
意义：匹配一个表单符

字符n
意义：匹配一个换行符

字符r
意义：匹配一个回车符

字符s
意义：匹配一个单个white空格符，包括空格，tab，form feed，换行符，等价于[ fnrtv]。
例如：/sw*/匹配"foo bar."中的’ bar’。

字符S
意义：匹配除white空格符以外的一个单个的字符，等价于[^ fnrtv]。
例如：/S/w*匹配"foo bar."中的’foo’。

字符t
意义：匹配一个制表符

字符v
意义：匹配一个顶头制表符

字符w
意义：匹配所有的数字和字母以及下划线，等价于[A-Za-z0-9_]。
例如：/w/匹配"apple,"中的’a’，".28,"中的’5’和"3D."中的’3’。

字符W
意义：匹配除数字、字母外及下划线外的其它字符，等价于[^A-Za-z0-9_]。
例如：/W/或者/[^$A-Za-z0-9_]/匹配"50%."中的’%’。

字符n
意义：这里的n是一个正整数。匹配一个正则表达式的最后一个子串的n的值(计数左圆括号)。

例如：/apple(,)sorange1/匹配"apple, orange, cherry, peach."中的’apple, orange’，下面有一个更加完整的例子。
注意：如果左圆括号中的数字比n指定的数字还小，则n取下一行的八进制escape作为描述。

字符ooctal和xhex
意义：这里的ooctal是一个八进制的escape值，而xhex是一个十六进制的escape值，允许在一个正则表达式中嵌入ASCII码

附:下表是元字符及其在正则表达式上下文中的行为的一个完整列表：

字符 描述
\
将下一个字符标记为一个特殊字符、或一个原义字符、或一个后向引用、或一个八进制转义符。例如，'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\' 匹配 "" 而 "\(" 则匹配 "("。
^
匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 '\n' 或 '\r' 之后的位置。
$
匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 '\n' 或 '\r' 之前的位置。
*
匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}。
+ 匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。
?
匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。
{n}
n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。
{n,}
n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。
{n,m}
m 和 n 均为非负整数，其中n ?
当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。
.
匹配除 "\n" 之外的任何单个字符。要匹配包括 '\n' 在内的任何字符，请使用象 '[.\n]' 的模式。
(pattern)
匹配pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 {CONTENT}… 属性。要匹配圆括号字符，请使用 '\(' 或 '\)'。
(?:pattern)
匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。
(?=pattern)
正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如， 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ，但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。
(?!pattern)
负向预查，在任何不匹配Negative lookahead matches the search string at any point where a string not matching pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如'Windows (?!95|98|NT|2000)' 能匹配 "Windows 3.1" 中的 "Windows"，但不能匹配 "Windows 2000" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始
x|y
匹配 x 或 y。例如，'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。
[xyz]
字符集合。匹配所包含的任意一个字符。例如， '[abc]' 可以匹配 "plain" 中的 'a'。
[^xyz]
负值字符集合。匹配未包含的任意字符。例如， '[^abc]' 可以匹配 "plain" 中的'p'。
[a-z]
字符范围。匹配指定范围内的任意字符。例如，'[a-z]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。
[^a-z]
负值字符范围。匹配任何不在指定范围内的任意字符。例如，'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。
\b
匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。
\B
匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。
\cx
匹配由x指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。 x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。
\d
匹配一个数字字符。等价于 [0-9]。
\D
匹配一个非数字字符。等价于 [^0-9]。
\f
匹配一个换页符。等价于 \x0c 和 \cL。
\n
匹配一个换行符。等价于 \x0a 和 \cJ。
\r
匹配一个回车符。等价于 \x0d 和 \cM。
\s
匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。
\S
匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。
\t
匹配一个制表符。等价于 \x09 和 \cI。
\v
匹配一个垂直制表符。等价于 \x0b 和 \cK。
\w
匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
\W
匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。
\xn
匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如， '\x41' 匹配 "A"。'\x041' 则等价于 '\x04' & "1"。正则表达式中可以使用 ASCII 编码。.
\num
匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，'(.)' 匹配两个连续的相同字符。
\n
标识一个八进制转义值或一个后向引用。如果 \n 之前至少 n 个获取的子表达式，则 n 为后向引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。
\nm
标识一个八进制转义值或一个后向引用。如果 \nm 之前至少有is preceded by at least nm 个获取得子表达式，则 nm 为后向引用。如果 \nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足，若 n 和 m 均为八进制数字 (0-7)，则 \nm 将匹配八进制转义值 nm。
\nml
如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。
\un
匹配 n，其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如，\u00A9 匹配版权符号 (?)。

jQuery Lightbox Plugin

Supported Media: Images

View Demo

Download

Fancybox

Supported Media: Images, Inline HTML, iFrame

View Demo

Download

Shadowbox

Supported Media: Images, Inline HTML, iFrame, AJAX, Flash, Video

View Demo

Download

ThickBox

Supported Media: Images, Inline HTML, iFrame, AJAX

View Demo

Download

Slightly Thickerbox

Supported Media: Images, AJAX, Video

View Demo

Download

Fancy Zoom

Supported Media: Images, Inline HTML, Flash

View Demo

Download

Facebox

Supported Media: Images, Inline HTML, AJAX

View Demo

Download

nyroModal

Supported Media: Images, Inline HTML, iFrame, AJAX, Video

View Demo

Download

Interface Imagebox Demo

Supported Media: Images

View Demo

Download

piroBox

Supported Media: Images

View Demo

Download

Greybox Redux

Supported Media: Images, iFrame

View Demo

Download

prettyPhoto

Supported Media: Images

View Demo

Download

使用用jQuery  fadeIn()可以实现淡入效果，比如我目前用的主题侧边TAB菜单，就具有此效果，但是在IE浏览器下模样大变，文字周围总是有那么一小段时间显示重影，虽然通过给其中的元素加个背景色，可一定缓解问题，但总是不理想，转老外的一篇相关文章，研究研究，估计都不会达到其它浏览器的效果。

I’ve noticed that when I use the jQuery .fadeIn() or .fade­Out() method I see ugly pix­e­lated text in Inter­net Explorer after the ani­ma­tion has com­pleted. This seems to be related to an issue with an IE spe­cific style fil­ter called clearType. To solve the prob­lem, you need to remove the clearType fil­ter after your jQuery ele­ment has faded in. There are a few ways to do this:

Pre­view / Sam­ple / Demonstration

3 Ways to Fix The Issue

1. Add a Back­ground Color

Set a back­ground color with CSS on the ele­ment that is fad­ing in or out. This is the most basic way to solve the problem.

2. Remove the clearType Filter

After fad­ing in an ele­ment you can add this sim­ple call­back func­tion to fix the bug.

3. Use a Cus­tom fadeIn/Out Method

This method serve’s as a replace­ment for the built-in fadeIn() & fade­Out() meth­ods for jQuery.

After you add this method to your JavaScript, change your ‘fade­Out’ to ‘cus­tom­Fade­Out’ and your ‘fadeIn’ to ‘cus­tom­FadeIn’. See a sam­ple of this method on the demo page. Thanks to Ben­jamin Novakovic for writ­ing this jQuery plugin

Ugly Tran­si­tions on Ani­mated Elements

When you ani­mate any­thing in IE there is an ugly tran­si­tion effect that occurs before the fix is applied. There’s no way to pre­vent or fix clearType while the fade occurs. A work-around is to fade some­thing else, like a <div> on top that fades in, rather than your text content.

Advanced Sce­nar­ios

There are more IE related issues that peo­ple have men­tioned see­ing in advanced setups as well.

I found that the answer was to set the z-index. I have a stack of absolutely posi­tioned divs and wanted to fade between them. The only way I could get IE8 to han­dle the fades nicely was to set the z-index of the ele­ment to be faded in higher than the ele­ment to be faded out i.e.:

1. $('#fadeoutdiv').css({zIndex:99}).fadeOut(2000);   
2. $('#fadeindiv').css({zIndex:90}).fadeOut(2000);  

Thanks to Al Flemming

A demon­stra­tion for Al’s fix has been added to the demo page
Resources

jQuery in Action: If you find your­self fre­quently using jQuery in your projects I would highly rec­om­mend check­ing out this book. I’ve read this and also Learn­ing jQuery 1.3 and have found jQuery in Action to be clearer, more straight for­ward and more powerful.
jQuery IE Fade Test
jQuery Ref­er­ence Guide jQuery fadeIn() & fadeOut(): Problems in Internet Explorer
jQuery fadeIn/fadeOut IE Cleartype Glitch

1、本地音频视频播放;

2、动画;

3、地理信息;

4、硬件加速;

5、本地运行(即使在 Internet 连接中断之后);

6、本地存储;

7、从桌面拖放文件到浏览器上传;

8、语义化标记;

二、HTML5 应用现状

现今，各大浏览器对 HTML5 的支持各有千秋，我们期待着他们在一两年内趋向一致，你可能以为，既然这样，现在大概很少人在使用这个未来的标准，事实并不如此，HTML5 现在已经被广泛应用，正如 William Gibson 所言，未来的 Web 已经来临，只是还没有被广泛采用。

你可能不知道，Google 的首页也使用 HTML5，不过，目前，他们还仅仅使用了 HTML5 的 doctype，页面的其它部分还是旧代码，但 Google 在他们的各种应用中已经在广泛采用 HTML5。最典型的例子是 Gmail，HTML5 的离线存储使用户即使在离线状态下也可以使用 Gmail，另外，Google Docs 也使用离线存储，同样使用离线存储的其它厂商的类似应用还包括 Zoho 的办公套件和 WordPress 的博客平台。如果你对 HTML5 的离线存储功能感兴趣，可以看一看 Mark Pilgrim 的 how to add offline support to your apps 一文。

三、Scribd 基于 HTML5 的文档阅读器

上图是 Scribd 的新文档阅读器，全部基于 Web 标准，并未借助 Flash

除了视频，HTML5 还可以在多个方面取代 Flash，文档共享站点 Scribd 最近宣布，他们将使用 HTML5 取代 Flash 实现文档阅读器，Scribd 是 HTML5 结合 CSS 所能实现的惊人功能的最好例子，他们还使用 @font-face 实现个性化字体，另外，在翻页时的变换效果也完全基于 CSS3。这些 Web 标准工具的结合使用，使 Scribd 实现了从 Flash 向纯 HTML 的过度，同时并没有牺牲文档在结构，字体，内嵌图片，图层等方面的功能。Scribd 的最新文档阅读器甚至支持 IE6,这里有一个实例，使用纯 HTML 输出复杂的公式。

四、HTML5 Canvas 与 HTML5 视频

基于 HTML5 Canvas 对象的 Invaders 经典游戏

虽然，Scribd 对 Canvas 的应用已经出神入化，我们还能找到更多这样的站点。Canvas Demos 有一系列关于 Canvas 的应用，从各种在线游戏，到从网页上提取颜色的 Rainbow 应用。

关于视频，最典型的例子莫过于 YouTube 和 Vimeo，他们都提供了 HTML5 版本。

五、HTML5 地理信息定位

点击地图中，黄色小人上方的圆圈，可以告诉 Google 地图你的地理位置

HTML5 的另一个功能是地理信息定位功能，一些浏览器提供了 geolocation API ，这个 API 也由 W3C 管理，可以结合 HTML5 实现你当前地理位置定位。Google Maps 在使用该功能，在 Google 地图上，有一个小圆圈，点击一下，就能告诉 Google 地图你现在的地理位置。目前，Geolocation API 并没有被众多桌面浏览器广泛采用(只有 Chrome 和 Firefox 3.6+ 采用了)，但 Google Gears 插件可以帮助那些旧浏览器实现该功能。

Twitter 借此实现地理信息感知的 tweets 消息，当浏览器支持 geolocation API 的时候，会自动使用该 API，否则，则使用 Google Gears。

六、HTML5 的更多意义

HTML5 的意义远不止上面这些，它最大的意义在于改变了 Web 文档的结构方式，借助 header, footer, section, article 这些标签，我们可以实现更具结构化，语义化的 Web 文档。这样，搜索引擎可以更容易索引 Web 站点，我们也可以搜索到更快，更准确的信息。

已经有数不清的站点在使用 HTML5 新标签，你可以在 HTML5Gallery 找到大量这样的站点。要想现在使用 HTML5 的新结构，不妨看看这篇 HTML5 教程。

另外，借助 Microdata， HTML5 还可以实现更强大的语义结构，这个标准化的数据格式(类似 microformats)，可以让你的站点不仅能够提供数据，还能提供数据定义。Microdata 对浏览器和搜索引擎都意义深远，搜索引擎可以借助 Microdata 发现你网络中的好友，而浏览器则可以藉此连接到你的社会网络好友站点，你可以在 Google 的 Rich Snippets Testing Tool 对此进行体验。

建议英文好的朋友直接去官网上了解这个插件的用法，如果你的英文很烂，那么也别急，下面我就给大家来一一介绍prettyPhoto的使用方法。

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

一、prettyPhoto使用方法介绍

1、引入jquery核心库和prettyPhoto插件库以及prettyPhoto样式表文件

2、初始化jquery插件，以下是最简单的配置的js代码

下面是每种类型的html代码

1、单张图片

2、图片相册

3、单个flash

4、YouTube视频

5、Vimeo

6、QuickTime影片

7、外部网站（iframe）

8、普通文本

9、AJAX内容

1.Transshipment Booking System is launched只对英文起作用，以字母作为换行依据

2.Transshipment Booking System is launched只对英文起作用，以单词作为换行依据

3.Transshipment Booking System is launched只对中文起作用，强制换行

4.Transshipment Booking System is launched强制不换行，都起作用

5.不换行，超出部分隐藏且以省略号形式出现

5.不换行，超出部分隐藏且以省略号形式出现Transshipment Booking System is launched

代码：
.p1{ word-break:break-all; width:150px;}/*只对英文起作用，以字母作为换行依据*/
.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用，以单词作为换行依据*/
.p3{white-space:pre-wrap; width:150px;}/*只对中文起作用，强制换行*/
.p4{white-space:nowrap; width:10px;}/*强制不换行，都起作用*/
.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}／/*不换行，超出部分隐藏且以省略号形式出现*/

1. word-break:break-all;只对英文起作用，以字母作为换行依据

2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据

3.{white-space:pre-wrap; 只对中文起作用，强制换行

4.{white-space:nowrap; 强制不换行，都起作用

5.{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现

注意，一定要指定容器的宽度，不然的话是没有用的。

注意word-break 是IE5+专有属性

语法：

word-break : normal | break-all | keep-all

参数：

normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行

break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明：

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。

对于中文，应该使用break-all 。

基于jQuery开发，非常简单的水平方向折叠控件。

Horizontal accordion: jQuery

jQuery-Horizontal Accordion
具有XBOX360 blade界面风格的水平方向Accordion。

jQuery-Horizontal Accordion
jQuery plugin: Accordion

用于创建 折叠菜单的jQuery插件。

jQuery plugin: Accordion

Accordion Menu script

基于 jQuery开发的可折叠菜单。

Accordion Menu script

jQuery.combobox

jQuery.combobox 是一个采用jQuery开发的combobox控件，可以使用CSS控制该combobox的外观，可以设置各种不同风格的下拉动画效果。

jQuery.combobox

2.AutoComplete

jQuery插件易于集成到现在的表单中(Form)。

AutoComplete-JQuery
Facebook like Autocomplete
基于jQuery开发，类似于FaceBoox提供的 AutoCompleter。

Facebook like Autocomplete
jQuery Autocomplete Mod
jQuery Autcomplete插件。能够限制下拉菜单显示的结果数。

jQuery Autocomplete Mod
jqac
基于Jquery开发的Autocomplete插件。具有易于使用，配置简单，既可以利用Ajax读取数据也可以直接从本地获取数据。

jqac

jQuery Tag Suggestion
类似于del.icio.us提供的tag suggesting功能。

jQuery Tag Suggestion
Autocomplete-jQuery ajax
利用 jQuery(Ajax)，PHP和MySQL开发的 AutoCompleter。

Autocomplete-jQuery ajax
jQuery.Suggest
跨浏览器支持，基于jQuery开发的Autocomplete library。

jQuery.Suggest
Autocomplete- jQuery plugin
一个jQuery Autocompleter，提供缓存选项来限制对服务器的请求。

Autocomplete- jQuery plugin

jQuery plugin: Autocomplete

自动完成输入框值让用户能够快速查找和过滤某些值。

jQuery plugin: Autocomplete
jSuggest

模仿 Google Suggest功能的AutoComplete jQuery插件。

jSuggest
jQuery Live Ajax Search Plug-in

采用 jQuery开发的AutoComplete控件。搜索结果展示框完全可以利用CSS自定义，内容展示是一个HTML页面。

jQuery Live Ajax Search Plug-in
ddcombobox

带 AutoComplete功能的下拉选择框jQuery插件。

ddcombobox

分页类

jQuery Pagination
jQuery分页插件

jQuery Pagination
pager jQuery plug-in

jQuery 分页插件。

pager jQuery plug-in
JQuery Pager

一个利用 jQuery开发的分页UI控件，可用于数据驱动的web应用程序中。

JQuery Pager

提示框类

Facebox
Facebox 是一个基于jQuery，Facebook-style的lightbox。能够展示示images，divs或者整个远程页面。

Facebox
SimpleModal
SimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。

SimpleModal
jTip

jTip 一个利用jQuery开发的提示工具。jTip通过HttpXMLRequest获取内容。用法简单，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以。

jTip
BetterTip

一个可以自定义Tooltip的jQuery插件。基于jTip，但比它来得更加灵活。

BetterTip
clueTip

clueTip 这个jQuery插件方便您为链接或其它元素添加Tooltip功能。当链接包括title属性时，它的内容将变成clueTip的标题。clueTip 中显示的内容可以通过Ajax获取，也可以从当前页面中的元素中获取。

clueTip
jQuery lightBox plugin

一个简单，强大基于jQuery开发的lightBox控件。

jQuery lightBox plugin
jQuery Impromptu

用于创建模式对话框，确认对话框，输入内容对话框的jQuery插件。

jQuery Impromptu
jQuery.UI Messenger"Outlook like message notification Widget

这个jQuery.UI控件类似于Messenger"Outlook消息弹出提醒框。

jQuery.UI Messenger"Outlook like message notification Widget
FancyBox

基于 jQuery开发的Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该Lightbox除了能够展示图片之外，还可以展示iframed内容， 通过CSS自定义外观。

FancyBox
Coda Popup Bubbles

采用 jQuery开发，类似“冒泡”效果的提醒弹出框。

Coda Popup Bubbles
jGrowl

jGrowl 用于制作消息弹出框的jQuery插件。产生效果的类似于Mac OSX系统中Growl事件通知框架。

jGrowl
jqWindowsEngine

这个 jQuery插件能够帮助你轻松创建Ajax Windows。

jqWindowsEngine
jQuery Alert Dialogs

这个 jQuery插件能够替换JavaScript提供的alert()、confirm()和prompt()功能。支持利用CSS自定义对话框外观。




jQuery Alert Dialogs
BeautyTips

BeautyTips 是一个jQuery Tooltip插件.

BeautyTips

编辑器类

jwysiwyg
WYSIWYG jQuery插件。整个编辑器文件大小只有17Kb。

jwysiwyg

Damn Small Rich Text Editor
基于jQuery开发，能够从IFRAME元素创建一个Rich Text Editor。提供了所有基本的Rich Text功能，可设置文本编辑区大小，Ajax上传图片等。

Damn Small Rich Text Editor

表格类

Flexigrid
Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。

Flexigrid
Ingrid

这个 jQuery DataGrid提供的功能有：可以拖动调整列宽，分页，排序，设置行/列样式等。

Ingrid
jQuery Grid

jqGrid 是一个Ajaxed jQuery Grid插件。提供分页功能，添加、编辑、删除和搜索表中记录，支持多种数据类型输入：XML，JSON，Array等，多行选择，支持子表格，集成日期选择控件等等。
Demo

jQuery Grid
tableHover

tableHover 一个jQuery插件当鼠标经过时，能够对表格的一整列或行进行着色加亮。支持colspans与rowspans的表格。

tableHover
JQuery.Resizer

一个轻量级jQuery插件用于创建可以拖动调整行高与列宽的表格。
JQuery.Resizer
tablesorter

tablesorter 这个jQuery插件能够将带THEAD与TBODY标签的标准HTMLTable转换成一个可排序的表格。tablesorter能够排序多种数据类型包括Text、URIs、integers、currency、floats、IP地址、日期、时间和自定义的数据类型。支持拥有复杂表头表格的排序，支持二级隐藏排序，支持多种浏览器：IE6.0+、FF2+、Safari2.0+、Opera9.0+。

tablesorter
csv2table

csv2table 这个插件能够将CVS文件（利用Excel创建）的内容转换成HTML Table。
csv2table
tableFormSynch

tableFormSynch 是一个表格与表单数据相互更新的jQuery插件。它提供的功能包括：基于表单中的数据，新增行。删除所选择行，并清除表单中的所有数据。 tableFormSynch支持所有表单控件包括：checkboxes、radio、buttons 与<select>。

tableFormSynch

色彩选择器

Farbtastic
Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件，然后每个控件关联到页面中的一个元素比如：文本输入框。

Farbtastic
jQuery Color Picker

一个简单的颜色选择控件。操作方式与Adobe Photoshop中颜色选择操作置。

jQuery Color Picker
iColorPicker

iColorPicker 是一个只有6KB大小的jQuery Color Picker。只要将输入框的class属性设置为“iColorPicker”就能变一个漂亮的颜色选择器。

iColorPicker

右键菜单

ContextMenu
用于创建右键弹出菜单的jQuery插件。

ContextMenu

图片新闻Flash展示相关类

imgAreaSelect

imgAreaSelect 这个jQuery插件能够选取一张图片中一个矩形区域。

imgAreaSelect
Easy Slide

EasySlide 是以jQuery为基础开发的一个图库展示插件，EasySlide可以将任何一个网页容器(Container)内的图形自动将其排列展示，并加上鼠标指向时的暂停效果(Pause)，可以当作图库展示或是动画及广告Banner使用。

Easy Slide
Easy News

Easy News是一个可以让您轻松显示网站新闻或图文内容展示的jQuery插件，可设定Fade In-Out ,Slide Up-Down, Left To Right 的效果，调整显示速度，可自行修改CSS改变您为喜欢的风格。

Easy News
Easy News Plus

Easy News Plus是基于Easy News开发，滚动式新闻或图文内容展示的jQuery插件，但是与Easy News有完全不同的显示方式(以左右滑动为主要的显示方法)。
Easy News Plus
jQZoom

基于 jQuery开发的图片放大镜插件。

jQZoom
jQuery Plugin: Text Highlight

利用 javascript对页面中的关键字进行着色的jQuery插件。

jQuery Plugin: Text Highlight
jCarousel Lite

这个 jQuery插件能够帮助你以滚动（carousel）的方式来组织图片和其它内容。

jCarousel Lite
jCarousel

jCarousel 是一个jQuery插件用于控制一个列表项目的水平或垂直顺序，列表项目的内容可以是静态HTML内容或通过AJAX加载的内容。可以向前或向后滚动。

jCarousel
Spacegallery-Jquery

一个采用 jQuery开发，类似于Flash效果的图库（image gallery）。

Spacegallery-Jquery
jQuery Slider Gallery

这是一个基于jQuery开发相册控件，类似于Apple网站上用于展示产品的效果。

jQuery Slider Gallery
jQuery Cycle Plugin

jQuery Cycle Plugin是一个slideshow插件。支持多种变换效果：shuffle、zoom、fade、turnDown、curtainX、 scrollRight。

jQuery Cycle Plugin
Zoomimage

该 jQuery插件能够让以当前流行的方式来展示图片。提供：预加载图片提示，对图片进行分组，自动调整图片显示比例，图片分组浏览控制。

Zoomimage
prettyPhoto

prettyPhoto 是jQuery lightbox的一个“克隆”。并增加动画效果，图库浏览等特性。

prettyPhoto
ThickBox

ThickBox 是一个模式对话框UI控件。基于jQuery开发，可以用来展示单张或多张图片，内嵌的内容，iframed的内容，或通过Ajax获取的内容。

ThickBox
Galleria

Galleria 是一个采用jQuery开发的图片展示插件。它通过缩略图导航一张一张的显示大的图片。支持通过CSS设置整个相册的风格。能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片。能够触一些事件，因此可以在图片加载时执行一些动作。

Galleria
jQuery Flash Plugin

一个 jQuery插件用于在页面中嵌入Flash影片。

jQuery Flash Plugin
jQuery.SerialScroll

jQuery.SerialScroll 是一个用于创建滚动效果的jQuery插件，支持水平／垂直方向滚动和混合滚动效果。

jQuery.SerialScroll
InnerFade

InnerFade 这个jQuery插件能够让任意一组元素（img，div等）实现淡入淡出播放效果。

InnerFade
NyroModal

一个基于 jQuery开发，非常灵活和可定制外观/动画效果的模式对话框。可通过Ajax调用目标内容，改变对话框大小等。

NyroModal
CrossSlide

CrossSlide 这个jQuery插件实现了一些常用Javascript幻灯片放映动画效果如：动态地移动、缩放、渐变、滑入"滑出等。

CrossSlide
Magnify

Magnify 是一个能够在图片上添加放大镜功能的jQuery插件。

Magnify
Img Notes

用于当鼠标移到图片是时，显示一个信息提示框。

Img Notes
FancyZoom

FancyZoom 采用缩放效果来展示图片或任意HTML页面，不需要另外开启页面来载入图片，其效果在Apple Mac的官方网站中也有。

FancyZoom
Jcrop

Jcrop 是一个跨浏览器的jQuery图片剪切插件（jQuery image crop plugin）。支持对剪切框加 CSS样式，当选取或拖动时添加回调事件（Callbacks），剪切时能够约束宽度与高度。

Jcrop
Galleriffic

Galleriffic 是一个用于创建快速展示相册中照片的jQuery插件。图片既可以以幻灯片的方式查看，也可以手动点击缩略图查看。Galleriffic还支持分页，从而使得它能够展示更多的图片。

Galleriffic
Image Upload and Auto Crop

采用 PHP+jQuery开发的图片上传和剪切（Crop）工具。

Image Upload and Auto Crop
prettyGallery

prettyGallery 是一个图库导航控件Slider。基于jQuery开发，除了可以导航图片之外，还支持其它任何内容。可以配置导航滚动速度和图片标题说明。

prettyGallery
jQuery.popeye

jQuery.popeye 这个插件能够将一组无序的图片列表转换成一个简单的相册。当点击图片时将以Lightbox风格放大图片。图片展示框提供向前/向后控制并能够为每一张图片添加备注说明信息。jQuery.popeye能够根据图片大小自动调整展示框的高度和宽度。

jQuery.popeye
s3Slider

s3Slider 是一个jQuery slideshow插件，效果类似于smooth slideshow。
可以在图片上的任意位置，透明显示当前所放映图片的说明信息。

s3Slider
Pirobox

采用 jQuery开发的Lightbox控件。能够根据浏览器窗体大小自动调整展示图片大小。提供向前/向后控制链接。动态加载图片效果。易于定制。

Pirobox
Simple Controls Gallery

这是一个采用jQuery开发的图片slideshow控件。提供一个暂停/播放/向前/向后展示的控制菜单。这个jQuery slideshow可以设置当页面打开时自动播放图片并能够将最近查看的图片存储在cookie中。

Simple Controls Gallery
Agile Carousel

Jquery Slideshow插件。易于定制图片切换效果。提供开/关图片标题显示，添加文本水印等功能。

Agile Carousel
jQuery Plugin-Page Peel

这是一个用于创建Page Peel(卷页/页面剥落)特效的jQuery插件。

jQuery Plugin-Page Peel
Easy Slider

一个 jQuery插件，当点击导航按纽时可以水平或垂直播放图片或其它任何内容。

Easy Slider
imgPreview

图片预览 jQuery插件。当鼠标移到图片链接上时，会在链接的旁边出现一个类似于tooltip效果的图片展示框。

imgPreview
Jquery Fade In.Fade Out

这是一个用于让图片产生淡入淡出效果的jQuery插件。

Jquery Fade In.Fade Out
Captify

这个 jQuery插件能够在图片上显示标题信息，当鼠标放到图片上时滑动出现。

Captify
jParallax

这是一个用于生成视差现象的jQuery插件。mParallax能够产生的效果与 jParallax一样但采用Mootools框架开发。


jParallax

导航类

jQuery plugin: Treeview

这个插件能够把无序列表转换成可展开与收缩的Tree。

jQuery plugin: Treeview

FastFind Menu Script

可拖动的嵌套菜单窗体，基于动态"AJAX"响应。

FastFind Menu Script
iconDock

iconDock 一个基于jQuery开发的Fisheye menu。

iconDock
jQuery UI Tabs

jQuery UI Tabs：一个功能强大，易于使用的Tab控件。

jQuery UI Tabs
jstree

jsTree是一个基于jQuery的Tree 控件。支持XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖"放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。

jstree
jQuery File Tree

jQuery File Tree是一个可配置的Ajax文件浏览器jQuery插件。可以通过CSS定制外观，指定文件树展开图标，可以自己定义展开／收缩事件、速度，配置加载信息等。 jQuery File Tree通过Ajax来获取文件信息。

jQuery File Tree
Superfish

jQuery 菜单插件。支持水平/垂直方向。弹出子菜单不会被<SELECT>标签挡住。

Superfish
accordion menu

Accordion 风格的jQuery菜单。

accordion menu
CSS Dock Menu

采用 jQuery+CSS实现，仿Mac Dock Menu的一个导航菜单。

CSS Dock Menu
CheckTree

带 Checkbox的树型jQuery插件。

CheckTree
idTabs

idTabs 是一个能够创建简单到复杂Tab控件的jQuery插件。支持动态添加和选择Tab，idTabs能够绑定到不同的事件如mouseover。

idTabs
jQuery Context Menu

jQuery Context Menu是一个右键菜单插件。通过非常少的设置就能够轻松实现右键菜单功能。

jQuery Context Menu
jQuery Right-click

这个插件能够让你使用jQuery来捕获由鼠标右键触发的事件。这些事件包括：click、mouseup、mousedown。
jQuery Right-click
jQuery Multi Level CSS Menu

这是一个多级水平CSS菜单，利用规则嵌套的HTML列表标签创建。当子菜单靠近窗体右边缘时，将自动调整展示方面。

jQuery Multi Level CSS Menu
ListNav

ListNav 是一个用于创建按字母顺序分类导航的jQuery插件。

ListNav
Simpletip

Simpletip 是一个基于jQuery开发的Tooltips控件。Tooltips可以附在任意元素（标签）之上。并定制展示方式与位置。tooltips可以是静态，动态或通过Ajax加载。

Simpletip
Smooth Navigation Menu

Smooth Navigation Menu是一个采用jQuery开发，基于CSS的多层级网站导航菜单。菜单项的内容既可以直接从当前页面中获取，也可以从一个外面文件或通过Ajax获取。

Smooth Navigation Menu
jdMenu

jdMenu 是用于创建水平/垂直分层下拉菜单的jQuery插件.支持通过Ajax加载菜单项，自定义动画效果，易于定制外观，支持相对(relative)与绝对 (absolute) 定位等。

jdMenu
jqDock

这是一个能够将一组图片转换成类似于Mac风格鱼眼菜单(Dock Menu)的jQuery插件。菜单可以是水平方向或垂直方向。

jqDock

验证类

jQuery plugin: Validation

jQuery 校验插件。

jQuery plugin: Validation
Masked Input Plugin

Masked Input这个jQuery插件让用户能够按照预先设定好的固定格式输入数据(如日期、电话号码等)。

Masked Input Plugin
jQuery password strength meter

用于检测密码强度的jQuery插件。

jQuery password strength meter
jVal

jQuery 表单校验插件。

jVal

图表类

Flot

Flot 一个纯javascript绘画库，基于jQuery开发。它能够在客户端根据任何数据集快速生成图片。目前只能绘制线状图和柱状。

Flot
jQchart

基于 Canvas+jQuery，可拖放/交互的简单图形控件。

jQchart
jquery.sparkline

这是一个用于生成迷你型线状图的jQuery插件。

jquery.sparkline

Form相关类

jNice
创建自定义外观的Form元素，功能与正常的Form元素相似。

jNice

jQuery calculate

jQuery 计算插件，提供一些常用的数学计算功能比如：Sum、Average、Min、Max等。

jQuery calculate

jQuery select box

模仿 HTML select box实现功能的一个下拉菜单。

jQuery select box
prettyCheckboxes

一个简单的jQuery插件用于定制checkboxe和radio按纽的外观。

prettyCheckboxes
jGrow

jGrow 这个jQuery插件能够让textarea根据文本的长度自动调整它的大小。

jGrow
jQuery Form Plugin

为表单 (Form)提供全面Ajax支持，包括文件上传功能的jQuery插件。提供的方法/功能包括：ajaxForm、ajaxSubmit、 formToArray、formSerialize、fieldSerialize、fieldValue、clearForm、 clearFields、resetForm。这些方法能够让你轻松地管理Form中的数据和Form无刷新提交。
jQuery Form Plugin
mcDropdown jQuery Plug-in

mcDropdown 是一个独特的UI控件，它能够让用户在一个复杂分级的树形下拉选项中进行选择。

mcDropdown jQuery Plug-in
Create A Slider From A Select Box

这是一个漂亮的jQuery插件能够自动将select boxes转换成一个sliders控件。

Create A Slider From A Select Box
TextArea Resizer

这个 jQuery插件提供Resizer bar可拖动调整TextArea大小。

TextArea Resizer

jQuery MultiSelect

jQuery MultiSelect是一个可配置的jQuery插件。它将普通的列表框表单控件转换成带有CheckBox的下拉列表控件。

jQuery MultiSelect
Editable(jQuery Editable Plugin)

这是一个真正可定制的jQuery editableplugin。当前它能够将任意不可编辑的标签（span、div、p...等）转换成可编辑的textinput、password、 textarea、下拉列表（drop-downlist）等标签。你可以利用它的editableFactory对象来扩展添加自己所需的input type。

Editable(jQuery Editable Plugin)

NicejForm

NiceJForm 是一个拥有完美外形的表单，它是基于jquery库的，NiceJForms实际上是个jquery插件，用来使表单看起来更为美观。这不是最终版本，我知道可以通过多种途径改良它的脚本，但是至少，这是一个可以使用的稳定版本。非常感谢Lucian Slatineanu发布的 NiceJForm，在他的blog中你可以获得更多信息。
在IE6，IE7，Firefox2.0中测试成功。
NicejForm

上传类

jqUploader

结合 Javascript与Flash开发，拥有上传进度条的文件上传控件。

jqUploader
jQuery Multiple File Upload Plugin

多文件上传插件（jQuery.MultiFile）能够让用户一次性选择多个要上传的文件。此外该插件还提供一些基本的校验功能比如：文件扩展名校验。

jQuery Multiple File Upload Plugin
jQuery: Ajax file upload

Ajax 文件上传插件让用户能够很方便地上传多个文件而无需刷新页面。此外，可以使用任何元素（图片，文字，按纽等）来触发文件选择窗口。

jQuery: Ajax file upload
时间日期类

jQuery UI Datepicker

基于 jQuery开发的日期选择控件。

jQuery UI Datepicker

Date Picker

Date Picker一个采用jQuery开发的日期选择控件。支持同时显示多个月份日历，标记特殊日期，易于通过CSS定制外观，自定义周的第一天，自定义月份和星期的显示名称。

Date Picker

Date Range Picker

基于 jQuery UI1.6与jQuery UI CSS框架开发的日期选择控件。

Date Range Picker

圆角类

jQuery Corner

不需要图片就能够创建各种圆角形状的jQuery插件。

jQuery Corner
JQuery Curvy Corners

用于创建圆角的jQuery插件。压缩之后大小只有9k。

JQuery Curvy Corners
jQuery Corner

更多圆角效果的jQuery插件。

jQuery Corner

jQuery Corners

这是一个用于创建漂亮圆角效果的jQuery插件。不需要用到图片或其它特殊的标签。

jQuery Corners

评价类

jQuery Ajax Rater Plugin

能够动态创建Ajax Rater的jQuery插件。

jQuery Ajax Rater Plugin

Star Rating widget

采用 jQuery框架开发的评价控件。

Star Rating widget
jQuery Star Rating Plugin

Star Rating Plugin是一个基于一组radio input boxes实现的星形评价控件。

jQuery Star Rating Plugin

其它

jquery-aop
为 JavaScript增加面向方面编程特性的jQuery插件。它能给任何函数添加Advices(Before、<EM& gt;After< em>与Around)。
jquery-aop
xmlObjectifier

基于 jQuery开发，能够把XML DOM转换成 JSON的JavaScript library。
xmlObjectifier
JQuery Portlets

这个 jQuery插件提供一些Portlets功能包括：drag/drop，expand，collapse等。

JQuery Portlets
jScrollPane

jScrollPane 这个jQuery插件可以让你通过简单的CSS设置就能够替换所有分块元素在浏览器中默认的垂直滚动条样式。

jScrollPane
EasyDrag jQuery Plugin

这个 jQuery Plugin能够为大部DOM元素添加拖放功能。

EasyDrag jQuery Plugin
jFeed

jFeed 是一个基于jQuery开发的RSS/ATOM Feed解析器。 jFeed能够解析RSS0.91、0.92、1.0、2.0和Atom1.0 Feeds。
jFeed
jQuery.UI ProgressBar Widget

采用 jQuery开发的进度条控件。

jQuery.UI ProgressBar Widget
Ajax Poll

利用 jQuery的Ajax和动画效果并给合PHP开发的投票系统。

Ajax Poll
JQuery Progress Bar

基于 jQuery开发的进度条控件。在其网站上提供一个可以显示文件上传进度的例子，服务器端采用PHP处理。

JQuery Progress Bar
jQuery Form Plugin
jTemplates

基于 jQuery开发的javascript模板引擎。
jTemplates
Animated Collapsible DIV

为任何 DIV层添加Web2.0风格的动画隐藏/显示效果。

Animated Collapsible DIV
Simple Effects Plugins

jQuery 特效插件，可以实现收缩，隐藏，显示，淡入/淡出和上下滑动效果等．

Simple Effects Plugins
jQuery.Hotkeys plugin

这个 jQuery插件能够帮助你快速创建键盘触发事件。支持任意组合键。


jQuery.Hotkeys plugin
jMP3

jMP3 是一个采用jQuery开发的JavaScript MP3插放器，提供一种可以在页面上直接播放MP3的简便方式。

jMP3
Pure

Pure 是一个基于jQuery开发，能够动态生成HTML的JavaScript模板引擎。支持JSON数据。
Pure
Chain.js

Chain.js 是一个提供数据绑定功能的jQuery插件。用于自动生成Web内容，有利于数据与表现相分离。

Chain.js
ppDrag

ppDrag 是一个让页面元素拥有拖移（Drag&Drop）效果的jQuery插件。

ppDrag
jqDnR

jqDnR 一个轻量级jQuery插件能够让你拖拽任何元素、调整元素大小。

jqDnR
Scroll Follow

Scroll Follow是一个简单的jQuery插件。当滚动页面时，能够让DOM对象产生浮动跟随效果。

Scroll Follow
jQuery Taconite Plugin

这个 jQuery插件能够利用单个Ajax调用结果同时更新多个DOM对象。
jQuery Taconite Plugin
jQuery URL Parser

用于解析 URLs字符串的jQuery插件。方便你获取协议,主机,端口,查询参数,文件名,路径等。

jQuery URL Parser
jQuery.xml2json

jQuery.xml2json 是一个能够将简单的XML转换成JSON对象的jQuery插件。
jQuery.xml2json
Ajaxify

Ajaxify 这个jQuery插件能够将一个页面中的所有链接转换成Ajax加载和提交请求。

原文：使用Google API 有条件加载jQuery

Google 目前提供的字体共有十八种，均为目前比较流行的免费字体，包括为 Android 而开发的 Droid 系列，被称为“Fonts for Scholars”的 Cardo，为代码印刷而设计的 Inconsolata，业余之作而不胫走红的 Yanone Kaffeesatz 等等，其中最能引人注目的是字体师 John Fell 设计的 IM Fell 字体。
我想每个网页设计师都会觉得这是个好消息，又一个来自Google的福音吧！

想使用它们吗？使用这些字体无需付费，也不必注册，只需要做简单的几步，举个例子，如果你想 在你的网页中使用“Tangerine”这种字体，

首先，在网页头部加入代码

然后，在你的CSS样式表中加入类似：

上面是让页面所有元素的字体都变成Tangerine,如果只想局部显示Tangerine字体只要改变CSS选择器就可以了！

如果想详细的了解Google在线字体的话，请到官方主页http://code.google.com/webfonts

详 细使用方法http://code.google.com/apis/webfonts/docs/getting_started.html

原文来自淘 日本

竟然不知道Google还有这么一项服务，不过很可惜没有中文字体，因为大部分漂亮的中文字体都不是免费的，另外中文字体文件也比英文字体体积大了许多...

我们这样去定义一个盒子模型：

在Firefox，和Chrome中的效果：

其中 -moz-border-radius 是 Firefox 实现圆角的私有属性，而 -webkit-border-radius是 webkit 内核浏览器（如 Safari 和 Chrome）实现圆角的私有属性。

我们也可以分别设置4个圆角的属性值，例如这样的样式：

得到的效果如下图：

我们还可以使用CSS缩写样式实现圆角效果，例如下面的代码：

当然我们也可以为盒子模型添加边框属性：

IE 9 没有使用私有属性，直接使用 border-radius 定义圆角，border-radius 是定义四个角都是圆角，如果要具体的一个角，可以使用下面四个属性：

貌似当圆角数值小于4px时将失效

参考文章：http://web.d-times.net/2011/01/10/rounded.html

淡入淡出代码：

可惜这个特效在IE核心浏览器下效果欠佳，那就加个判断只让非IE核心浏览显示淡入淡出特效，在上面代码中加上：

例如：

另外，选择body整个面可能对浏览器造成负担，可替换成某个标签选择器，只让部分DIV显示淡入淡出效果，比如上面的改为#wrapper。
淡入淡出代码参考自：http://xdrupal.org/jQuery-page-fadein-fadeout