appMobi已经开放了jQ.Mobi的源代码，它对jQuery进行了重写，与jQuery Mobile竞争以分享开发者份额。

jQ.Mobi是jQuery的部分重写版本，但针对HTML5和移动设备做了优化。它的文件大小只有3KB，而jQuery则有35KB，并且据JSPerf test的数据，它在Android上要比jQuery快3倍，在iOS上快2.2倍。该框架是由appMobi发布并开源的。因为jQ.Mobi是插件式开发，所以它的编程语法和jQuery完全相同。jQ.Mobi只包含jQuery API的子集，也就是appMobi认为给iOS和Android提供完全相同用户体验最重要的那部分。

jQ.Mobi由三个组件组成：

• 查询（query）程序库
• jQ.Ui——为WebKit浏览器提供的用户界面程序库
• jQ.Plugin——针对WebKit浏览器的插件支持

他们创建了一个演示来展现框架的功能。

人们为什么要在jQuery团队发布了jQuery Mobile 1.0两个月之后，又创建了新的基于jQuery的JavaScript框架呢？appMobi这样做的原因在于，jQuery植根于桌面浏览器，因此他们的移动版本并没有很好地优化，并且也无法在移动设备上——特别是在Android设备中——提供良好的体验。

jQuery团队的移动领域主管Todd Parker承认jQuery Mobile中存在一些问题，并且团队刚刚发布了维护版本（1.0.1），其中修正了大量缺陷，他们还会在1.2版本中提供更多小工具并做出改进。

查看英文原文：jQ.Mobi – jQuery Optimized for Mobile Devices

您可能感兴趣的文章

• jQuery-bind不能处理绑定hover事件
• 9个实用jQuery日历插件
• jQuery 操作css 设置样式
• JQUERY操作XML实例教程
• 不要滥用jQuery的$(this)
• 编写高性能的jQuery代码
• jQuery中的mouseenter和mouseleave事件
• 流动导航菜单-Fluid Navigation 使用Jquery+CSS创建
• 高亮显示文本中重要关键字（Jquery ）
• 12个用jQuery插件改变Button按钮的漂亮特效

Path最新的更新，通过优秀的用户体验设计赢得了大批用户和业内的好评，被成为移动版的“Facebook”！一时之间，在国内你如果不知道Path2.0的话，你就OUT了。

Path 2的UI设计相当出色。最核心的是左下角的红白色加号按钮，点击后会出现6类功能，依次是：照片、和谁在一起、当前地点、在听的音乐、在想的事情、以及睡眠，使用起来得心应手，十分方便。

你不仅可以和Path好友分享，还能把你的分享发布到Facebook或Foursquare等网站上。和之前版本相比，Path 2从侧重照片分享走向“分享一切”、好友上限从50人增加到150人。

除了在产品圈热议之外；其实在技术圈，被讨论最多的是path那个Menu的实现问题。所有给力的产品都离不开程序猿同学的各种努力，看看怎样用不同的语言实现Path2.0的Menu效果！

1. @LeveyZhu 的实现效果： https://github.com/levey/QuadCurveMenu
2. Tunghsiao Liu ：CSS实现的效果：http://sparanoid.com/lab/path-menu/
3. 一老外兄弟的实现：https://github.com/beaucollins/radial-menu
4. Benzhe ：javacript实现 https://github.com/ben304/Path2.0-Menu/
5. 再来一个CSS实现：http://lab.victorcoulon.fr/css/path-menu/ 貌似被ban

本文实现方式整理自中文技术问答网站SegmentFault

您可能感兴趣的文章

• 非常经典动画导航菜单效果代码
• jquery 经典动画菜单效果

1，JavaScript compressor and comparison tool

有许多工具可以帮助你压缩JavaScript代码，但是这个过程比较耗时，并且，对于某个特定的场景来说，很难分析出具体哪个工具表现的最好。这 个应用程序可以对那些工具的常规压缩做一个汇总统计，它可以让开发者在不安装这些工具的情况下，对在自己的JavaScript代码上应用那些工具的情况 进行比较。

具体可以参考：http://compressorrater.thruhere.net/

2，Regular expression validator tool

这个基于Web的JavaScript正则表达式验证器可以让你轻松地为JavaScript测试和编写正则表达式。这个工具可以帮助你检查语法方面的错误，此外，它还为你提供一个正则表达式库。

具体可以参考：http://tools.netshiftmedia.com/regexlibrary/

3，Regular expression generator

在IE中，这个脚本运行在 JDC 1.0.3 之上，这就是它在 Firefox，Opera 和 Safari 上运行的稍微快一些的原因。

具体可以参考：http://www.jslab.dk/tools.regex.php

4，Jsbeautifier

这个微型的美化器可以重新调整 bookmarklet 和丑陋的JavaScript的格式和缩进，也可以对使用流行的 Dean Edward 的 Packer 打包的脚本进行拆包，对通过javascriptobfuscator.com 混淆的脚本进行反混淆。

具体可以参考：http://jsbeautifier.org/

5，Jsbin

JS Bin是一个开源的，协同的JavaScript调试工具。

具体可以参考：http://jsbin.com/

6，Jslint

JSlint会对JavaScript的源代码进行扫描。如果它发现了一个问题，会返回一个描述这个问题的消息和源代码中的大概位置。这个问题不一 定是一个语法错误（虽然通常情况下，这个问题都是一个语法错误）。JSLint 会发现一些样式约定和结构问题。它无法证明你的程序是正确的。它只能帮助你发现一些问题。

具体可以参考：http://www.jslint.com/

7，Rockstarapps

Rockstarapps 的使命比较简单：给开发者提供一套工具，让他们可以在云中创建经过高度优化的Web应用程序。

具体可以参考：http://rockstarapps.com/joomla-1.5.8/home.html

8，Prettyprinter

这是一个源代码美化器（源代码格式化器），和缩进的效果是类似的。

具体可以参考：http://www.prettyprinter.de/

9，Pixastic

Pixastic是一个实验性的库，使用这个库，你只需要一点点的 JavaScript 代码，就可以执行各种图像操作。它支持的效果包括淡化/灰度调整，倒置，翻转，亮度/对比度的调整，色调/饱和度，浮现，模糊，等等。

具体可以参考：http://www.pixastic.com/

10，Extjs

构建丰富的，可持续发展的Web应用程序比以往更加快捷了。许多著名的公司（Adobe, Amazon, CNN 等）都在使用extjs。

具体可以参考：http://www.sencha.com/

11，Slickspeed

各种测试在一个中立的环境中运行，在主要的JavaScript测试中，既不包括库也不包括框架，这样可以避免偏颇。

具体可以参考：http://mootools.net/slickspeed/

12，Scriptalizer

对于那些在互联网上部署和传输的解释性语言（例如：JavaScript）来说，对源代码进行最小化是很有帮助的，因为这可以减少需要传输的数据量。

