对于正则的使用，先前一直都是一个概念性的东西，只是知道用它可以匹配字符格式。后来在项目中遇到关于字符操作的问题，才开始着手对正则进行一些了解。而对于当时的那种了解，也只不过是项目的一时所需，只找到了适合自己的代码，然后应用到项目使用。因此从没有真正的去系统的学习。今天在订阅中看到幸福收藏夹转载的一篇关于javascript正则表达式的教程，看了一段以后就了解了关于正则表达式很多基础的系统性东西，因此转过来分享一下，也方便以后自己的复习。

网上正则表达式的教程够多了，但由于javascript的历史比较悠久，也比较古老，因此有许多特性是不支持的。我们先从最简单地说起，文章所演示的正则基本都是perl方式。

元字符

( [ { \ ^ $ | ) ? * + .

预定义的特殊字符

字符类

简单类

原则上正则的一个字符对应一个字符，我们可以用[]把它们括起来，让[]这个整体对应一个字符。如

alert(/ruby/.test("ruby"));//true
alert(/[abc]/.test("a"));//true
alert(/[abc]/.test("b"));//true
alert(/[abc]/.test("c"));//true
alert("a bat ,a Cat,a fAt bat ,a faT cat".match(/[bcf]at/gi));//bat,Cat,fAt,bat,faT,cat

负向类

也是在那个括号里做文章，前面加个元字符进行取反，表示匹配不能为括号里面的字符。

alert(/[^abc]/.test("a"));//false
alert(/[^abc]/.test("b"));//false
alert(/[^abc]/.test("6"));//true
alert(/[^abc]/.test("gg"));//true

范围类

还是在那个中括号里面做文章。有时匹配的东西过多，而且类型又相同，全部输入太麻烦，我们可以用它。特征就是在中间加了个横线。

组合类

还是在那个中括号里面做文章。允许用中括号匹配不同类型的单个字符。

alert(/[a-f]/.test("b"));//true
alert(/[a-f]/.test("k"));//false
alert(/[a-z]/.test("h"));//true
alert(/[A-Z]/.test("gg"));//false
alert(/[^H-Y]/.test("G"));//true
alert(/[0-9]/.test("8"));//true
alert(/[^7-9]/.test("6"));//true
 
alert(/[a-m1-5\n]/.test("a"))//true
alert(/[a-m1-5\n]/.test("3"))//true
var a = "\n\"
alert(/[a-m1-5\n]/.test(a))//true
alert(/[a-m1-5\n]/.test("r"))//false

预定义类

还是在那个中括号里面做文章，不过它好像已经走到尽头了。由于是中括号的马甲，因此它们还是对应一个字符。

alert(/\d/.test("3"))//true
alert(/\d/.test("w"))//false
alert(/\D/.test("w"))//true
alert(/\w/.test("w"))//true
alert(/\w/.test("司"))//false
alert(/\W/.test("徒"))//true
alert(/\s/.test(" "))//true
alert(/\S/.test(" "))//false
alert(/\S/.test("正"))//true
alert(/./.test("美"))//true
alert(/./.test("  "))//true
var a = "\n\"
alert(/./.test(a))//true

量词

由于元字符与特殊字符或字符类或者它们的组合（中括号）甚至它们的马甲（预定义类）都是一对一进行匹配。我们要匹配“司徒正美这个词”，最简单都要 /…./，如果长到50多个字符岂不是要死人。因此我们逼切需要一个简单的操作，来处理这数量关系。

简单量词

alert(/..../.test("司徒正美"))//true
alert(/司徒正美/.test("司徒正美"))//true
alert(/[\u4e00-\u9fa5]{4}/.test("司徒正美"))//true
alert(/[\u4e00-\u9fa5]{4}/.test("司徒正美55"))//true
alert(/^[\u4e00-\u9fa5]+$/.test("正则表达式"))//true
alert(/^[\u4e00-\u9fa5]+$/.test("正则表达式&*@@"))//false
alert(/\d{6}/.test("123456"))//true
alert(/[ruby]{2}/.test("rr"))//true
alert(/[ruby]{2}/.test("ru"))//true
alert(/[ruby]{2}/.test("ry"))//true

/[\u4e00-\u9fa5]/用于匹配单个汉字。

贪婪量词，惰性量词与支配性量词

贪婪量词，上面提到的所有简单量词。就像成语中说的巴蛇吞象那样，一口吞下整个字符串，发现吞不下（匹配不了），再从后面一点点吐出来（去掉最后一 个字符，再看这时这个整个字符串是否匹配，不断这样重复直到长度为零）

隋性量词，在简单量词后加问号。由于太懒了，先吃了前面第一个字符，如果不饱再捏起多添加一个（发现不匹配，就读下第二个，与最初的组成一个有两个 字符串的字符串再尝试匹配，如果再不匹配，再吃一个组成拥有三个字符的字符串……）。其工作方式与贪婪量词相反。

支配性量词，在简单量词后加加号。上面两种都有个不断尝试的过程，而支配性量词却只尝试一次，不合口味就算了。就像一个出身高贵居支配地位的公主。 但你也可以说它是最懒量词。由于javascript不支持，所以它连出场的机会也没有了。

var re1 = /.*bbb/g;//贪婪
var re2 = /.*?bbb/g;//惰性
//  var re3 = /.*+bbb/g;//支配性,javascript不支持，IE与所有最新的标准浏览器都报错
alert(re1.test("abbbaabbbaaabbbb1234")+"");//true
alert(re1.exec("abbbaabbbaaabbbb1234")+"");//null
alert("abbbaabbbaaabbbb1234".match(re1)+"");//abbbaabbbaaabbbb
 
alert(re2.test("abbbaabbbaaabbbb1234")+"");//true
alert(re2.exec("abbbaabbbaaabbbb1234")+"");//aabbb
alert("abbbaabbbaaabbbb1234".match(re2)+"");//abbb,aabbb,aaabbb

分组

到目前为止，我们只能一个字符到匹配，虽然量词的出现，能帮助我们处理一排密紧密相连的同类型字符。但这是不够的，下面该轮到小括号出场了，中括号 表示范围内选择，大括号表示重复次数。小括号允许我们重复多个字符。

//分组+量词
alert(/(dog){2}/.test("dogdog"))//true
//分组+范围
alert("baddad".match(/([bd]ad?)*/))//baddad,dad
//分组+分组
alert("mon and dad".match(/(mon( and dad)?)/))//mon and dad,mon and dad, and dad

反向引用

反向引用标识由正则表达式中的匹配组捕获的子字符串。每个反向引用都由一个编号或名称来标识，并通过“\编号”表示法进行引用。

var color = "#990000";
/#(\d+)/.test(color);
alert(RegExp.$1);//990000
 
alert(/(dog)\1/.test("dogdog"))//true
 
var num = "1234 5678";
var newNum = num.replace(/(\d{4}) (\d{4})/,"$2 $1");
alert(newNum)

候选

继续在分组上做文章。在分组中插入管道符（“|”），把它划分为两个或多个候多项。

var reg = /(red|black|yellow)!!/;
alert(reg.test("red!!"))//true
alert(reg.test("black!!"))//true
alert(reg.test("yellow!!"))//true

非捕获性分组

并不是所有分组都能创建反向引用，有一种特别的分组称之为非捕获性分组，它是不会创建反向引用。反之，就是捕获性分组。要创建一个非捕获性分组，只 要在分组的左括号的后面紧跟一个问号与冒号就行了。

var color = "#990000";
/#(?:\d+)/.test(color);
alert(RegExp.$1);//""

题目，移除所有标签，只留下innerText!

var html = "
 
<a href="http://www.cnblogs.com/rubylouvre/">Ruby Louvre</a>by <em>司徒正美</em>
 
";
var text = html.replace(/&lt;(?:.|\s)*?&gt;/g, "");
alert(text)

注意：javascript不存在命名分组

前瞻

继续在分组内做文章。前瞻与后瞻其实都属于零宽断言，但javascript不支持后瞻。

正向前瞻用来检查接下来的出现的是不是某个特定的字符集。而负向前瞻则是检查接下来的不应该出现的特定字符串集。零宽断言是不会被捕获的。

var str1 = "bedroom";
var str2 = "bedding";
var reBed = /(bed(?=room))///在我们捕获bed这个字符串时，抢先去看接下来的字符串是不是room
alert(reBed.test(str1));//true
alert(RegExp.$1)//bed
alert(RegExp.$2 === "")//true
alert(reBed.test(str2))//false
 
var str1 = "bedroom";
var str2 = "bedding";
var reBed = /(bed(?!room))/  //要来它后面不能是room
alert(reBed.test(str1))//false
alert(reBed.test(str2))//true

题目，移除hr以外的所有标签，只留下innerText!

var html = "
 
<a href="http://www.cnblogs.com/rubylouvre/">Ruby Louvre</a>
 
<hr />
 
by <em>司徒正美</em>
 
";
var text = html.replace(/&lt;(?!hr)(?:.|\s)*?&gt;/ig,"")
alert(text)//Ruby Louvre<hr />by 司徒正美

边界

一个要与字符类合用的东西。

题目，设计一个字符串原型方法，实现首字母大写！

var a = "ruby";
String.prototype.capitalize =  function () {
     return this.replace(/^\w/, function (s) {
            return s.toUpperCase();
            });
        }
       alert(a.capitalize())//Ruby

单词边界举例。要匹配的东西的前端或未端不能为英文字母阿拉伯字数字或下横线。

var str = "12w-eefd&efrew";
alert(str.match(/\b\w+\b/g))//12w,eefd,efrew

var str = "JS's Louvre";
var reg = /\w/g;
alert(reg.exec(str));//J
alert(reg.lastIndex);//1
alert(reg.exec(str));//S
alert(reg.lastIndex);//2
alert(reg.exec(str));//s
alert(reg.lastIndex);//4
alert(reg.exec(str));//L
alert(reg.lastIndex);//6

相关日志

• 网页测试工具分享
• 体验篇：Microsoft Expression Web 3 SuperPreview全攻略
• 常用正则表达式速查
• jQuery 1.4 的新特性

如今的浏览器市场，依然角逐着各种来自不同厂商不同核心的浏览器。优胜略等，时间和用户总会替我们前端开发者主持公道，去筛选出最具竞争力的产品。

有需求就会有市场，有市场就会有产品，现在的浏览器市场已经不再是当年孤立兼容的时代了。需求促使了标准的产生，于是现在的竞争取而代之的则是运行速度，易用性，扩展性，和标准兼容性。

虽说有着W3C标准化组织给我们前端开发者做坚强的后盾，可是由于各浏览器厂商对标准的理解与对自身功能的强大，兼容性依然是我们前端开发者不可避免的话题，当然还有那个老不死的IE6，虽说覆灭已是命运使然，恶心的是很多用户依然依赖于很长一段时间对它的使用习惯，更恶心的是国内某些浏览器厂商沿用IE6核心换了身皮毛就以自有名称独居的浏览器，以上种种不得不让我们前端人员嗤之以鼻，可是排斥归排斥，我们无法决定用户的选择，但是我们开发者依然要照顾用户，由此衍生的兼容问题就愈发显得明显了。

还是这句话：有需求就会有市场，有市场就会有产品。因此既然市场有兼容性问题，那么由此衍生的测试工具也是层出不穷，在这里，分享几个我经常会用到的测试工具给大家：

IEtest

• 性质：客户端程序
• 使用方式：下载安装到计算机 
• 浏览形式：正常网页
• javascript：支持
• 官方下载地址：http://www.debugbar.com/download.php
• 支持浏览器：IE5.5、IE6、IE7、IE8

想必对于这个工具大家都很熟悉了，一个针对IE浏览器的测试的工具，可以测试IE5.5+的各版本IE浏览器，使用方法是把程序安装到本地，然后运行就会出现一个类似于浏览器的窗口（其实直接可以拿来当浏览器用的说），工具栏分布着代表各浏览器的黄色button，点击任意一个便会生成对应浏览器核心的tab。

不过貌似自09年10月更新到4.2版本后就没有新的版本发布，我想说的是4.2版本在win7下经常崩溃。

Spoon

• 性质：网页程序+浏览器插件+沙盘
• 使用方式：下载插件，安装浏览器沙盘程序，在网页点击打开已下载的浏览器沙盘程序
• 浏览形式：正常网页
• javascript：支持
• 使用地址：http://spoon.net/browsers/
• 支持浏览器：IE6、IE7、IE8、Firefox3.5、Firefox3、Firefox2、Safari4、Safari3、Chrome、Opera10、Opera9

这个是我经常用的测试工具，使用方法很简单，就是先打开它的首页，然后在随意一个代表浏览器的小窗口点击下载一个浏览器插件，安装完成后再点击对应浏览器小窗口便开始安装对应浏览器沙盘程序，安装完成后再点击浏览器小窗口就会打开对应浏览器了，这个浏览器和真正的浏览器一摸一样，而且弹出的窗口也是应用程序，并且我们也不用担心病毒，因为它是在沙盘中运行的。

Adobe  lab

• 性质：网页flash程序
• 使用方式：打开网页，登陆adobe账户，直接使用
• 浏览形式：网页缩略图
• javascript：不支持
• 使用地址：https://browserlab.adobe.com/index.html
• 支持浏览器：IE6、7、8；Firefox2、3、3.5 for Win or Mac OS；Safari3.0、4.0 for Mac OS

这个Adobe的产品就是强大，一下子支持这么多浏览器不说，而且还支持不同系统下的浏览器，不过它的缺陷也很明显，由于是基于flash程序，因此加载网页速度很慢，并且加载出来的东西不是HTML而是一张图片，因此就实用性来说并不大，它最显著的功能在于你能通过它知道你要测试的网页在各种浏览器下是什么样子，而且它可以生成两个网页左右对比，也可以进行网页重叠对比，至于其他，我还是建议你用上面推荐的测试工具吧，毕竟它不能用来测试你的javascript！

Microsoft Expression Web 3 SuperPreview

性质：客户端程序

使用方式：下载程序安装到本地运行

浏览形式：网页缩略图，带HTML结构，可以用自带选择器选择html结构

javascript：不支持

下载地址：http://download.microsoft.com/download/5/6/8/568F0D28-0434-4794-B7FC-FB293BCC98FB/SuperPreviewIE_en.exe

支持浏览器：IE6、7、8

这个是微软官方出品的测试工具，通过它可以很强大的调试IE各浏览器环境下的网页显示bug，可惜的是它同样不支持javascript的调试。详细内容可以参照我以前的一篇文章

《体验篇：Microsoft Expression Web 3 SuperPreview全攻略》

有了这些工具，让你的测试变的更简单些吧！可能你还有更好的测试工具，如果真是如此，那么不妨也拿出来分享给大家呗！

原著资源，转载请著名并链接到出处 Pivot Code，谢谢！

相关日志

• 第六期web标准化交流会短记
• 基础Javasctipt正则表达式
• 第六期web标准化交流会心得
• 体验篇：Microsoft Expression Web 3 SuperPreview全攻略
• “IETester”微软官方产品SuperPreview之感慨篇

这篇是SuperPreview软件的体验篇，之前有一篇SuperPreview的感慨篇，如果您对其有兴趣可以点击这里《“IETester”微软官 方产品SuperPreview之感慨篇》

牢骚发过了，现在来看看这款软件给我们带来的革命吧！

如果您还没有下载，点击这里下载Microsoft Expression Web 3 SuperPreview（官方地址）

如果您已下载成功，那么跟我一起开始把它安装到自己的电脑里面吧！（高手绕路）

首先运行刚刚下载好的文件，运行后会出现如下步骤：

step1：License agreement 许可协议，当然是点Accept接受了

setp2: Installation 安装，点击options会出现如下图所示的更改路径界面，默认是c:\Program Files\Microsoft Expression（我习惯性吧应用程序放D盘,因此我这里显示的是d:\Program Files\Microsoft Expression），您也可以选择自己喜欢的安装路径。选择好安装路径后，点击install。

step3、安装等待……

step4、安装成功后的感谢界面，下面有个按钮View release notes查看发行声明，点击会到微软官方的说明网站，这里选择Finish按钮，完成。

这样就把Super Preview安装到电脑了，现在点击桌面的图标开始体验吧！

打开等待界面……

之所以放上这个安装步骤，其实主要原因是我很喜欢它的UI（用户界面），毕竟使用这个软件的人都是前端工程师，都是对审美有需求的，自然我也不例外，其实微软近期发布的新产品UI都全换成类似于这样的了，例如Office2010,毕竟是有影响力的企业，UI总是有我们可以借鉴的地方，比如配色，构图等等。一个好的设计师并不是天生的，而是用时间和经验还有欣赏所积累的。

接下来，就是我们的SuperPreview窗口了。

如此，您看到的便是期待的、传说的、神秘的Microsoft Expression Web 3 SuperPreview整个界面了。可能它并不像我们想像的那样完美，比如它会看起来更像是浏览器，可惜，它不是，而是更像一个类似于图形图像软件的页面调试工具，正如它的界面所传达的信息一样，它会把我们将调试的网页生成一张全览图，类似于Adobe公司的browserlab。

不过值得庆幸的是，它也并没有那么糟糕，虽然我们看到的是一张我们网页的全览图，但是它会生成我们布局中所用到的任何一个元素位置，然后通过一个类似于FireBug的选择工具来选取我们想了解的元素，并且点击它会显示这个元素的大小、左边的距离值，和顶部的距离值，这样我们就可以通过左右对比来判断在IE6和IE8下布局中元素的布局差别了。

如图所示，这是此网站在superpreview下的IE6（左）和IE8（右）的对比，我用鼠标选择了导航的首页按钮（当选择任意一边时，另一边会同时选择），然后会同事在对比窗口左下角显示这个元素的信息，其中两侧数据不同的地方，信息位置会把差异值显示成红色。

点击界面右下角的DOM（Document Object Model文档对象模型）按钮，可以在界面下方弹起一个类似于FireBug的调试窗口，并显示出在对应浏览器下所有的元素（如果使用了判断注释，例如[if IE6]那么在IE8下将不显示其中的DOM）。和选择图中的元素一样，当点击任何一边的标签时，右侧的标签便会一起选中，并显示其数值。

其它功能

在界面顶部是SuperPreview软件的功能区，从左向右依次是：

1.1、Selection Model选择器，快捷键（V）（通过它选择任何想得到的界面中元素）

1.2、Panning Model拖动，快捷键（H）（拖动界面视图到需要的位置，拖动任意一方，另一方会一起移动到相同位置）

2.1、凸显方式:Box highLighting Model圈中元素，快捷键（L）（如上图样式）

2.2、凸显方式：Light-Out highlighting Model高亮元素,快捷键（L）（下图样式）

3.1、Toggle ruler visiblity切换标尺可见性，快捷键（R）（点击打开和关闭边缘的标尺）

3.2、Toggle thumbnail visiblity切换缩略图可见性，快捷键（T）（点击会在窗口右下角显示一小条网页的全景缩略图）

3.3、Toggle guide visiblity切换指示的可见性，快捷键（Ctrl+；）（没用出效果）

4.1、Vertical Split Layout垂直分割布局，快捷键（A）（上面截图所呈现的布局样式）

4.2、Horizontal Split Layout水平分割布局，快捷键（S）（上下显示布局）

4.3、Overlay Layout覆盖布局，快捷键（D）（重合显示两个窗口中的网页）

4.4、Single Layout单一布局，快捷键（F）（显示其中一个页面，然后通过下侧的tab切换当前显示）

5.1、地址栏

5.2、路径选择按钮

5.3、刷新

6、缩放比例（可以从中选择，也可以选中更改，还可以拖动鼠标实现缩放）

7、帮助

顶部的功能栏，到这里就介绍完了，如此整个软件介绍也差不多就是这些了，不过还有一个强大的功能，那就是底部的tab。

底部tab是显示的当前正在调试的网页，类似于我们浏览器的tab，但是如果这么想那就错了，仔细看：

如图所示，最左侧是我打开的IE6窗口，右侧依次是IE8和IE7，发现右侧右下方的加好了么，点击那个的话，如果我们新建立的是IE6窗口，那么最左侧的IE6会并合到右侧的tab里和IE8、7并列显示。自然，如果在左侧新建IE7的话，那么右侧并列显示的IE6就会跑到左侧Tab了。

另外一个细节是在软件右下角有个调整分辨率的选择器，通过它可以选择不同分辨率下我们要测试网页的显示效果。

好了，那么讲到这里就是我发觉到SuperPreview这个软件全部的功能了，如果您发觉到我没有发现的更好的功能，欢迎留言指出，或提供分享。谢谢！

不足：

任何东西都不会完美，这个软件虽然带给我们很大的便利，但是它还是存在一些令人讨厌的体验。

1、网页打开速度很慢

2、如果新建tab的话，它不会独立加载显示新建tab的页面，而是让我们刷新全部打开的tab。

3、只能针对一个网站测试

4、不能时时更改，类似于FireBug的功能

5、调试Javascript就更别想咯……

因此，虽然有了SuperPreview，但是我们还是不能摆脱安装古典浏览器的命运。希望微软能再改进改进吧！

谢谢观赏！

相关日志

• “IETester”微软官方产品SuperPreview之感慨篇
• 微软实验室产品Pivot浏览器初体验
• 基础Javasctipt正则表达式
• 网页测试工具分享
• IE9 Platform Preview——IE9预览版本

jQuery 1.4 最近发布了。 超乎大家的预期，这次并非简单的修修补补，1.4 包含了很多新特性、功能增强和性能提升！本文即向您介绍这些可能对你十分有用的新特性和优化增强。

你可以立刻下载jQuery 1.4试用： http://code.jquery.com/jquery-1.4.js

1. 传参给 jQuery(…)

之前，jQuery可以通过 attr 方法设置元素的属性，既可传属性的名和值，也可以是包含几组特定 属性名值对 的 对象。在 jQuery 1.4 中，你可以把一个参数对象作为第二个参数传给 jQuery 函数本身，同时创建HTML元素。

比方说你想要创建一个带有几个属性的锚记元素（<a></a>）。在1.4中，一切如此简单：

jQuery('<a/>', {
 id: 'foo',
 href: 'http://google.com',
 title: 'Become a Googler',
 rel: 'external',
 text: 'Go to Google!'
 });

你大概也能猜到，这个锚记元素没有的 text 属性会调用 jQuery 的私有方法”.text()” ，把元素里的文字设置为“Go to Google!”

针对这一用法，下面是更有用的实例：

jQuery('<div/>', {
 id: 'foo',
 css: {
 fontWeight: 700,
 color: 'green'
 },
 click: function(){
 alert('Foo has been clicked!');
 }
 });

id 为一般属性，被直接加上了，而 css 和 click 则激发了相应的 jQuery 方法。在1.4以前，上面的代码需写成这个样子：

jQuery('<div/>')
 .attr('id', 'foo')
 .css({
 fontWeight: 700,
 color: 'green'
 })
 .click(function(){
 alert('Foo has been clicked!');
 });

详细了解 jQuery(…)

2. 直到遇见你…

1.4的DOM遍历工具包里又增加了3个新方法：nextUntil， prevUntil 和 parentsUntil。这些方法会按照特定的方向遍历DOM，直到遇到满足指定选择符的元素为止。举例来说，现在我们有一张水果名的清单：

<ul>
 <li>Apple</li>

 <li>Banana</li>
 <li>Grape</li>

 <li>Strawberry</li>
 <li>Pear</li>

 <li>Peach</li>
 </ul>

我们想挑选出所有在 Apple 后，Pear 前的所有条目。代码十分简单：

jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');
 // 选出的是 Banana, Grape, Strawberry

详细了解： prevUntil, nextUntil, parentsUntil

3. 绑定多个事件处理器

不再需要把各个事件绑定方法“链”在一起，现在你可以把它们捆成一堆，如下：

jQuery('#foo).bind({
 click: function() {
 // do something
 },
 mouseover: function() {
 // do something
 },
 mouseout: function() {
 // do something
 }
 })

这一用法也适用于 “.one()“.

详细了解 .bind(…)

4. 依属性指定缓动效果

以前只能为一个动画指定一种缓动效果（easing，即动画过程中的速度变化规律。jQuery 原生支持两种缓动效果，swing（默认）和linear 。要使用其他效果，你需要自己另行下载。），现在你可以为动画的各个属性参数指定不同的缓动效果：

jQuery('#foo').animate({
 left: 500,
 top: [500, 'easeOutBounce']
 }, 2000);

点此查看实际效果

你也可以在一个可选的动画选项对象中为 secialEasing 设置一系列名值对来完全上面的工作：

jQuery('#foo').animate({
 left: 500,
 top: 500
 }, {
 duration: 2000,
 specialEasing: {
 top: 'easeOutBounce'
 }
 });

编辑注：我们的作者 James Padolsey 谦虚了，这一功能点是他想出来的哦！

详细了解有关 per-property-easing 的内容

5. 更新的 Live 事件！

jQuery 1.4 添加了对指派 submit ， change ， focus 和 blur 事件的支持。在jQuery中，我们利用”.live()” 方法指派事件。当你想要为多个元素注册事件处理器时，这会非常有用。而且就算满足选择符的元素是新出现的，这些事件也会继续有效（使用 .live() 比不断重复绑定要省力省心得多）。

不过，当心了！注册 focus 和 blur 事件时你需要用 focusin 和 focusout 作为事件名。

jQuery('input').live('focusin', function(){
 // do something with this
 });

6. 控制函数上下文

jQuery 1.4 提供了一个全新的 proxy 函数，位于 jQuery 命名空间下。这一函数接受两个参数，一个是“作用域”（scope）或者一个方法名，另一个是某函数或者目标作用域（the intended scope）。

众所周知， JavaScript的 this 关键字是一个很难把握的东西。有时候你并不想它代表一个元素，而想让它代表你前面创建的某个对象。

例如，在这里我们创建了一个 app 对象，它拥有两个属性，一个是 clickHandler 方法，一个是负责参数配置的对象。

var app = {
 config: {
 clickMessage: 'Hi!'
 },
 clickHandler: function() {
 alert(this.config.clickMessage);
 }
 };

这个 clickHandler 方法，当像 app.clickHandler() 这样调用时，app 就是其上下文，也就是说 this 关键字指向的是 app 。如果只需简单地调用，这样的写法没什么问题：

app.clickHandler(); // "Hi!" is alerted

不过如果把它当作一个事件处理器：

jQuery('a').bind('click', app.clickHandler);

当我们点击这个锚记时，并没有达到预想的效果（没东西 alert 出来）。这是因为 jQuery （以及大部分理智的事件模型），默认地，都会把处理器的上下文指定为目标元素本身。也就是说，this 所代表正是被点击的这个链接。而我们想的是，this 应该继续代表 app 。在jQuery 1.4中，实现这一目的十分简单：

jQuery('a').bind(
 'click',
 jQuery.proxy(app, 'clickHandler')
 );

现在点击所有锚记都会弹出“Hi!”了。

代理函数把你的函数包裹一圈，同时把函数内的 this 设定为你想要东西。在其他上下文应用场景，如把回调函数传给其他 jQuery 方法或插件，代理函数也能派上用场。

了解更多 jQuery.proxy

7.  动画队列延迟

现在，可以给动画队列加一个延迟了。虽然这个功能可以在任何队列里实现，但最常用的可能还是延迟“fx 队列”（”fx” queue，jQuery默认的动画队列）。它能让你在两个动画行为之间暂停一下，而不用牵扯到回调函数和 setTimeout 之类的东西。.delay() 的第一个参数即你需要设定的延迟毫秒数：

jQuery('#foo')
 .slideDown() // Slide down
 .delay(200) // Do nothing for 200 ms
 .fadeIn(); // Fade in

如果你想延迟一个除 fx 以外的队列，把队列名作为第二个参数传给 .delay() 就可以了。

详细了解 .delay(…)

8. 检测元素是否含有特定内容

jQuery 1.4 让检测一个元素（或集合）是否含有（.has()）某项东西更为容易。其背后的机理和选择过滤器 :has()是一样的。这个方法会从当前集合中选出满足任意指定条件之一的元素。

jQuery('div').has('ul');

这条语句在所有DIV元素中挑出那些包含UL元素的。这种情况可能用选择过滤器 :has() 就好了，但当你要更程式化地过滤选择集时 .has() 方法就十分有用了。

jQuery 1.4 还在 jQuery 命名空间下新增了一个 contains 函数。这是一个比较底层的函数，接受两个 DOM 节点为参数。返回一个布尔值，指示第二个元素是否包含在第一个元素中。例如：

jQuery.contains(document.documentElement, document.body);
 // 返回true - <body> 确实包含在 <html> 中

消息了解： .has(…), jQuery.contains(…)

9. 给元素剥皮！

很早以前，jQuery 就可以用 .wrap() 给元素裹一层皮。现在， jQuery 1.4 添加了 .unwrap() 方法，用以剥皮。看下面的DOM结构：

<div>
 <p>Foo</p>
 </div>

来把 p 元素外面的一层皮（div）剥掉：

jQuery('p').unwrap();

DOM 变成了：

<p>Foo</p>

总而言之，这个方法可以把任意元素的父元素移除。.

详细了解 .unwrap(…)

10. 移除元素，而不删除数据

以前有一个.remove()方法，是把元素剥离后抛弃。全新的 .detach() 方法可以让你把一个元素从DOM中剥离，而不丢失数据。囊括该元素的 jQuery 对象会在操作完成后还保留这个元素。数据可以通过 .data() 或者 jQuery 事件系统中的任意事件处理器传入 jQuery 对象。

当你需要把某个元素从DOM中移除，然后在将来某个场景中重新引入时，这个函数会很有用。元素的事件句柄和其他所有数据都会被保留。

var foo = jQuery('#foo');

 // 绑定一个重要的事件处理器
 foo.click(function(){
 alert('Foo!');
 });

 foo.detach(); // 从DOM中移除
 // … do stuff

 foo.appendTo('body'); // 重新加入到DOM

 foo.click(); // 弹出alert信息： "Foo!"

详细了解 .detach(…)

11. index(…) 的功能增强

jQuery 1.4 为您使用 .index() 提供了两种新方法。以前，你必须把元素作为参数传给它，然后获得一个返回的数值，代表在当前集合中这个元素的索引。现在，如果不传参数过去，返回的值就代表某元素在其同辈中排行老几。比方说下面的DOM：

<ul>
 <li>Apple</li>

 <li>Banana</li>
 <li>Grape</li>

 <li>Strawberry</li>
 <li>Pear</li>

 <li>Peach</li>
 </ul>

你想要晓得点击一个条目后它是列表中的第几个，实现的代码十分简单：

jQuery('li').click(function(){
 alert( jQuery(this).index() );
 });

jQuery 1.4 也允许你将选择符作为 .index() 的第一个参数。这样做会返回当前元素在你指定的选择符所匹配出的元素集合中的索引值。

还得提醒一点，这一方法返回的是数值，如果文档中无法找到指定条件的元素，会返回数值 -1 。

详细了解 .index(…)

12. DOM 操纵可接收回调函数

现在，大部分的DOM操纵方法都支持了将 函数 作为单一参数传入（.css() 和 .attr() 传入为第二个参数）。这个函数会为选择集中的每一个元素都跑一遍，从而为相应操纵方法提供更“有个性”的值。

下列方法支持这一功能：

• after
• before
• append
• prepend
• addClass
• toggleClass
• removeClass
• wrap
• wrapAll
• wrapInner
• val
• text
• replaceWith
• css
• attr
• html

有了回调函数，你就能在选择集中利用 this 关键字来访问当前元素，用回调函数的第一个参数来访问其索引值。

jQuery('li').html(function(i){
 return 'Index of this list item: ' + i;
 });

还有还有，上面的某些方法还提供第二个参数供你利用。如果你调用的是一个设定型方法（如.html() 和 .attr('href...) ），你还能取得当前值。例如：

jQuery('a').attr('href', function(i, currentHref){
 return currentHref + '?foo=bar';
 });

如您所见，对于.css() 和 .attr() 方法来说，之所以要把函数作为第二个参数传递，是因为第一个参数要用来指定我们需要修改的是哪一个属性：

jQuery('li').css('color', function(i, currentCssColor){
 return i % 2 ? 'red' : 'blue';
 });

13. 判定对象类型

jQuery 1.4 新增了两个全新的辅助函数（都直接位于 jQuery 命名空间下），可以帮助你判别你正在操纵的是何种对象。

第一个函数是 isEmptyObject, ，它返回一个布尔值，判定对象是否为空（）。第二个是 isPlainObject ，它返回的布尔值代表传递过去的参数是否为JavaScript的简单对象（plain object），也就是用 {} 或 new Object()创建的对象。

jQuery.isEmptyObject({}); // true
 jQuery.isEmptyObject({foo:1}); // false

 jQuery.isPlainObject({}); // true
 jQuery.isPlainObject(window); // false
 jQuery.isPlainObject(jQuery()); // false

了解更多： isPlainObject(…), isEmptyObject(…)

14. Closest(…) 的功能增强

jQuery的.closest() 方法现在可以接受一组选择符作为参数。当你需要遍历某一元素的所有上级，找到一个以上符合特定特征的最近元素时，此功能就能派上用场。

而且，现在它还能接受上下文环境作为第二个参数，也就是说你可以控制DOM遍历的深度或者说远度。虽然说大家可能很少会用到这两个新特性，但一旦用上效果是惊人的！

了解更多 .closest(…)

15. 新事件！ focusIn 与 focusOut

如前所述，现在部署 focus 和 blur 事件时，你需要使用 focusin 和 focusout 这两个新事件。这两个事件帮助你在特定元素或者该元素的子元素 获取/失去 焦点时采取行动。

jQuery('form')
 .focusin(function(){
 jQuery(this).addClass('focused');
 });
 .focusout(function(){
 jQuery(this).removeClass('focused');
 });

值得说明的是，这两个事件不会传播开来（即所谓的“冒泡”），它们会被捕获住。也就是说，外部元素（父辈）会在作孽的“目标”元素（causal “target” element）之前被触发。

了解更多关于 focusIn 和 focusOut 事件的内容。

爱上 jQuery 1.4 吧！史上考虑最周到，功能最丰富，性能最好的 jQuery ！

就是这样… 我已经介绍完我觉得对你最有影响的一些新特性了。

如果你还不知道，那就赶快去看看 “14 days of jQuery”活动，为庆祝 jQuery 1.4 的发布和 jQuery 四岁生日而举办的超赞的线上活动。秀出你用 jQuery 写的得意之作，赢得 MediaTemple 一年的主机使用权！

另外，别放了看看全新的 API 文档 ！

原文作者：James Padolsey

原文地址：http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/

转载需保留出处。

相关日志

• 基础Javasctipt正则表达式
• 网页测试工具分享
• 体验篇：Microsoft Expression Web 3 SuperPreview全攻略