具体可以参考：http://www.scriptalizer.com/

13，Yui compressor

YUI Compressor 是100%安全的 JavaScript 最小化器，它比大多数其他工具的压缩比都要高。在YUI库上的测试表明，和 JSMin 比起来，它可以节省超过20%的体积（在HTTP压缩以后，这个数字是10%）。

具体可以参考：http://developer.yahoo.com/yui/compressor/

14，Js minifier

具体可以参考：http://fmarcia.info/jsmin/test.html

15，Jslitmus

JSLitmus 是一个轻量级的工具，主要用于创建 ad-hoc JavaScript benchmark tests。

具体可以参考：http://broofa.com/Tools/JSLitmus/

16，Js regular expression tester

这个方便的实用程序可以在一个浏览器中，使用 JavaScript 来测试 JavaScript 正则表达式。它的界面和其他正则表达式测试工具类似，但是，和其他工具不同的是，它用JavaScript 测试正则表达式的 JavaScript 实现。

具体可以参考：http://www.codeproject.com/KB/scripting/regex2.aspx

17，Qooxdoo

qooxdoo是一个集综合性和创新性于一身的框架，它主要用于创建富互联网应用程序（RIA）。面向对象的 JavaScript 可以让开发者构建跨浏览器的应用程序。无须掌握HTML, CSS的知识，也无须掌握 DOM 知识。

具体可以参考：http://qooxdoo.org/

18，JavascriptMVC

JavascriptMVC是一个开源的框架，它融合了企业级的 JavaScript 开发方面的最佳理念。它可以通过执行最佳实践，增加可维护性，和推广约定优于配置的理念等方式来帮助你成功地完成项目。

具体可以参考：http://javascriptmvc.com/

19，GNUcitizen

为了把JavaScript攻击向量和其他的客户端和服务端技术组合在一起，AttackAPI提供了简单而直观的编程界面。

具体可以参考：http://www.gnucitizen.org/blog/attackapi/

20，Jsfuzzer

这个 fuzzing 工具支持事件，标签，样式和 HTML 属性的 fuzzing。你可以使用各种深度的不完整标签，也可以对所有参数进行随机排列。它还包含一个带有所有新的攻击向量的数据库。

具体可以参考：http://code.google.com/p/jsfuzzer/

21，J3unit

J3Unit是一个面向对象的 JavaScript 单元测试框架。J3Unit可以直接在Web浏览器中运行JavaScript测试，也可以自动地运行 JUnit 和Jetty。J3Unit是建立在JSUnit 和 Script.aculo.us 基础之上的，它提供了一种更好的方式来自动化JavaScript单元测试。

具体可以参考：http://j3unit.sourceforge.net/

22，Jsunit

JsUnit是一个客户端（浏览器内）JavaScript单元测试框架。它实际上是JUnit到JavaScript的一个通道。此外，它还包括一个平台，这个平台可以自动地执行多个浏览器和运行不同的操作系统的多台机器上的测试。

具体可以参考：http://www.jsunit.net/

23,Firebug

Firebug是和 Firefox 集成在一起的，当你浏览页面的时候，你随时可以使用它提供的丰富的Web开发工具。在任何一个Web页面中，你都可以实时地编辑，调试和监控 CSS，HTML，和JavaScript。

具体可以参考：http://getfirebug.com/

24，Venkman

Venkman 是 Mozilla 的 JavaScript 调试器的代号。Venkman 旨在为基于 Gecko 的浏览器（即：Firefox 3.x,Netscape 7.x 系列的浏览器）提供一个强大的 JavaScript 调试环境。

具体可以参考：http://www.mozilla.org/projects/venkman/

25，Drosera

为了调试你的应用程序中的 JavaScript 代码，你需要为你的应用程序指定一个默认的“bundle identifier”。此外，你还需要使用 TOT WebKit 框架来发布你的应用程序。通过 WebKitTools/Scripts 内的 run-webkit-app 脚本，你可以轻松地完成这些工作，然后，你会发现你的应用程序已经显示在 Drosera 的窗口中了。

具体可以参考：http://webkit.org/blog/61/introducing-drosera/

26，Dragonfly

欢迎 Opera Dragonfly 的 alpha版的到来，这是一个为基于 Presto 的 Opera 浏览器而提供的功能完备的调试环境。Opera Dragonfly 提供的那些工具可以让你更快速，更轻松地进行开发，它们可以调试你的 JavaScript 代码，也可以检查DOM，CSS，网络流量和数据存储。Opera Dragonfly 内置的远程调试功能让移动开发变得前所未有的轻松。

具体可以参考：http://www.opera.com/dragonfly/

27，Nitobibug

对于专家和新手来说，NitobiBug 都是一个实用的工具。它让 JavaScript 和 DOM 问题的调试变得更加快捷，更加简单。

具体可以参考：http://www.nitobibug.com/

28，Wavemaker

具体可以参考：http://www.wavemaker.com/

29，Jaxer

Jaxer是一个 Aptana Ajax Server，它内置在 Aptana Studio 中。Jaxer可以让你在提供那个页面以前或者是在回调期间，在服务器上执行 JavaScript 代码。

具体可以参考：http://jaxer.org/

30，Jxlib

一个 JavaScript 库，主要用于创建基于传说中的 MooTools 库的图形化的用户界面。

具体可以参考：http://jxlib.org/

31，Dojotoolkit

Dojo 可以节省你的时间，提供强大的性能，缩短你的开发过程。为了提供良好的Web体验，有经验的开发人员都会使用这个工具包。

您可能感兴趣的文章

• Web 前端优化最佳实践之 JavaScript 篇
• javascript 正则表达式-替换
• 高质量JavaScript代码书写基本要点|值得收藏
• 前端开发的一些必备工具信息
• js入门学习：Javascript的学习笔记
• 学习JavaScript三件必须了解的事
• JavaScript操作iframe里的dom
• javascript中的107个基础知识收集整理
• 所有网站长必备的SEO工具大全
• JavaScript面向对象之静态与非静态类

第一种方法：通过IE与非IE浏览器对垂直制表符支持特性搞出的一段简短的条件：

var ie = !+”\v1″;

第二种方法：利用了IE与标准浏览器在处理数组的toString方法的差异做成的。对于标准游览器，如果数组里面最后一个字符为逗号，JS 引擎会自动剔除它。
var ie = !-[1,];

大家可以测试一下：

var ie = !-[1,];

alert(ie);

赶快试试，这个判断 该死的ie把，这样能让你事半功倍。

随机日志推荐

$(document).ready(function(){

$('.some-class').bind({

hover: function(e) {

// Hover event handler

alert("hover");

},

click: function(e) {

// Click event handler

alert("click");

},

blur: function(e) {

// Blur event handler

}

});

});

奇怪的事情发生了，这里的 “hover” 事件完全没有反应。 而像 “click” 和 “blur” 这两个都能正常调用。

同时，如下的代码也是正常运行的：

$(".some-class").hover(function(){

// stuff

})

为什么 bind 不能绑定 hover 呢？

答案是：
应该使用 mouseenter 和 mouseleave 这两个事件来代替 (这也是 .hover() 函数中使用的事件) 所以完全可以直接像这样来引用:

$(document).ready(function(){

$('.some-class').bind({

mouseenter: function(e) {

// Hover event handler

alert("hover");

},

mouseleave: function(e) {

// Hover event handler

alert("hover");

},

click: function(e) {

// Click event handler

alert("click");

},

blur: function(e) {

// Blur event handler

}

});

});

因为 .hover() 是 jQuery 自己定义的事件… 是为了方便用户绑定调用 mouseenter 和 mouseleave 事件而已，它并非一个真正的事件，所以当然不能当做 .bind() 中的事件参数来调用。

您可能感兴趣的文章

• jQ.Mobi—针对移动设备优化的jQuery
• 9个实用jQuery日历插件
• jQuery 操作css 设置样式
• JQUERY操作XML实例教程
• 不要滥用jQuery的$(this)
• 编写高性能的jQuery代码
• jQuery中的mouseenter和mouseleave事件
• 流动导航菜单-Fluid Navigation 使用Jquery+CSS创建
• 高亮显示文本中重要关键字（Jquery ）
• 12个用jQuery插件改变Button按钮的漂亮特效

FullCalendar是很出名的jQuery日历插件，它支持拖拽等功能，整合了Google Calendar，而且可以通过JSON来绑定事件，设计师可以轻松地自定义日历样式，工程师则利用它提供的接口来处理用户触发事件。

2. Astonishing iCal-like Calendar

这里是一篇教程，教你如何利用jQuery和CSS制作一个模仿iphone样式的日历控件。

3. jQuery UI Datepicker

jQuery UI Datepicker 是一个提供了很多配置项的日历插件，你可以自定义日期的格式和语言，可通过按钮限制可选的日期范围，也可轻松地添加其他功能的按钮。

4. jMonthCalendar

jMonthCalendar支持没个月份里的所有天数添加内容，本身可以应用到开发工作中。

5. Date Picker

Date Picker 遵循MIT & GPL发布.，有着很多的配置项和特性，例如你可以同时打开多个日期选择器，轻松地通过修改css来自定义样式，支持多种日期选择模式。

6. jQuery Week Calendar

jQuery Week Calendar 是一个在web应用中显示一周情况的插件，可以通过数据或者JSON来绑定相应的触发事件，而且这些事件都可以拖拽、缩放，而且还有很多选项和事件回调函数可以使用在应用中，具体的可以参考官方文档。

7. Simple jQuery Date-picker Plugin

这是一个很简洁的日期选择器，但是提供了很多实用功能。

8. jQuery Date Picker Plugin

跟上面介绍的类似，在显示风格上略有区别。

9. jQuery Interactive Date Range Picker

这个强大的日历控件时jQqueryUI中日历组建的改良版，它有十分平滑的显示过渡效果，最新版使用的是jQuery UI 1.7 一级 jQuery UI CSS 框架，你可以通过jQuery UI来修改出自己期望的效果.

您可能感兴趣的文章

• jQ.Mobi—针对移动设备优化的jQuery
• jQuery-bind不能处理绑定hover事件
• jQuery 操作css 设置样式
• JQUERY操作XML实例教程
• 不要滥用jQuery的$(this)
• 编写高性能的jQuery代码
• jQuery中的mouseenter和mouseleave事件
• 流动导航菜单-Fluid Navigation 使用Jquery+CSS创建
• 高亮显示文本中重要关键字（Jquery ）
• 12个用jQuery插件改变Button按钮的漂亮特效

您可能感兴趣的文章

• jQ.Mobi—针对移动设备优化的jQuery
• jQuery-bind不能处理绑定hover事件
• 9个实用jQuery日历插件
• JQUERY操作XML实例教程
• 不要滥用jQuery的$(this)
• 编写高性能的jQuery代码
• jQuery中的mouseenter和mouseleave事件
• 流动导航菜单-Fluid Navigation 使用Jquery+CSS创建
• 高亮显示文本中重要关键字（Jquery ）
• 12个用jQuery插件改变Button按钮的漂亮特效

text.xml

<?xml version=”1.0″ encoding=”utf-8″ ?>
<msglist>
<msg name=”11″>
<id>1</id>
<content>content1</content>
</msg>
<msg name=”22″>
<id>2</id>
<content>content2</content>
</msg>
</msglist>

index.html

<!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 runat=”server”>
<title>jQuery操作Xml入门</title>
<script type=”text/javascript” src=”jquery-1.4.4.min.js”></script>
<script type=”text/javascript”>
$(function(){
   $.ajax({
       url : “test.xml”,
    dataType : “xml”,
    error : function(xml) {
        alert(“Error loading XML document ” + xml);
    },
    success : function(xml) {
        $(xml).find(“msglist > msg”).each(function() {
        // $(this).find(“content”).text(); //取值
    //  $(“ul”).append(“<li>” + $(this).find(“content”).text() + “</li>”);
     $(“ul”).append(“<li>” + $(this).attr(“name”) + “</li>”);
      //($(this).attr(“name”));  //获取属性
     });
    }
   });
});
</script>
</head>
<body>
<ul></ul>
</form>
</body>
</html>

您可能感兴趣的文章

• jQ.Mobi—针对移动设备优化的jQuery
• jQuery-bind不能处理绑定hover事件
• 9个实用jQuery日历插件
• jQuery 操作css 设置样式
• 不要滥用jQuery的$(this)
• 编写高性能的jQuery代码
• jQuery中的mouseenter和mouseleave事件
• 流动导航菜单-Fluid Navigation 使用Jquery+CSS创建
• 高亮显示文本中重要关键字（Jquery ）
• 12个用jQuery插件改变Button按钮的漂亮特效

但是本例只是简单讲解让大家自己动手制作广告轮换吧。

源程序讲解：

a = 3                                 设置变量a的初值为3。

var pp = Math.random();               定义一个变量pp，值为一个随机数。

var foot = Math.round(pp * (a-1))+1;   定义一个变量foot,值为一个经过四舍五入的整数，此数不

大于3。

function create()                    定义一个函数。

{ this.src = ”

this.border = ”

this.alt = ” }                      初始化图片的属性。

b = new Array()                      设置b为一个数组。

for(var i=1; i<=a; i++)              开始一个循环，当i<a时，i=i+1。

{ b[i] = new create() }

b[1].src = “img/4.jpg”

b[1].border = “0″

b[1].alt = “”

b[2].src = “img/2.jpg”

b[2].border = “0″

b[2].alt = “”

b[3].src = “img/3.jpg”

b[3].border = “0″

b[3].alt = “”                        分别定义数组b中的值。

var pic = “”;

pic += ‘<img src=’+b[foot].src+’ border=”0″‘+’ alt=’+b[foot].alt+’>’;>’;  pic的值为随机产生一幅数组b中的图。

document.write(pic)                   输出pic的值。

注:本例中所用到的三张图放在与本页面同级的”img”文件夹内,名字分别为2.jpg，3.jpg，4.jpg。

如果自己想加上更多的图片，就希望大家自己举一反三了。

您可能感兴趣的文章

• Web 前端优化最佳实践之 图象篇
• javascript图片预加载技术
• 封装好的javascript图片滑动效果
• 在Wordpress中自动获取文章中的图片

如lightbox方式展现照片，无疑需要提前获得大图的尺寸，这样才能居中定位，由于javascript无法获取img文件头数据，必须等待其加载完毕后才能获取真实的大小然后展示出来，所以lightbox显示的图片的速度体验要比直接输出的差很多，而本文说提到的预加载技术主要针对获取图片尺寸。

一段典型的使用预加载获取图片大小的例子：

var imgLoad = function (url, callback) {
var img = new Image();
img.src = url;
if (img.complete) {
callback(img.width, img.height);
} else {
img.onload = function () {
callback(img.width, img.height);
img.onload = null;
};
};
};

web应用程序区别于桌面应用程序，响应速度才是最好的用户体验。如果想要速度与优雅兼得，那就必须提前获得图片尺寸，如何在图片没有加载完毕就能获取图片尺寸？

一、结合flash加载图片，获取图片头部数据的尺寸

flash虽然很强大，但它与生俱来的缺点让人爱恨交织，加上很多移动设备不支持falsh无疑更是致命的伤，还是放弃吧。

二、在服务端保存图片尺寸数据

这里不得不提到腾讯Qzone的lightbox相册，它就是这样做的。它能在图片没有加载完全的时候就居中放大图片，速度与优雅基本兼得。不过它仍然难以避免blog插入的外链图片的问题，也只能按传统的方式加载完毕才能展示。

三、javascript通过占位方式获取图片头部数据的尺寸

十多年的上网经验告诉我：浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕，并且这里大部分的图片都是没有预设width与height属性的，因为浏览器能够获取图片的头部数据。基于此，只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。

实现代码：

var imgReady = function (url, callback, error) {
var width, height, intervalId, check, div,
img = new Image(),
body = document.body;
img.src = url;
// 从缓存中读取
if (img.complete) {
return callback(img.width, img.height);
};
// 通过占位提前获取图片头部数据
if (body) {
div = document.createElement(‘div’);
div.style.cssText = ‘visibility:hidden;position:absolute;left:0;top:0;width:1px;
height:1px;overflow:hidden’;
div.appendChild(img)
body.appendChild(div);
width = img.offsetWidth;
height = img.offsetHeight;
check = function () {
if (img.offsetWidth !== width || img.offsetHeight !== height) {
clearInterval(intervalId);
callback(img.offsetWidth, img.clientHeight);
img.onload = null;
div.innerHTML = ”;
div.parentNode.removeChild(div);
};
};
intervalId = setInterval(check, 150);
};
// 加载完毕后方式获取
img.onload = function () {
callback(img.width, img.height);
img.onload = img.onerror = null;
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};
// 图片加载错误
img.onerror = function () {
error && error();
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};
};

您可能感兴趣的文章

• Web 前端优化最佳实践之 图象篇
• 随机产生图片的轮换的js代码
• 封装好的javascript图片滑动效果
• 在Wordpress中自动获取文章中的图片

1. 兼容性 Bug
2. 内容 Bug (即运营填入内容或数据库读取内容后出现的 Bug)

其中兼容性 Bug 通常在开发阶段就能解决，而内容 Bug 通常被我们忽略。比如忘记对文字设置 overflow: hidden；比如忘记对图片设置宽高；等。不知大家是否也有类似经历?

所以，为自动化这块的测试工作，我写了个 简单的脚本 ，功能有二：

1. 文本内容 * 2
2. 图片替换为大图

我们先拿淘宝首页开刀，看看效果。。(还是有一些可以改善的地方的)

使用很简单，在地址栏运行以下脚本即可，或者把他们加入 BookMarklet 随时运行。

1. 文本＋图片
javascript:(function(){var f=[],h=document;(function(n){var p=arguments.callee,l=n.childNodes,m=0,k=l.length;for(;m<k;m++){var o=l[m];if(o.nodeType===1){p(o)}else{if(o.nodeType===3){f.push(o)}}}})(h.body);for(var d=0;d<f.length;d++){var b=f[d],j=b.nodeValue.replace(/^\s+|\s+$/g,""),c=h.createTextNode(j);if(j!==""&&j.length!==1){b.parentNode.insertBefore(c,b)}}var g=document.images,a=0,e=g.length;for(;a<e;a++){g[a].src="http://www.yoobao.com/shoppic/2010410425118938.jpg"}})();
2. 只文本
javascript:(function(){var list=[],doc=document;(function(parent){var func=arguments.callee,nodes=parent.childNodes,i=0,len=nodes.length;for(;i<len;i++){var node=nodes[i];if(node.nodeType===1){func(node);}else if(node.nodeType===3){list.push(node);}}})(doc.body);for(var i=0;i<list.length;i++){var node=list[i],value=node.nodeValue.replace(/^\s+|\s+$/g,''),tmpNode=doc.createTextNode(value);if(value!==''&&value.length!==1){node.parentNode.insertBefore(tmpNode,node);}}})();
3. 只图片
javascript:(function(){var images=document.images,n=0,len=images.length;for(;n<len;n++){images[n].src='http://www.yoobao.com/shoppic/2010410425118938.jpg';}})();

最后，友情提示下：

此工具不可滥用，并非所有地方都要考虑溢出的扩展性。

打开一个网站，把上面的三个代码随意一个贴到地址栏里，回车 ok。

本文转自：http://www.chencheng.org/blog/archives/css-overflow-test-script.html

您可能感兴趣的文章

• 用css截取文字超出部分显示省略号
• Web 前端优化最佳实践之 CSS 篇
• Monster-Chrome浏览器的扩展插件（前端检测）

一，概述
1，正则表达式，可以说是任何一种编程语言都提供的机制，它主要是提供了对字符串的处理能力。
2，正则表达式在页面处理中的使用场景：
1）表单验证。验证某些域符合某种规则，例如邮件输入框必须输入的是邮件、联系电话输入框输入的必须是数字等等
2）处理DOM模型。例如通过表达式定位DOM中的一个对象或一系列对象，一个例子就是定位id属性中含有某个特殊字符的div对象。
3）纯编程逻辑。直接用于编程的逻辑之中。
3，说明：本部分所举的正则表达式的代码片断，都是经过测试的，但有一点需要注意，对于换行的字符串的定义，我们在表述时使用的是类似如下的形式：
var str=“It’s is
a beautiful city”；
这种形式直接写在JS代码中是错误的，那如何获取具有换行的字符串呢？简单的办法：在textarea中输入文本并换行，然后将该值赋给JS变量即可。例如：
var str=document.forms[0].mytextarea.value;
二，语法与使用
1，定义正则表达式
1）定义正则表达式有两种形式，一种是普通方式，一种是构造函数方式。
2）普通方式：var reg=/表达式/附加参数
表达式：一个字符串，代表了某种规则，其中可以使用某些特殊字符，来代表特殊的规则，后面会详细说明。
附加参数：用来扩展表达式的含义，目前主要有三个参数：
g：代表可以进行全局匹配。
i：代表不区分大小写匹配。
m：代表可以进行多行匹配。
上面三个参数，可以任意组合，代表复合含义，当然也可以不加参数。
例子：
var reg=/a*b/;
var reg=/abc+f/g;
3）构造函数方式：var reg=new RegExp(“表达式”,”附加参数”);
其中“表达式”与“附加参数”的含义与上面那种定义方式中的含义相同。
例子：
var reg=new RegExp(“a*b”);
var reg=new RegExp(“abc+f”,”g”);
4）普通方式与构造函数方式的区别
普通方式中的表达式必须是一个常量字符串，而构造函数中的表达式可以是常量字符串，也可以是一个js变量，例如根据用户的输入来作为表达式参数等等：
var reg=new RegExp(document.forms[0].exprfiled.value,”g”);
2，表达式模式
1）表达式模式，是指表达式的表达方式与样式， 即 var reg=/表达式/附加参数 中的“表达式”怎样去描述？
2）从规范上讲，表达式模式分为简单模式和复合模式。
3）简单模式：是指通过普通字符的组合来表达的模式，例如
var reg=/abc0d/;
可见简单模式只能表示具体的匹配。
4）复合模式：是指含有通配符来表达的模式，例如：
var reg=/a+b?\w/;
其中的+、?和\w都属于通配符，代表着特殊的含义。因此复合模式可以表达更为抽象化的逻辑。
下面我们着重说一下复合模式中各个通配符的含义及其使用。
5)复合模式中特殊字符的讲解：
1>\：在许多编程语言里面被用作转义符，一般来说
\符号后面如果跟的是普通字符c，那么\c就代表特殊的含义，例如n本来代表字符n，但\n就代表换行。
\符号后面如果跟的是特殊字符c，那么\c就代表普通字符c，例如\一般用作转义符，但\\则调表普通字符\。
Javascript的正则表达式中\的用法与上面相同，只是不同的编程语言，特殊字符表可能不太一样罢了。
2>^：匹配输入字符串的起始端，如果是多行匹配，即表达式的附加参数中含有m，则也在一个换行符后匹配。
例子：/^B/匹配 “Bab Bc ”中的第一个B
例子2：/^B/gm匹配
“Badd B
cdaf
B dsfB”
中的第一行第一个B，第三行中的第一个B

3>$：匹配输入字符创的尾端，如果是多行匹配，即表达式的附加参数中含有m，则也在一个换行符前匹配。
与^的用法相反。
例子：/t$/匹配“bat”中的t，但是不匹配“hate”中的t
例子2：/t$/匹配
“tag at
bat”
中第一行的最后一个t和第二行的t。
4>*：匹配前一个字符0次或多次。
例子：/ab*/匹配“dddabbbbc”中的“abbbb”，也匹配“ddda”中的“a”
5>+：匹配前一个字符1次或多次。
例子：/ab+/匹配“dddabbbbc”中的“abbbb”，但不匹配“ddda”
与后面的{1,}（原型：{n,}）的用法类似
6>?：?的用法比较特殊，一般来说它用来对前一个字符做0次或1次匹配，但是它有另外两种特殊的用法：
如果紧跟在*、+、?和{ }之后，则表示原始匹配的最小次数匹配，例如：
/ba*/本来匹配“bbbaaaa”中的“baaaa”，但是/ba*?/则匹配“bbbaaaa”中的“b”（因为*表示0次或多次匹配，而加?应该表示最少次数匹配，即0次匹配）。
同理：/ba+?/则匹配“baaaa”中的“ba”。
作为语法结构符号，使用于前置断言中，即后面要说到的x(?=y)和x(?!=y)
7>.：小数点中的“.”号，匹配任何一个单独的字符，但是换行符除外。
标准中总共有哪些字符？请参考：字符集
例如：/a.b/匹配“acbaa”中的“acb”，但是不匹配“abbb”。
8>(x)：表示匹配x(并非特指字符x或者特指一个字符，x表示一个字符串)，而且匹配会被记住，在语法中这种()被称为“capturing parentheses ”，即捕捉用的小括号。
匹配会被记住，是因为在表达式提供的函数中，有些函数返回一个数组，该数组会保存所匹配的所有字符串，例如exec()函数。
另外还要注意()中的x被记住的前提是匹配x。
例子1：
var regx=/a(b)c/;
var rs=regx.exec(“abcddd”);
从上面可以看出,/a(b)c/匹配“abcddd”中的“abc”，因为()的原因，b也会记录下来，因此rs返回的数字内容为：
{abc,b}
例子2：
var regx=/a(b)c/;
var rs=regx.exec(“acbcddd”);
rs返回null，因为/a(b)c/不匹配“acbcddd”，所以()中的b不会被记录下来（尽管字符串中含有b）

9>(?:x)：匹配x，但不会记住x，这种格式中的()被称为“non-capturing parentheses ”，即非捕捉用的小括号。
例子：
var regx=/a(?:b)c/;
var rs=regx.exec(“abcddd”);
从上面可以看出,/a(?:b)c/匹配“abcddd”中的“abc”，因为(?:)的原因，b不会记录下来，因此rs返回的数字内容为：
{abc}
10>X(?=y)：匹配x，仅当后面紧跟着y时。如果符合匹配，则只有x会被记住，y不会被记住。
例子：
var regx=/user(?=name)/;
var rs=regx.exec(“The username is Mary”);
结果：匹配成功，而且rs的值为{user}
11>X(?!y)：匹配x，仅当后面不紧跟着y时。如果符合匹配，则只有x会被记住，y不会被记住。
例子：
var regx=/user(?!name)/;
var rs=regx.exec(“The user name is Mary”);
结果：匹配成功，而且rs的值为{user}
例子2：
var regx=/\d+(?!\.)/;
var rs=regx.exec(“54.235”);
结果：匹配成果，rs的值为{5}，不匹配54是因为54后面跟着“.”号，当然235也匹配，但是由于exec方法的行为，235不会被返回
12>x|y：匹配x或y。注意如果x和y都匹配上了，那么只记住x。
例子：
var regx=/beijing|shanghai/;
var rs=regx.exec(“I love beijing and shanghai”);
结果：匹配成功，rs的值为{beijing}，虽然shanghai也匹配，但不会被记住。
13>{n}：匹配前一个字符的n次出现。
n必须是一个非负数，当然如果是一个负数或小数也不会报语法错误。
例子：
var regx=/ab{2}c/;
var rs=regx.exec(“abbcd”);
结果：匹配成功，rs的值为：{abbc}。
14>{n,}：匹配前一个字符的至少n次出现。
例子：
var regx=/ab{2,}c/;
var rs=regx.exec(“abbcdabbbc”);
结果：匹配成功，rs的值为：{abbc}。注意为什么abbbc也符合条件为什么没有被记住，这与exec方法的行为有关，后面会统一讲解。
15>{n,m}：匹配前一个字符的至少n次最多m次的出现。
只要n与m为数字，而且m>=n就不会报语法错误。
例子：
var regx=/ab{2,5}c/;
var rs=regx.exec(“abbbcd”);
结果：匹配成功，rs的值为：{abbbc}。
例子2：
var regx=/ab{2,2}c/;
var rs=regx.exec(“abbcd”);
结果：匹配成功，rs的值为：{abbc}。
例子3：
var regx=/ab(2,5)/;
var rs=regx.exec(“abbbbbbbbbb”);
结果：匹配成功，rs的值为：{abbbbb}，这说明，如果前一个字符出现多于m次，则只匹配m次。另外：
var regx=/ab(2,5)c/;
var rs=regx.exec(“abbbbbbbbbbc”);
结果：匹配失败，rs的值为：null，为什么匹配失败，因为b多于5个则b(2,5)会匹配前5个b，，而表达式/ab(2,5)c/中b后面是c，但字符串中5个b之后还是b所以会报错。
16>[xyz]：xyz表示一个字符串，该模式表示匹配[]中的一个字符，形式上[xyz]等同于[x-z]。
例子：
var regx=/a[bc]d/;
var rs=regx.exec(“abddgg”);
结果：匹配成功，rs的值为：{abd}
例子2：
var regx=/a[bc]d/;
var rs=regx.exec(“abcd”);
结果：匹配失败，rs的值为：null，之所以失败，是因为[bc]表示匹配b或c中的一个，但不会同时匹配。
17>[^xyz]：该模式表示匹配非[]中的一个字符，形式上[^xyz]等同于[^x-z]。
例子：
var regx=/a[^bc]d/;
var rs=regx.exec(“afddgg”);
结果：匹配成功，rs的值为：{afd}
例子2：
var regx=/a[^bc]d/;
var rs=regx.exec(“abd”);
结果：匹配失败，rs的值为：。
18>[\b]：匹配退格键。
19>\b：匹配一个词的边界符，例如空格和换行符等等，当然匹配换行符时，表达式应该附加参数m。
例子：
var regx=/\bc./;
var rs=regx.exec(“Beijing is a beautiful city”);
结果：匹配成功，rs的值为：{ci}，注意c前边的空格不会匹配到结果中，即{ ci}是不正确的。
20>\B：代表一个非单词边界。
例子：
var regx=/\Bi./;
var rs=regx.exec(“Beijing is a beautiful city”);
结果：匹配成功，rs的值为：{ij}，即匹配了Beijing中的ij。
21>\cX，匹配一个控制字符。例如， \cM 匹配一个 Control-M 或
回车符。 x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一
个原义的 ’c’ 字符。（实际的例子还需补充）
21>\d：匹配一个数字字符，等同于[0-9]。
例子：
var regx=/user\d/;
var rs=regx.exec(“user1”);
结果：匹配成功，rs的值为：{user1}
22>\D：匹配一个非数字字符，等同于[^0-9]。
例子：
var regx=/user\D/;
var rs=regx.exec(“userA”);
结果：匹配成功，rs的值为：{userA}
23>\f：匹配一个换页符。
24>\n：匹配一个换行符。因为是换行符，所以在表达式中要加入m参数。
例子：
var regx=/a\nbc/m;
var str=“a
bc”;
var rs=regx.exec(str);
结果：匹配成功，rs的值为：{ }，如果表达式为/a\n\rbc/，则不会被匹配，因此在一般的编辑器中一个”Enter”键代表着“回车换行”，而非“换行回车”，至少在textarea域中是这样的。
25>\r：匹配一个回车符
26>\s：匹配一个空格符，等同于[ \f\n\r\t\v\u00A0\u2028\u2029].
例子：
var regx=/\si/;
var rs=regx.exec(“Beijing is a city”);
结果：匹配成功，rs的值为：{ i}
27>\S：匹配一个非空格符，等同于[ ^\f\n\r\t\v\u00A0\u2028\u2029].
例子：
var regx=/\Si/;
var rs=regx.exec(“Beijing is a city”);
结果：匹配成功，rs的值为：{ei}
28>\t：匹配一个tab
例子：
var regx=/a\tb/;
var rs=regx.exec(“a bc”);
结果：匹配成功，rs的值为： {a bc}
29>\v：匹配一个竖向的tab
30>\w：匹配一个数字、_或字母表字符，即[A-Za-z0-9_ ]。
例子：
var regx=/\w/;
var rs=regx.exec(“$25.23”);
结果：匹配成功，rs的值为：{2}
31>\W：匹配一个非数字、_或字母表字符，即[^A-Za-z0-9_ ]。
例子：
var regx=/\w/;
var rs=regx.exec(“$25.23”);
结果：匹配成功，rs的值为：{$}
32>\n：注意不是\n，这里n是一个正整数，表示匹配第n个()中的字符。
例子：
var regx=/user([,-])group\1role/;
var rs=regx.exec(“user-group-role”);
结果：匹配成功，rs的值为：{user-group-role,-}，同样对user,group,role的匹配也是成功的，但像user-group,role等就不对了。
33>\0：匹配一个NUL字符。
34>\xhh：匹配一个由两位16进制数字所表达的字符。
35>\uhhhh：匹配一个由四位16进制数字所表达的字符。

3，表达式操作
1）表达式操作，在这里是指和表达式相关的方法，我们将介绍六个方法。
2）表达式对象（RegExp）方法：
1>exec(str)，返回str中与表达式相匹配的第一个字符串，而且以数组的形式表现，当然如果表达式中含有捕捉用的小括号，则返回的数组中也可能含有()中的匹配字符串，例如：
var regx=/\d+/;
var rs=regx.exec(“3432ddf53”);
返回的rs值为：{3432}
var regx2=new RegExp(“ab(\d+)c”);
var rs2=regx2.exec(“ab234c44”);
返回的rs值为：{ab234c,234}
另外，如果有多个合适的匹配，则第一次执行exec返回一个第一个匹配，此时继续执行exec，则依次返回第二个第三个匹配。例如：
var regx=/user\d/g;
var rs=regx.exec(“ddduser1dsfuser2dd”);
var rs1=regx.exec(“ddduser1dsfuser2dd”);
则rs的值为{user1}，rs的值为{rs2}，当然注意regx中的g参数是必须的，否则无论exec执行多少次，都返回第一个匹配。后面还有相关内容涉及到对此想象的解释。
2>test(str)，判断字符串str是否匹配表达式，返回一个布尔值。例如：
var regx=/user\d+/g;
var flag=regx.test(“user12dd”);
flag的值为true。
3）String对象方法
1>match(expr)，返回与expr相匹配的一个字符串数组，如果没有加参数g，则返回第一个匹配，加入参数g则返回所有的匹配
例子：
var regx=/user\d/g;
var str=“user13userddduser345”;
var rs=str.match(regx);
rs的值为：{user1,user3}
2>search(expr)，返回字符串中与expr相匹配的第一个匹配的index值。
例子：
var regx=/user\d/g;
var str=“user13userddduser345”;
var rs=str.search(regx);
rs的值为：0
3>replace(expr,str)，将字符串中匹配expr的部分替换为str。另外在replace方法中，str中可以含有一种变量符号$，格式为$n，代表匹配中被记住的第n的匹配字符串（注意小括号可以记忆匹配）。
例子：
var regx=/user\d/g;
var str=“user13userddduser345”;
var rs=str.replace(regx,”00”);
rs的值为：003userddd0045
例子2：
var regx=/u(se)r\d/g;
var str=“user13userddduser345”;
var rs=str.replace(regx,”$1”);
rs的值为：se3userdddse45
对于replace(expr,str)方法还要特别注意一点，如果expr是一个表达式对象则会进行全局替换（此时表达式必须附加参数g，否则也只是替换第一个匹配），如果expr是一个字符串对象，则只会替换第一个匹配的部分，例如：
var regx=“user”
var str=“user13userddduser345”;
var rs=str.replace(regx,”00”);
rs的值为： 0013userddduser345
4>split(expr)，将字符串以匹配expr的部分做分割，返回一个数组，而且表达式是否附加参数g都没有关系，结果是一样的。
例子：
var regx=/user\d/g;
var str=“user13userddduser345”;
var rs=str.split(regx);
rs的值为：{3userddd,45}
4，表达式相关属性
1）表达式相关属性，是指和表达式相关的属性，如下面的形式：
var regx=/myexpr/;
var rs=regx.exec(str);
其中，和表达式自身regx相关的属性有两个，和表达式匹配结果rs相关的属性有三个，下面将逐一介绍。
2）和表达式自身相关的两个属性：
1>lastIndex，返回开始下一个匹配的位置，注意必须是全局匹配（表达式中带有g参数）时，lastIndex才会有不断返回下一个匹配值，否则该值为总是返回第一个下一个匹配位置，例如：
var regx=/user\d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var lastIndex1=regx.lastIndex;
rs=regx.exec(“sdsfuser1dfsfuser2”);
var lastIndex2=regx.lastIndex;
rs=regx.exec(“sdsfuser1dfsfuser2”);
var lastIndex3=regx.lastIndex;
上面lastIndex1为9，第二个lastIndex2也为9，第三个也是9；如果regx=/user\d/g，则第一个为9，第二个为18，第三个为0。
2>source，返回表达式字符串自身。例如：
var regx=/user\d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var source=regx.source;
source的值为user\d
3）和匹配结果相关的三个属性：
1>index，返回当前匹配的位置。例如：
var regx=/user\d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var index1=rs.index;
rs=regx.exec(“sdsfuser1dfsfuser2”);
var index2=rs.index;
rs=regx.exec(“sdsfuser1dfsfuser2”);
var index3=rs.index;
index1为4，index2为4，index3为4，如果表达式加入参数g，则index1为4，index2为13，index3会报错（index为空或不是对象）。
2>input，用于匹配的字符串。例如：
var regx=/user\d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var input=rs.input;
input的值为sdsfuser1dfsfuser2。
3>[0]，返回匹配结果中的第一个匹配值，对于match而言可能返回一个多值的数字，则除了[0]外，还可以取[1]、[2]等等。例如：
var regx=/user\d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var value1=rs[0];
rs=regx.exec(“sdsfuser1dfsfuser2”);
var value2=rs[0];
value1的值为user1,value2的值为user2
5，实际应用

1）实际应用一描述：有一表单，其中有一个“用户名”input域要求：汉字，而且不能少于2个汉字，不能多于4个汉字。实现：<script>function checkForm(obj){     var username=obj.username.value;     var regx=/^[\u4e00-\u9fa5]{2,4}$/g     if(!regx.test(username)){               alert(“Invalid username!”);               return false;      }     return true;}</script><form name=“myForm”onSubmit=“return checkForm(this)”>    <input type=“text” name=“username”/>    <input type=“submit” vlaue=“submit”/></form>2）实际应用二描述：给定一个含有html标记的字符串，要求将其中的html标记去掉。实现：<script>function toPlainText(htmlStr){     var regx=/<[^>]*>|<\/[^>]*>/gm;     var str=htmlStr.replace(regx,”");     return str;}</script><form name=“myForm”>    <textarea id=“htmlInput”></textarea>    <input type=“button” value=“submit” onclick=“toPlainText(document.getElementById(‘htmlInput’).value”/></form>

三，小结
1，Javascript正则表达式，我想在一般的程序员之中，使用者应该不是很多，因为我们处理的页面一般都不是很复杂，而复杂的逻辑一般我们都在后台处理完成了。但是目前趋势已经出现了扭转，富客户端已经被越来越多的人接受，而Javascript就是其中的关键技术，对于复杂的客户端逻辑而言，正则表达式的作用也是很关键的，同时它也是Javascript高手必须要掌握的重要技术之一。
2，为了能够便于大家对前面讲述的内容有一个更为综合和深刻的认识，我将前面的一些关键点和容易犯糊涂的地方再系统总结一下，这部分很关键！
总结1：附件参数g的用法
表达式加上参数g之后，表明可以进行全局匹配，注意这里“可以”的含义。我们详细叙述：
1）对于表达式对象的exec方法，不加入g，则只返回第一个匹配，无论执行多少次均是如此，如果加入g，则第一次执行也返回第一个匹配，再执行返回第二个匹配，依次类推。例如
var regx=/user\d/;
var str=“user18dsdfuser2dsfsd”;
var rs=regx.exec(str);//此时rs的值为{user1}
var rs2=regx.exec(str);//此时rs的值依然为{user1}
如果regx=/user\d/g；则rs的值为{user1}，rs2的值为{user2}
通过这个例子说明：对于exec方法，表达式加入了g，并不是说执行exec方法就可以返回所有的匹配，而是说加入了g之后，我可以通过某种方式得到所有的匹配，这里的“方式”对于exec而言，就是依次执行这个方法即可。
2）对于表达式对象的test方法，加入g于不加上g没有什么区别。
3）对于String对象的match方法，不加入g，也只是返回第一个匹配，一直执行match方法也总是返回第一个匹配，加入g，则一次返回所有的匹配（注意这与表达式对象的exec方法不同，对于exec而言，表达式即使加上了g，也不会一次返回所有的匹配）。例如：
var regx=/user\d/;
var str=“user1sdfsffuser2dfsdf”;
var rs=str.match(regx);//此时rs的值为{user1}
var rs2=str.match(regx);//此时rs的值依然为{user1}
如果regx=/user\d/g，则rs的值为{user1,user2}，rs2的值也为{user1,user2}
4）对于String对象的replace方法，表达式不加入g，则只替换第一个匹配，如果加入g，则替换所有匹配。（开头的三道测试题能很好的说明这一点）
5）对于String对象的split方法，加上g与不加g是一样的，即：
var sep=/user\d/;
var array=“user1dfsfuser2dfsf”.split(sep);
则array的值为{dfsf, dfsf}
此时sep=/user\d/g，返回值是一样的。
6）对于String对象的search方法，加不加g也是一样的。
总结2：附加参数m的用法
附加参数m，表明可以进行多行匹配，但是这个只有当使用^和$模式时才会起作用，在其他的模式中，加不加入m都可以进行多行匹配（其实说多行的字符串也是一个普通字符串），我们举例说明这一点
1）使用^的例子
var regx=/^b./g;
var str=“bd76 dfsdf
sdfsdfs dffs
b76dsf sdfsdf”;
var rs=str.match(regx);
此时加入g和不加入g，都只返回第一个匹配{bd}，如果regx=/^b./gm，则返回所有的匹配{bd,b7}，注意如果regx=/^b./m，则也只返回第一个匹配。所以，加入m表明可以进行多行匹配，加入g表明可以进行全局匹配，综合到一起就是可以进行多行全局匹配
2）使用其他模式的例子，例如
var regx=/user\d/;
var str=“sdfsfsdfsdf
sdfsuser3 dffs
b76dsf user6”;
var rs=str.match(regx);
此时不加参数g，则返回{user3}，加入参数g返回{user3,user6}，加不加入m对此没有影响。
3）因此对于m我们要清楚它的使用，记住它只对^和$模式起作用，在这两种模式中，m的作用为：如果不加入m，则只能在第一行进行匹配，如果加入m则可以在所有的行进行匹配。我们再看一个^的例子
var regx=/^b./;
var str=“ret76 dfsdf
bjfsdfs dffs
b76dsf sdfsdf”;
var rs=str.match(regx);
此时rs的值为null，如果加入g，rs的值仍然为null，如果加入m，则rs的值为{bj}（也就是说，在第一行没有找到匹配，因为有参数m，所以可以继续去下面的行去找是否有匹配），如果m和g都加上，则返回{bj,b7}（只加m不加g说明，可以去多行进行匹配，但是找到一个匹配后就返回，加入g 表明将多行中所有的匹配返回，当然对于match方法是如此，对于exec呢，则需要执行多次才能依次返回）
总结3：在HTML的textarea输入域中，按一个Enter键，对应的控制字符为“\r\n”，即“回车换行”，而不是“\n\r”，即“换行回车”，我们看一个前面我们举过的例子：
var regx=/a\r\nbc/;
var str=“a
bc”;
var rs=regx.exec(str);
结果：匹配成功，rs的值为：{ }，如果表达式为/a\n\rbc/，则不会被匹配，因此在一般的编辑器中一个”Enter”键代表着“回车换行”，而非“换行回车”，至少在textarea域中是这样的。

您可能感兴趣的文章

• Web 前端优化最佳实践之 JavaScript 篇
• 31个Javascript的实用工具
• 高质量JavaScript代码书写基本要点|值得收藏
• javascript的正则表达式集合
• js入门学习：Javascript的学习笔记
• 学习JavaScript三件必须了解的事
• JavaScript操作iframe里的dom
• javascript中的107个基础知识收集整理
• JavaScript面向对象之静态与非静态类
• JavaScript trim函数的十二种实现

随机日志推荐

<form name=”myform” action=”login.do” method=”post” onSubmit=”return check()”>
Name: <input type=text id=”usr” name=”usr”><br>
Password: <input type=password id=”pwd” name=”pwd”><br>

<input type=submit />
</form>
2.JavaScript

<script type=”text/javascript” src=”js/prototype.js”></script>
<scritp type=”text/javascript”>
function check() {
//获得用户输入的用户名和密码
var params = “usr=” + document.getElementById(“usr”).value + “&pwd=” + document.getElementById(“pwd”).value;

new Ajax.Request(
“login”,      //请求URL
{
method:’post’,
parameters : params,  //请求参数
onComplete: function(transport) {    //设置回调函数
var data = transport.responseXML;
var flag = data.getElementsByTagName(“flag”)[0].firstChild.nodeValue;

if (flag == “false”) {
alert(‘用户名或密码错误！请重新输入！’);
} else {
window.open(“ok”, “_top”);
}
}
});

return false;
}
怎样，和上一篇实现相同的功能，却简单了许多

二、Ajax.Updater

Ajax.Updater是用来将返回的html插入到指定的标签中。比如

页面：

<body>
<form name=”myform” action=”login.do” method=”post” >
<div id=”s”></div>
</form>
</body>
JavaScript：

function check()  {
//获得用户输入的用户名和密码
var params = “usr=” + document.getElementById(“usr”).value + “&pwd=” + document.getElementById(“pwd”).value;

new Ajax.Updater(
‘s’,    //要将html插入的标签ID
‘login’,   //能获得HTML的请求URL
{
method: “post”,
parameters : params  参数
});
return false;
}
这样，从服务器返回的HTML就会被插入到指定的标签中。

您可能感兴趣的文章

• 网络收集prototype的学习资料集合

您可能感兴趣的文章

• jQ.Mobi—针对移动设备优化的jQuery
• jQuery-bind不能处理绑定hover事件
• 9个实用jQuery日历插件
• jQuery 操作css 设置样式
• JQUERY操作XML实例教程
• 编写高性能的jQuery代码
• jQuery中的mouseenter和mouseleave事件
• 流动导航菜单-Fluid Navigation 使用Jquery+CSS创建
• 高亮显示文本中重要关键字（Jquery ）
• 12个用jQuery插件改变Button按钮的漂亮特效