vfresh » JavaScript

JSLint for EditPlus 检验js语法

vicZen — Fri, 19 Mar 2010 08:43:52 +0000

在EditPlus中依次点击[工具]->[配置用户工具]->[添加]->[应用程序]

按图中设置：

参数："$(FilePath)"
命令：WScript.exe "D:\editPlus\app\JSLint\JSLint.wsf"
注意将JSLint.wsf路径替换成你自己的
输出模式中的正则表达式栏：
^.+ >>>in \[(.+)\] \[line\: ([0-9]+)\,character\: ([0-9]+)\]

然后设定一个快捷键~
JSLint检查完后双击错误信息，就会自动将光标定位到出错行。

历史版本

EditPlus.JSLint v0.1

各浏览器中cookie限制

vicZen — Fri, 19 Mar 2010 03:28:14 +0000

	Firefox(3.6)	Opera(10.x)	chrome(5.x)	IE6	IE7/IE8
最多key个数	50个	30个	53个	20个	50个
key个数超出时	随机删除旧的	先进先出方式删除旧的
单key字节数_①	4097	4051	4051	4096	5072
单key字节超出时	不进行写入操作
总字节数限制_②	204850	4997	server端控制（见注2）	4096	10239
总字节超出后	不写入新的		400 Bad Request	cookie无法读写

注①：包括key及value，以及分号、等号
注②：总字节数也受HTTP Server的设置影响；
Apache用这2个参数调整：
LimitRequestFieldSize 限制客户端发送的请求头的字节数【默认 8190】
LimitRequestLine 限制接受客户端发送的HTTP请求行的字节数【默认 8190】
当cookie超出Server的设置大小后会出现400 Bad Request

结论：我们应该保证cookie key数量<=20，单key字节<=4000b，总字节数<=4000b
但我们应尽量减少cookie的大小，以获得最优页面加载速度。见"When the Cookie Crumbles“

jQuery源码查看器

vicZen — Fri, 05 Feb 2010 05:00:39 +0000

传送门：http://james.padolsey.com/jquery/

jQuery 1.4 更新概述

vicZen — Fri, 15 Jan 2010 05:32:12 +0000

今天jquery发布了1.4版本，看了下1.4的更新文档，主要是强化了部分原有的方法（批量/支持function参数等），新增了一些实用的方法以及性能优化。
大致如下：

修改内容：

.add() 支持 .add( selector, context ) 方式
以下增加支持处理function方式：.addClass() .after() .before() .append() .css() .html() .prepend() .removeAttr() .removeClass() .replaceWith() .text() .toggleClass() .val() .wrap() .wrapAll() .wrapInner()
.bind() 支持批量绑定事件
.closest()支持第二个参数(筛选元素的容器)，优化效率。用法：.closest( selector, [ context ] )
.data() 支持批量设值 $('body').data({one: 1, two: 2});
.index() 如果无参数，则返回在它兄弟级元素集合中的索引值；并支持使用选择器(selector)过滤
jQuery() 如果无参数，会返回一个空的数组（旧版本返回document）
用 jQuery() 创建DOM时，可以使用第二个参数来设置属性值、绑定事件查看示例
.offset() 新增功能可以直接设置元素相对于document的坐标，并支持function参数
jQuery.param() 第二个参数(布尔值)，可以设定是否进行URI编码

新增内容：

.clearQueue() 清除.queue()生成的队列，如无参数将清除fx中的队列；类似于.stop(true)

jQuery.contains() 检测是元素否包含目标

jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false

.delay() 延迟执行队列

<!DOCTYPE html>
<html>
<head>
  <style>
div { width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; }
.second { background-color: #33f;}
style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">script>
head>
<body>
 
<p><button>Runbutton>p>
<div class="first">div>
<div class="second">div>
 
<script>
    $("button").click(function() {
      $("div.first").slideUp(300).delay(800).fadeIn(400);
      $("div.second").slideUp(300).fadeIn(400);
    });
script>
body>
html>

.detach() 返回从元素数组中移除的匹配元素。
.focusin() 是.bind(‘focusin’, handler)的简写方式。
.focusout() 是.bind(‘focusout’, handler)的简写方式。

.has() 筛选出包含有指定元素的集合

	<div id="a"><strong>这个会被选中strong>div>
	<div id="b">这个选不中div>
	<script type="text/javascript">
	$('div').has('strong').css('color','red');
	script>

jQuery.isEmptyObject() 检测对象是否为空值

jQuery.isEmptyObject({}) // true
jQuery.isEmptyObject({ foo: "bar" }) // false

jQuery.isPlainObject( object ) 检测是否为pain object

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

.nextUntil([ selector ]) 查找当前元素之后到selector(参数)之间的同辈元素

3232323
这个会被选中
这个选不中
ccc
ccc
<script type="text/javascript">
$('#a').nextUntil('#d');	//取得[#b,#c]
script>

.prevUntil([ selector ]) 查找当前元素之前到selector(参数)之间的同辈元素
.parentsUntil( [ selector ] ) 取得一个包含着所有匹配元素的祖先元素（直到找到selector截止）的元素集合
jQuery.noop 空函数，当想定义一个空函数时可以用这个。
.toArray() 取得所有匹配的 DOM 元素集合，有点类似于.get()
.unwrap() 移除匹配元素的父级

[译]IE6终极备忘：修复IE6下 25+ Bugs

vicZen — Fri, 08 Jan 2010 04:17:02 +0000

去年就想将IE的bug系统地整理下，但一直都很忙没有完成，看到这篇E文后，我毫不犹豫的放下了手中的工作将之翻译出来。
由于是第一次译文，所以错误在所难免，欢迎大家批评指正。

原文：Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

翻译：http://www.vfresh.org/w3c/727(译文对原文进行了补充)

对IE6最好的策略就是不去兼容它。

好吧，我知道你的难处，你不得不去兼容IE6这个狗血的浏览器，因此不得不在兼容IE6上花费很多时间。对此，我颇有同感，让我来帮助你吧。

我不会象许多文章那样让你去抵制IE6，这并不会帮助到你(迫不得已时)去兼容IE6；因为IE6依旧占有一定的市场份额，你无法放弃IE6。本文将帮助你来解决这个难题。

我查阅过很多资料来摘录这些解决方案（有些是我自己提供的），现在我做成手册提供给大家搞定IE6这个家伙。我尽可能的提供了最优解决方案而不是一些hacks，并且提供了一些相关的资料。如果你发现有更好的方法或者本文有错误，请联系我。

【目录】

〖策略〗

在讨论IE6的BUG及如何修复之前，有必要先讲一些策略去避免这些恼人的问题——正所谓防患于未然。

IE6 市场占有率
做一个简洁的设计
使用合适的文档申明(doctype)
验证你的代码
先对标准浏览器进行兼容
渐进增强(Progressive Enhancement)
使用自己的预设样式（CSS Reset）
使用JavaScript框架
使用JavaScript模拟标准浏览器
如何在IE下调试页面

〖对IE6单独兼容〗

兼容IE6的第一步就是单独对IE进行兼容，你针对IE6所写的代码只影响IE6。

使用IE特有条件注释
使用CSS选择器区分开IE6
使用JavaScript区分开IE6

〖布局〗

解决IE6布局方面的BUG非常的恼人！特别是在实现一个精美的设计稿时。

理解 hasLayout
IE6 盒模型
最小高度
最大高度
100% 高度
最小宽度
最大宽度
双边距Bug
清除浮动
浮动层错位
躲猫猫bug（The Guillotine Bug）
绝对定位元素的1像素间距bug
3像素间距bug
IE下z-index的bug
Overflow Bug

〖行为〗

ie6有着一些行为方面的BUG，究其原因是IE6版本太老了，不能完好地支持CSS2更不支持CSS3，而且微软固执的使用了其私有方法。

IE6中的:hover
在IE浏览其中使用Canvas标签
IE6调整窗口大小的 Bug

〖JavaScript〗

IE6有着数不尽的JavaScript bug，这里我不会讲解每一个IE6下JavaScript的bug，只摘取其中几个普遍的问题来讨论。

异常： Expected Identifier, String, Or Number
IE中JavaScript内存泄露

〖策略〗

在讨论IE6的BUG及如何修复之前，有必要讲叙一些策略去避免这些恼人的问题——正所谓防患于未然。

据Market Share统计，目前（2009年8月）IE6 的市场占有率为25.25%，但是其他地方的统计明显要低，为18.1%；尽管统计结果不同，但都呈现出了下降的趋势（翻译此文时，淘宝的IE6用户已从70%跌破至69%）。但是最重要的，还是你自己网站的统计数据。如果你对你的网站进行了流量分析，那么IE6的占有率是否值得你去针对IE6进行开发？这需要你自己去权衡。

如果你网站绝大部分访问者不使用IE6并且不付费给你，那么你不必特意区针对IE6做兼容，从而节省时间、精力及资金。

做一个简洁的设计

在做设计的同时考虑代码的实现，可以避免一些布局上的问题。再复杂的设计稿也能用简洁的代码实现，如果你使用了过于繁冗的标签，那么你需要重新修缮设计稿。

如果你有丰富的开发经历，攻克过很多种布局难题，记录下你的解决方案，在以后碰到相同问题时可以提高开发效率。

使用合适的文档申明(doctype)

使用一个错误的文档声明会触发quirks mode(怪异模式)，正确的文档声明可以保证你的页面在所有浏览器下保持一致的效果。使用其中的一个文档申明：HTML 5, HTML 4.01 Strict, HTML 4.01 Frameset, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Frameset, XHTML 1.0 Transitional, or XHTML 1.1

HTML 5

<!DOCTYPE HTML>

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

验证你的代码

我曾听说过有些人认为校验代码没有任何实用价值，但我不这么认为。校验仅仅只需花费一点点时间，而且将受益于所有浏览器而非仅仅IE6；验证确保了向后兼容并且易于维护。至少也得验证XHTML！唯一可以忽略验证的情况是在你打算使用CSS3时。

你可以使用w3提供的工具验证XHTML/验证CSS

先对标准浏览器进行兼容

在写代码的过程中，一开始在标准浏览器中测试（如 Firefox, Opera, Chrome等），然后再去测试非标准浏览器（如IE6/IE7），因为这些标准浏览器都遵循w3c标准，大多的处理方式都相同。你可以分开来单独去兼容“特别”的IE浏览器，这样做能规范你的代码，你将会因此拥有扎实的基础；而且如果你不再需要兼容这些非标准浏览器，你可以一次性删除这些修复兼容性代码。

渐进增强(Progressive Enhancement)

渐进增强(Progressive Enhancement)是为了确保没有页面特效后基本功能也是可用的。简单来讲，渐进增强是指在确保页面在禁用JavaScript后能正常运作后，再对页面添加各种特效（JavaScript动画、Ajax异步等等）。我们同样可以运用“渐进增强”原则来使用CSS3（或者一些CSS2）、HTML5以及其他IE6所不支持的web规范。

某些情况下，是无法让所有用户在任何浏览器下都完全一模一样，特别是那些使用IE6的用户。运用渐进增强策略，可以保证让那些用户至少使用到你网站（或网络应用）的基本功能。

使用自己的预设样式（CSS Reset）

每个浏览器都有各自不同的预设样式，在你的样式表之前使用预设样式（CSS Reset）可以避免在之后编写冗长的浏览器兼容样式。在网上有很多CSS Reset可供参考。

简单CSS Reset示例：

body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}

一些可供参考的CSS Resets：

使用JavaScript框架

如果你的网站使用了较多的JavaScript特效，建议使用JavaScript框架。大部分的js框架都兼容了包括IE6在内的各种浏览器。可选的框架有很多，但一般能用一种框架实现的效果一定可以用另外一种框架实现，所以你可以根据个人喜好来选择合适的框架。

以下是一些常用的JavaScript框架：

强烈推荐实用MooTools，但如果你是入门者，还是建议使用jQuery。

使用JavaScript模拟标准浏览器

现在有一些JavaScript来使IE模拟标准浏览器，如果你有较高比例的用户使用IE6并且开启了JavaScript，可以考虑使用Dean Edwards的IE7或者类似的脚本。

译者注：不建议使用这些脚本，因为这些“模拟”的实现往往会消耗大量的资源，IE本来就够烂了。

如何在IE下调试页面

在IE下调试页面很麻烦，Firefox下的扩展程序Firebug和Web Developer Toolbar都是很好用的工具，如果你想在IE或其他浏览器上使用firebug，可以用Firebug Lite。

在IE下有两种最好的调试方法：IE Collection和IETester，并且都是免费的（虽然有一点点缺陷）。IETester的开发者也提供了DebugBar这款IE插件免费供个人使用，但商业用户只可试用60天。

〖对IE6单独兼容〗

兼容IE6的第一步就是单独对IE进行兼容，你针对IE6所写的代码只影响IE6；有几种方法可以区分开IE6：IE特有条件注释、CSS选择器、JavaScript，我们将逐一讨论。

使用IE特有条件注释

微软给IE添加了条件注释以区分不同版本，任何东西都可以塞进条件注释里：标签、JavaScript、js文件、css、内联样式。可以使用条件注释来针对某一个IE浏览器版本来编写代码。

规则如下：（译注：可参考IE 特有注释(hack)）

<p>这段文字会在所有浏览器显示p>
<!--[if lte IE 6]>
<p>这段文字仅显示在 IE6及IE6以下版本。p>
<p>This message will only appear in versions of Internet Explorer less than or equal to version 6.p>
<![endif]-->
 
<!--[if gte IE 6]>
<p>这段文字仅显示在 IE6及IE6以上版本。p>
<p>This message will only appear in versions of Internet Explorer greater than or equal to version 6.p>
<![endif]-->
 
<!--[if gt IE 6]>
<p>这段文字仅显示在 IE6以上版本（不包含IE6）。p>
<p>This message will only appear in versions of Internet Explorer greater than version 6.p>
<![endif]-->
 
<!--[if IE 5.5]>
<p>这段文字仅显示在 IE5.5。p>
<p>This message will only appear in Internet Explorer 5.5.p>
<![endif]-->
 
<!--在 IE6及IE6以下版本中加载css-->
<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" href="css/ie6.css" />
<![endif]-->
 
<p>这段文字会在所有浏览器显示p>

使用条件注释加载css的好处是这些样式是独立于其他css文件的，因此不会在编写兼容代码时弄得一团糟；而且当IE6的市场份额降低到不需要兼容时，可以快速的清理掉。

使用条件注释的唯一缺点是在IE浏览器下会增加额外的HTTP请求数，所以需要权衡是否这样做。但我不建议使用条件注释加载外部js文件，因为js文件会造成阻滞，在js未加载完之前其余文件都不会被加载；对于js请使用JavaScript程序来区分浏览器而非条件注释。

使用CSS选择器区分开IE6

如果你不打算使用条件注释，CSS选择器是另外一个区分开IE6的办法，IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。

示例：

<style type="text/css" >
/* IE6 专用 */
.content {color:red;}
/* 其他浏览器 */
div>p .content {color:blue;}
style>
<div>
	<p class="header">Some Header Text Herep>
div>

这个方法的缺点是容易把样式表弄得一团糟，所以一定要写好注释说明。

在示例中，针对IE6写的样式在其他浏览器中也会执行，但(标准浏览器中)之后的子选择器覆盖了之前的申明，而IE6不支持子选择器所以忽略了它。

扩展阅读：

使用JavaScript区分开IE6

如果你想要使用JavaScript区分开IE6，请看示例：

//原生JavaScript
if(typeof document.body.style.maxHeight === "undefined") {
	alert('IE6 Detected');
}
 
//MooTools（框架）
if (Browser.Engine.trident4) {
	alert('IE6 Detected');
}
 
//jQuery（框架）
if (($.browser.msie) &amp;&amp; ($.browser.version == "6.0")){
	alert('IE6 Detected');
}

扩展阅读：

〖图片〗

PNG半透明图片

有很多JavaScript解决方案来修复IE6使用PNG-24图片，但除了Twin Helix’s IE5.5+ PNG Alpha Fix都不支持CSS sprites。

另外一个办法是使用IE特有的滤镜，可阅读Aaron Baxter的博客。或译者的《ie5+ PNG Fix》

JavaScript方式修复IE6 PNG

IE6下的圆角

可以详细阅读CSS 圆角菜单。

背景闪烁问题

如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存，每次触发hover的时候都会重新加载，可以用JavaScript设置IE6缓存这些图片：

	document.execCommand("BackgroundImageCache",false,true);

其他解决方法：

Minimize Flickering CSS Background Images in IE6

〖布局〗

解决IE6布局方面的BUG非常的恼人！特别是在实现一个精美的设计稿时。

理解 hasLayout

许多IE6下的Bug及渲染问题都可以归于微软的私有概念hasLayout。简要的说，在给元素定义具体的尺寸（如height或width）就会触发hasLayout，在IE6下缺失或触发hasLayout会导致一些bug。

扩展阅读：

IE6 盒模型

如果怪异模式（quirks mode）在IE6中启用，IE6将会使用微软旧版的盒模型：width是元素的实际宽度，内容宽度 = width – (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)。最好的办法是申明正确的文档类型以避免触发怪异模式，或者避免给有border或padding的元素定义width属性。当然你也可以考虑使用条件注释。

扩展阅读：

最小高度

IE6 不支持min-height属性，但它却认为height就是最小高度。感谢Dustin Diaz提供了一个很好的方法：使用!important，ie6会忽视它但其余浏览器不会。

注：IE6在同一个声明语句中(即一个综括号{})的属性定义，后面的总是会覆盖前面的，所以下例中后面的height覆盖掉了前面定义的important height

/* 所有浏览器 */
#container {min-height:200px; height:auto !important; height:200px;}

另一个方法是使用CSS 选择器：

/* 仅IE6 */
#container {min-height:200px; height:200px;}
 
/* 其他浏览器 */
html>body #container { height:auto;}

最大高度

非常遗憾，在IE6下实现max-height只能使用IE特有滤镜，或者可以使用JavaScript实现。我个人更建议使用JavaScript来解决，因为IE滤镜会消耗大量资源甚至会使浏览器崩溃，而且禁用JavaScript后这两种方法都无法生效。

JavaScript

//直接使用ID来改变元素的最大高度
var container = document.getElementById('container');
container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";
 
//写成函数来运行
function setMaxHeight(elementId, height){
	var container = document.getElementById(elementId);
	container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";
}
 
//函数示例
setMaxHeight('container1', 200);
setMaxHeight('container2', 500);

100% 高度

在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;。

/* 给child元素定义100%高度（IE6）*/
#parent {height:500px;}
#child {height:100%;}
 
/* 定义满屏高度（IE6）*/
html, body {height:100%;}
#fullLength {height:100%;}

最小宽度

同max-height和max-width一样，IE6也不支持min-width。有2个方法实现最小宽度，使用额外的标签、使用JavaScript。

//直接使用ID来改变元素的最小宽度
var container = document.getElementById('container');
container.style.width = (container.clientWidth < width) ? "500px" : "auto";
 
//写成函数来运行
function setMinWidth(elementId, width){
	var container = document.getElementById(elementId);
	container.style.width = (container.clientWidth < width) ? width + "px" : "auto";
}
 
//函数示例
setMinWidth('container1', 200);
setMinWidth('container2', 500);

最大宽度

只能使用JavaScript。

//直接使用ID来改变元素的最大宽度
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
 
//写成函数来运行
function setMaxWidth(elementId, width){
	var container = document.getElementById(elementId);
	container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
}
 
//函数示例
setMaxWidth('container1', 200);
setMaxWidth('container2', 500);

双边距Bug

当元素浮动时，IE6会错误的把浮动方向的margin值双倍计算。Steve Clason给出了解决方法：给元素添加display:inline;

/*IE6下将产生双倍边距*/
.floatedEl {float:left; margin-left:100px;}
 
/*修正*/
.floatedEl {float:left; margin-left:100px; display:inline;}

清除浮动

如果你想用div(或其他容器)包裹一个浮动的元素，你会发现必须给div(容器)定义明确的height、width、overflow之中一个属性（除了auto值）才能将浮动元素严实地包裹。

示例：

<div id="container">
<div id="floated1">div>
<div id="floated2">div>
div>

#container {border:1px solid #333; overflow:auto; height:100%;}
#floated1 {float:left; height:300px; width:200px; background:#00F;}
#floated2 {float:right; height:400px; width:200px; background:#F0F;}

译者常用的方式：

#container {zoom:1;} /* ie浏览器 */
#container:after{content:"\0020";display:block;height:0;clear:both;} /*标准浏览器*/

扩展阅读：

浮动层错位

当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7及其他标准浏览器里，超出的内容仅仅只是超出边缘；但在IE6中容器会忽视定义的width值，宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素，那么就会导致错位问题。

浮动层错位问题在IE6下没有真正让人满意的解决方法，虽然可以使用overflow:hidden;或overflow:scroll;来修正，但hidden容易导致其他一些问题，scroll会破坏设计；JavaScript也没法很好地解决这个问题。所以我的建议是一定要避免这个问题发生，使用一个固定的布局或者控制好内容的宽度。

扩展阅读

躲猫猫bug

在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。

点此查看bug示例页

头大了吧！但别担心，well-documented提供了详细的解决方法。

不管为何会触发这个问题，解决方法很简单：

在(那个未浮动的)内容之后添加一个
触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;

扩展阅读：

IE hasLayout and the return of the Guillotine bug

绝对定位元素的1像素间距bug

IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。Paul O’Brien有关这个bug有一篇文章来讲解。

扩展阅读：

IE6 绝对定位元素的 1px 间距 bug

3像素间距bug

在IE6中，当文本(或无浮动元素)跟在一个浮动的元素之后，文本和这个浮动元素之间会多出3像素的间隔，Stu Nichols有一个非常好的解决方法。

译注：可运行下面代码来查看作者提供的修复方法

<style type="text/css">
.container {width:750px; height:237px; margin:50px auto; background:url(http://www.cssplay.co.uk/ie/3pxbug/bug.jpg) no-repeat center top;}
.container #page1,.container #page2 {width:30%; margin:0 auto 0 auto; padding-top:80px;}
 
.container .topMid {overflow:hidden; height:15px; background: url(http://www.cssplay.co.uk/ie/3pxbug/topmid.png);}
.container .topLeft {overflow:hidden; width:20px; height:15px; float:left; background:url(http://www.cssplay.co.uk/ie/3pxbug/topleft.png);}
.container .topRight {overflow:hidden; width:25px; height:15px; float:right; background:url(http://www.cssplay.co.uk/ie/3pxbug/topright.png);}
 
.container .content {height:100px; margin-right:25px; background:#ccc;}
.container .content h2 {font-size:20px; height:80px; line-height:70px; text-align:center; margin:0;}
.container .midLeft {width:20px; height:100px; float:left; background: url(http://www.cssplay.co.uk/ie/3pxbug/midleft.png);}
.container .midRight {width:25px; height:100px; float:right; background: url(http://www.cssplay.co.uk/ie/3pxbug/midright.png);}
 
 
.container .bottomMid {overflow:hidden; height:20px; background: url(http://www.cssplay.co.uk/ie/3pxbug/bottommid.png);}
.container .bottomLeft {overflow:hidden; width:20px; height:20px; float:left; background:url(http://www.cssplay.co.uk/ie/3pxbug/bottomleft.png);}
.container .bottomRight {overflow:hidden; width:25px; height:20px; float:right; background:url(http://www.cssplay.co.uk/ie/3pxbug/bottomright.png);}
 
/* 给浮动层添加 display:inline 和 -3px 负值margin  */
 
.container #page2 .topLeft,
.container #page2 .midLeft,
.container #page2 .bottomLeft {display:inline;margin-right:-3px;}
.container #page2 .topRight,
.container #page2 .midRight,
.container #page2 .bottomRight {display:inline;margin-left:-3px;}
 
/*  给中间的内容层定义 margin-right 以纠正-3px */
 
* html #page2 .content {margin-right:22px;}
style>
<div class="container">
	<div id="page1">
		<div class="topLeft">div>
		<div class="topRight">div>
		<div class="topMid">div>
		<div class="midLeft">div>
		<div class="midRight">div>
		<div class="content">
			<h2>〖3px Bug〗h2>
		div>
		<div class="bottomLeft">div>
		<div class="bottomRight">div>
		<div class="bottomMid">div>
	div>
div>
 
<div class="container">
	<div id="page2">
		<div class="topLeft">div>
		<div class="topRight">div>
		<div class="topMid">div>
		<div class="midLeft">div>
		<div class="midRight">div>
		<div class="content">
			<h2>〖3px Bug 已修正！〗h2>
		div>
		<div class="bottomLeft">div>
		<div class="bottomRight">div>
		<div class="bottomMid">div>
	div>
div>

IE下z-index的bug

在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative

扩展阅读：

Overflow Bug

在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素，如下例：

<style type="text/css" >
.wrap {overflow:hidden;width:100px;height:100px;background:#336600;border:solid #666600 5px;}
.child {position:relative;width:50px;height:200px;background:#99CC00;}
style>
<div class="wrap">
	<div class="child">
	div>
div>

解决方法就是给外包容器.wrap加上position:relative;。

〖列表问题〗

最为特别的IE许多bug都会影响到列表，这里例举了一些示例。

横向列表宽度bug

如果你使用float:left;把

横向摆列，并且

内包含的(或其他)触发了hasLayout，在IE6下就会有错误的表现：

<style type="text/css" >
#menu li {
	float:left;
	list-style:none;
	background:#CCCCFF;
}
#menu li a {
	padding:0 10px;
	display:block;
	height:20px;	/* 触发了hasLayout */
}
style>
<ul id="menu">
	<li><a href="#" title="">Menu Item #1a>li>
	<li><a href="#" title="">Menu Item #2a>li>
	<li><a href="#" title="">Menu Item #3a>li>
ul>

解决方法很简单，只需要给定义同样的float:left;即可。

列表阶梯bug

bug示例：

<style type="text/css" >
ul {
    clear: both;
    list-style: none;
}
a {
    display: block;
    float: left;
    background: #99CCFF;
}
#two a {
    font-size: 1.1em;
}
style>
<ul>
	<li><a href="#">Onea>li>
	<li><a href="#">Twoa>li>
	<li><a href="#">Threea>li>
ul>
<ul id="two">
	<li><a href="#">Onea>li>
	<li><a href="#">Twoa>li>
	<li><a href="#">Threea>li>
ul>

列表阶梯bug通常会在给

的子元素使用float:left;时触发，我们本意是要做一个横向的列表(通常是导航栏)，但IE却可能呈现出垂直的或者阶梯状。

解决办法就是给

定义float:left;而非子元素，或者给

定义display:inline;也可以解决。

垂直列表间隙bug

当我们使用

包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素(

)之间添加空隙；解决这个问题的方法有很多，看示例：

BUG代码：

<style type="text/css" >
ul {margin:0; padding:0; list-style:none;}
li a {display:block; background:#ddd;}
style>
<ul>
	<li><a href="#">Item 1a>li>
	<li><a href="#">Item 2a>li>
	<li><a href="#">Item 3a>li>
ul>

解决方法：

Jon Hicks把flaot并且清除float来解决这个问题：

ul {margin:0; padding:0; list-style:none;}
li a {display:block; padding:0.5em; background:#ddd; float:left; clear:left;}

另外一个办法就是触发的hasLayout（如定义高宽、使用zoom:1;）

ul {margin:0; padding:0; list-style:none;}
li a {display:block; padding:0.5em; background:#ddd; zoom:1;}
/* height:1%; 也有同样的作用 */

也可以给

定义display:inline;来解决此问题。

另外还有一个极有趣的方法，给包含的文本末尾添加一个空格：

<ul>
	<li><a href="#">Item 1 a>li>
	<li><a href="#">Item 2 a>li>
	<li><a href="#">Item 3 a>li>
ul>

扩展阅读：

〖行为〗

ie6有着一些行为方面的BUG，究其原因是IE6版本太老了，不能完好地支持CSS2更不支持CSS3，而且微软固执的使用了其私有方法。

IE6中的:hover

在IE6中，除了(需要有href属性)才能触发:hover行为，这妨碍了我们实现许多鼠标触碰效果，但还是有一些法子是可以解决它的。

最好是不要用:hover来实现重要的功能，仅仅只用它来强化效果。

许多修复IE6 hover的方法都是使用微软提供的私有方法 behavior或者JavaScript，通常使用JavaScript框架或者IE6修复类js。

在IE浏览其中使用`Canvas`标签

canvas是HTML5新引入的元素，提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。

所有IE浏览器都不支持HTML5中的canvas标签，而是使用它微软私有的VML，但是可以通过JavaScript来使canvas在IE下生效。

修复canvas的一些JavaScript：

ExplorerCanvas (also called excanvas)
ExplorerCanvas Google Group
MooCanvas at Github, a MooTools implementation of excanvas

IE6调整窗口大小的 Bug

当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。Emil Stenström发现了IE6 Resize Bug并提供了解决办法：给body定义position:relative;就行了，够简单吧！~

〖JavaScript〗

IE6有着数不尽的JavaScript bug，这里我不会讲解每一个IE6下JavaScript的bug，只摘取其中几个普遍的问题来讨论。

Error: Expected Identifier, String, Or Number

IE浏览器不容许不良的JavaScript书写，如果在数组或者Hash对象的末尾有逗号就会引发异常“Expected Identifier, String, Or Number”，其他浏览器允许这样做，但在书写时注意删除末尾的逗号以避免这个错误。

IE中JavaScript内存泄露

由于IE浏览器使用其自己的内存管理，当JavaScript使用的内存没有被回收时就会引发内存泄露。可阅读《JScript的内存泄漏》及《Finally, the alternative fix for IE6’s memory leak is available》

〖其他〗

IE6中一些其他bug

文本重复Bug

在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug：

<style type="text/css" >
.demobox {
	width: 250px;
	border: 3px solid #4c6f42;
}
.firstfloat {
	float: left;
	background: #939a90;
}
.secondfloat {
	float: left;
	width: 250px;
	margin-bottom: 2px;
	background: #fbdabb;
}
style>
<!-- Begin live demo -->
<div class="demobox">
	<div class="firstfloat">第一个浮动层div>
	<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment -->
	<div class="secondfloat">
		第二个浮动层<br />
		<span style="background: #f2ab82;">aa这段文字会被重复。。。这段文字会被重复。。。这段文字会被重复。。。这段文字会被重复。。。这段文字会被重复。。。span>
	div>
	<div style="clear: both; background: #b2d4af;">清除浮动层div>
div>
<!-- end live demo -->

Position Is Everything详细讲解了这个问题，但解决办法很简单：给浮动元素添加display:inline;。

.firstfloat {display:inline;}

IE的收藏夹图标(Favicons)

收藏夹图标会以16×16像素大小显示在你的收藏夹里，有两种方法来显示收藏夹图标：

把一张图片命名为favicon.ico并放置在网站的根目录，IE及其他浏览区都会自动设置该文件为收藏夹图标；
在区域声明：

需要注意的是收藏夹图标会被一直缓存，除非你清除浏览器的缓存，才会更新新的图标；如果你想要浏览者自动更新收藏夹图标，请给favicon.ico设置expires。

扩展阅读：

How to Add a Shortcut Icon to a Web Page

IE6的GZip

服务器端使用GZip压缩了的文件，在某些版本的IE6（特别是未更新XP sp2的）中会有一些问题。所幸的是Seb Duggan找到了IE6 GZip bug解决方法，在Apache中使用ISAPI_Rewrite。

Seb提供的方法是在 ISAPI_Rewrite 安装目录下的httpd.conf中加入以下代码：

RewriteEngine on
 
RewriteCond %{HTTP:User-Agent} MSIE [56]
RewriteCond %{HTTP:User-Agent} !SV1
RewriteCond %{REQUEST_URI} .(css|js)$
RewriteHeader Accept-Encoding: .* $1

〖相关资源〗

修订历史：
2010-02-04 修正最小高度部分important的说明；

JavaScript选项卡

vicZen — Mon, 29 Dec 2008 15:03:58 +0000

点此查看效果

点此下载

通过取连接的hash值(“#”后面的)来实现tab切换，具有良好的可用性，实现结构行为相分离。

js调用方式：catTab(el,args)

参数说明：

el：目标元素，可以是单个id值/对象也可是多个id值/对象组成的数组 args：参数组{ focusClass:导航连接高亮样式，默认为"lh", mode:鼠标事件，默认为"mouseover", ajaxLoad:是否是ajax方式，可用值为“true”、“false”, ajaxWrap:ajax方式时，主层对象或id, ajaxLoading:ajax加载进行时执行的函数，第一个参数为目标层, ajaxLoadsucc:ajax加载完成时执行的函数，第一个参数为获取的数据(responseText)，第二个参数为目标层, ajaxLoadfail:ajax加载失败时执行的函数，第一个参数为目标层 }
普通示例：

catTab('TabDemo',{
	focusClass:'lh',
	mode:'mouseover'
});

ajax方式示例：

catTab('TabDemo_3',{
	focusClass:'lh',
	ajaxLoad:true,
	ajaxWrap:'AjaxTab',
	mode:'mouseover'
});

结构层主要在于导航栏的书写：

<ul class="tab" id="TabDemo">
	<li><a href="http://www.vfresh.org/#d1" title="">导航1a>li>
	<li><a href="#d2" title="" class="lh">导航2a>li>
	<li><a href="http://www.vfresh.org/" title="">导航3a>li>
ul>

“导航1”对应显示id值为“d1”的层(href值#后的值)
“导航3”无对应层，无切换效果
导航1和导航3在非click触发导航情况下可打开“http://www.vfresh.org/”

默认显示的tab为设置了高亮className的连接对应的层，如上例默认显示导航2对应的层“d2”
如未设置高亮className，则默认显示第一个导航连接对应的层“d1″

后期将会考虑做以下扩展，记录下：

鼠标移动触发加上延迟
可通过window.location.hash的值来显示对应的层
优化点击显示tab的方法”showTab”
可移除/添加tab

YUI学习笔记（一）

vicZen — Tue, 21 Oct 2008 01:58:31 +0000

迫于压力，提前开始学习js框架

YUI的介绍可见yahoo台湾地方站：

Yahoo! 用户界面 (YUI) 函示库是一组使用 JavaScript 所制作出的工具和控件组合，用来建立丰富且具有互动性，并且以 DOM 程序、DHTML 和 Ajax 等技术为基础的网站应用程序。 YUI 函示库还包含了一些核心的 CSS 资源。YUI 函示库中的所有组件都基于BSD 条款以开放原始码的形式公开发布，并且提供给所有网友免费使用。

YUI分成很多个组件，你可以选择你需要的加载，这样就可以大大减少文件大小，优化HTTP request；为了方便，可以使用Configuration and Hosting对js文件加载进行配置。YUI Configuration and Hosting 是雅虎为全球的YUI使用者免费提供了专门的YUI主机。YUI的使用者们可以及时用到最新更新的YUI，同时经过专门优化过的高性能服务器，提供了更快的文件访问速度。

YUI相关资源：

javascript无间断滚动（横向/纵向）

vicZen — Wed, 28 May 2008 09:17:52 +0000

点此查看示例
 点此下载(请以此下载版本为准)

参数说明：

scrollSingle(mode,element,w,h,childTag,num,delay,btn1,btn2)

mode：必填项，滚动类型，“x”为横向滚动，“y”为纵向滚动
element：目标元素，必填
w：宽度，必填
h：高度，必填
childTag：目标元素的需要进行滚动的子节点tagName，必填
num:必要的子元素个数，默认为5（<=该数值时，按钮不显示，不滚动），纯数字
delay：延迟时间，单位毫秒，默认为3000
leftBtn：左侧按钮，可选；
rightBtn：右侧按钮，可选；

已知问题及需改进处：

element的padding/margin/border被强制改为0或none；
leftBtn/rightBtn的值是className时创建元素的样式有问题，需改进；

获取外联样式

vicZen — Tue, 20 May 2008 09:22:23 +0000

IE及OP可使用currentStyle，具体用法可参考《DHTML手册》
Firefox等浏览器可以使用下面的方式来获取

window.getComputedStyle(element,'').getPropertyValue(stylevalue);

注意这2中方式都是只读的。

于是写了个公用的函数：

function getStyle(ele,value) {/*-----  获取元素的真实style  -----*/
	var rs;
	if(ele.style[value]) {
		rs = ele.style[value];
	}else if(window.getComputedStyle) {
		value=value.replace(/([A-Z])/g,"-$1");
		rs = window.getComputedStyle(ele,'').getPropertyValue(value);
		if(value == 'color') {rs = colorToHex(rs);} //格式化color为16进制表示
	}else if(ele.currentStyle) {
		rs = ele.currentStyle[value];
	}else {
		return null;
	}
	return rs;
}

但各浏览器获取color的值不同（ff/sa为rgb值,op为十六进制值,currentStyle获取的是css里面的原始有效值）
因此需要对color值进行转换（十六进制表示，无法格式化预命名颜色）：

function colorToHex(color) {/*-----  以十六进制格式化style中的color，无法格式化预命名颜色  -----*/
	var rgb = /rgb\((\d{1,3}),(\s)*(\d{1,3}),(\s)*(\d{1,3})\)/; //rgb正则,结果序数为1、3、5
	var noun = /^\w+/; //预命名颜色正则
	var rs;
	if(rgb.test(color)) {
		var rgbfix = rgb.exec(color);
		var r,g,b;
		r = parseInt(rgbfix[1]).toString(16);
		g = parseInt(rgbfix[3]).toString(16);
		b = parseInt(rgbfix[5]).toString(16);
		rs = '#'+(r<10?'0'+r:r)+(g<10?'0'+g:g)+(b<10?'0'+b:b);
	}else {
		rs = color;
	}
	if(rs.length==4 && !noun.test(rs)) {rs = rs+rs.split('#')[1]}//修正简写的十六进制，采取length判断方式
	return rs;
}

5.23
修正getPropertyValue方法获取类似于paddingLeft的值的问题
优化效率：有style属性定义时优先取style的值、color值修正仅在getComputedStyle取值时进行

javascript图片滚动新闻（渐变）

vicZen — Fri, 09 May 2008 07:10:27 +0000

点此查看示例
 点此下载

测试通过IE6/7、Firefox、opera、safari

imgScrollByWrap(imgWrap,time,w,h,btnclass,btnlight);

参数说明：

imgWrap: 装置图片列表的容器，可参考示例
time: 切换时间，单位为毫秒（可选，默认为3500）
w: 图片的宽度，不需要加px，例如125（可选，默认为auto）
h: 图片的高度，不需要加px（可选，默认为auto）
btnclass: 装置按钮的容器的className（可选，默认为scrollNewsBtn）
btnlight: 按钮高亮的className（可选，默认为lh）

需要一个空白图片“blank.gif”，图片路径请自行修改scroll.js第385行

5.19更新

firefox等标准浏览器也可以正常渐变了
不再需要默认图片，仅需要一个图片容器即可
未来可能会加入更多的切换效果
功能是完成了，但代码可能还需后继优化

5.20
修正高宽取值为auto时的错误

css压缩工具(javascript)

vicZen — Thu, 17 Apr 2008 10:13:24 +0000

点此运行
0418更新界面，加入更多的优化：

去除注释
去除多余空白(空格、制表符等)
去除末尾分号
单位属性值优化
大写转换为小写

简单的正则替换

还有待更多的优化&&学习

FireFox正则插件Regular Expressions Tester

vicZen — Thu, 17 Apr 2008 04:46:11 +0000

Regular Expressions Tester可以很方便的进行正则表达式测试，学习正则的好东东^^

IE下attachEvent中this指向问题

vicZen — Wed, 09 Apr 2008 08:18:42 +0000

IE的attachEvent绑定事件时，事件中的this指针会指向window对象。而在ff中，addEventListener中的this会指向触发事件的对象。

解决方法：srcElement || target

element.attachEvent('onclick',function (e) {e = window.event || e ; obj = e.srcElement || e.target; func(obj)});

event.srcElement就是指向触发事件的元素（IE only）

event.target同srcElement一样（Firefox only）

JS正则表达式详解（转）

vicZen — Thu, 03 Apr 2008 06:55:49 +0000

JS的正则表达式//校验是否全由数字组成

function isDigit(s)
{
var patrn=/^[0-9]{1,20}$/;
if (!patrn.exec(s)) return false
return true
}

//校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串

function isRegisterUserName(s)
{
var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
if (!patrn.exec(s)) return false
return true
}

//校验用户姓名：只能输入1-30个以字母开头的字串

function isTrueName(s)
{
var patrn=/^[a-zA-Z]{1,30}$/;
if (!patrn.exec(s)) return false
return true
}
}}

//校验密码：只能输入6-20个字母、数字、下划线
{{{
function isPasswd(s)
{
var patrn=/^(\w){6,20}$/;
if (!patrn.exec(s)) return false
return true
}

//校验普通电话、传真号码：可以“+”开头，除数字外，可含有“-”

function isTel(s)
{
//var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?(\d){1,12})+$/;
var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
if (!patrn.exec(s)) return false
return true
}

//校验手机号码：必须以数字开头，除数字外，可含有“-”

function isMobil(s)
{
var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
if (!patrn.exec(s)) return false
return true
}

//校验邮政编码

function isPostalCode(s)
{
//var patrn=/^[a-zA-Z0-9]{3,12}$/;
var patrn=/^[a-zA-Z0-9 ]{3,12}$/;
if (!patrn.exec(s)) return false
return true
}

//校验搜索关键字

function isSearch(s)
{
var patrn=/^[^`~!@#$%^&*()+=|\\\][\]\{\}:;’\,.<>/?]{1}[^`~!@$%^&()+=|\\\]
[\]\{\}:;’\,.<>?]{0,19}$/;
if (!patrn.exec(s)) return false
return true
}

function isIP(s) //by zergling
{
var patrn=/^[0-9.]{1,20}$/;
if (!patrn.exec(s)) return false
return true
}

正则表达式”^\\d+$”　　//非负整数（正整数 + 0）
“^[0-9]*[1-9][0-9]*$”　　//正整数
“^((-\\d+)|(0+))$”　　//非正整数（负整数 + 0）
“^-[0-9]*[1-9][0-9]*$”　　//负整数
“^-?\\d+$”　　　　//整数
“^\\d+(\\.\\d+)?$”　　//非负浮点数（正浮点数 + 0）
“^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$”　
//正浮点数
“^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$”　　//非正浮点数（负浮点数 + 0）
“^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$”　
//负浮点数
“^(-?\\d+)(\\.\\d+)?$”　　//浮点数
“^[A-Za-z]+$”　　//由26个英文字母组成的字符串
“^[A-Z]+$”　　//由26个英文字母的大写组成的字符串
“^[a-z]+$”　　//由26个英文字母的小写组成的字符串
“^[A-Za-z0-9]+$”　　//由数字和26个英文字母组成的字符串
“^\\w+$”　　//由数字、26个英文字母或者下划线组成的字符串
“^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$”　　　　//email地址
“^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$”　　//url
“^[A-Za-z0-9_]*$”

正则表达式使用详解简介

简单的说，正则表达式是一种可以用于模式匹配和替换的强有力的工具。其作用如下：测试字符串的某个模式。例如，可以对一个输入字符串

进行测试，看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证。替换文本。可以在文档中使用一个正则

表达式来标识特定文字，然后可以全部将其删除，或者替换为别的文字。根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入

字段中查找特定文字。

基本语法

在对正则表达式的功能和作用有了初步的了解之后，我们就来具体看一下正则表达式的语法格式。正则表达式的形式一般如下：　　

/love/　　其中位于“/”定界符之间的部分就是将要在目标对象中进行匹配的模式。用户只要把希望查找匹配对象的模式内容放入“/”定界

符之间即可。为了能够使用户更加灵活的定制模式内容，正则表达式提供了专门的“元字符”。所谓元字符就是指那些在正则表达式中具有特

殊意义的专用字符，可以用来规定其前导字符（即位于元字符前面的字符）在目标对象中的出现模式。较为常用的元字符包括： “+”， “*

”，以及 “?”。

“+”元字符规定其前导字符必须在目标对象中连续出现一次或多次。

“*”元字符规定其前导字符必须在目标对象中出现零次或连续多次。

“?”元字符规定其前导对象必须在目标对象中连续出现零次或一次。

下面，就让我们来看一下正则表达式元字符的具体应用。

/fo+/　　因为上述正则表达式中包含“+”元字符，表示可以与目标对象中的 “fool”, “fo”, 或者 “football”等在字母f后面连续出现

一个或多个字母o的字符串相匹配。

/eg*/　　因为上述正则表达式中包含“*”元字符，表示可以与目标对象中的 “easy”, “ego”, 或者 “egg”等在字母e后面连续出现零个

或多个字母g的字符串相匹配。

/Wil?/　　因为上述正则表达式中包含“？”元字符，表示可以与目标对象中的 “Win”, 或者“Wilson”,等在字母i后面连续出现零个或一

个字母l的字符串相匹配。

有时候不知道要匹配多少字符。为了能适应这种不确定性，正则表达式支持限定符的概念。这些限定符可以指定正则表达式的一个给定组件必

须要出现多少次才能满足匹配。

{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 <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}'

等价于 'o?'。请注意在逗号和两个数之间不能有空格。

除了元字符之外，用户还可以精确指定模式在匹配对象中出现的频率。例如，/jim {2,6}/ 上述正则表达式规定字符m可以在匹配对象中连续出

现2-6次，因此，上述正则表达式可以同jimmy或jimmmmmy等字符串相匹配。在对如何使用正则表达式有了初步了解之后，我们来看一下其它几

个重要的元字符的使用方式。

\s：用于匹配单个空格符，包括tab键和换行符；
\S：用于匹配除单个空格符之外的所有字符；
\d：用于匹配从0到9的数字；
\w：用于匹配字母，数字或下划线字符；
\W：用于匹配所有与\w不匹配的字符；
. ：用于匹配除换行符之外的所有字符。

（说明：我们可以把\s和\S以及\w和\W看作互为逆运算）下面，我们就通过实例看一下如何在正则表达式中使用上述元字符。 /\s+/ 上述正

则表达式可以用于匹配目标对象中的一个或多个空格字符。 /\d000/　如果我们手中有一份复杂的财务报表，那么我们可以通过上述正则表达

式轻而易举的查找到所有总额达千元的款项。除了我们以上所介绍的元字符之外，正则表达式中还具有另外一种较为独特的专用字符，即定位

符。定位符用于规定匹配模式在目标对象中的出现位置。较为常用的定位符包括： “^”, “$”, “\b” 以及 “\B”。
“^”定位符规定匹配模式必须出现在目标字符串的开头
“$”定位符规定匹配模式必须出现在目标对象的结尾
“\b”定位符规定匹配模式必须出现在目标字符串的开头或结尾的两个边界之一
“\B”定位符则规定匹配对象必须位于目标字符串的开头和结尾两个边界之内，
即匹配对象既不能作为目标字符串的开头，也不能作为目标字符串的结尾。

同样，我们也可以把“^”和“$”以及“\b”和“\B”看作是互为逆运算的两组定位符。举例来说： /^hell/　因为上述正则表达式中包含“^

”定位符，所以可以与目标对象中以 “hell”, “hello”或“hellhound”开头的字符串相匹配。 /ar$/　因为上述正则表达式中包含“$”

定位符，所以可以与目标对象中以 “car”, “bar”或 “ar” 结尾的字符串相匹配。 /\bbom/　因为上述正则表达式模式以“\b”定位符开

头，所以可以与目标对象中以 “bomb”, 或 “bom”开头的字符串相匹配。/man\b/　因为上述正则表达式模式以“\b”定位符结尾，所以可

以与目标对象中以 “human”, “woman”或 “man”结尾的字符串相匹配。为了能够方便用户更加灵活的设定匹配模式，正则表达式允许使

用者在匹配模式中指定某一个范围而不局限于具体的字符。例如：
/[A-Z]/　　上述正则表达式将会与从A到Z范围内任何一个大写字母相匹配。
/[a-z]/　　上述正则表达式将会与从a到z范围内任何一个小写字母相匹配。
/[0-9]/ 　上述正则表达式将会与从0到9范围内任何一个数字相匹配。
/([a-z][A-Z][0-9])+/　上述正则表达式将会与任何由字母和数字组成的字符串，如 “aB0” 等相匹配。

这里需要提醒用户注意的一点就是可以在正则表达式中使用 “()” 把字符串组合在一起。“()”符号包含的内容必须同时出现在目标对象中

。因此，上述正则表达式将无法与诸如 “abc”等的字符串匹配，因为“abc”中的最后一个字符为字母而非数字。如果我们希望在正则表达

式中实现类似编程逻辑中的“或”运算，在多个不同的模式中任选一个进行匹配的话，可以使用管道符 “|”。例如：/to|too|2/　上述正则

表达式将会与目标对象中的 “to”, “too”, 或 “2” 相匹配。正则表达式中还有一个较为常用的运算符，即否定符 “[^]”。与我们前文

所介绍的定位符 “^” 不同，否定符 “[^]”规定目标对象中不能存在模式中所规定的字符串。例如：/[^A-C]/　上述字符串将会与目标对象

中除A，B，和C之外的任何字符相匹配。一般来说，当“^”出现在 “[]”内时就被视做否定运算符；而当“^”位于“[]”之外，或没有“[]

”时，则应当被视做定位符。最后，当用户需要在正则表达式的模式中加入元字符，并查找其匹配对象时，可以使用转义符“\”。例

如：/Th\*/ 　上述正则表达式将会与目标对象中的“Th*”而非“The”等相匹配。在构造正则表达式之后，就可以象数学表达式一样来求值，

也就是说，可以从左至右并按照一个优先级顺序来求值。优先级如下：
1．\ 转义符
2．(), (?:), (?=), [] 圆括号和方括号
3．*, +, ?, {n}, {n,}, {n,m} 限定符
4．^, $, \anymetacharacter 位置和顺序
5．|“或”操作

使用实例在JavaScript 1.2中带有一个功能强大的RegExp()对象，可以用来进行正则表达式的匹配操作。其中的test()方法可以检验目标对象

中是否包含匹配模式，并相应的返回true或false。我们可以使用JavaScript编写以下脚本，验证用户输入的邮件地址的有效性。

　
　　
　
　　

正则表达式对象本对象包含正则表达式模式以及表明如何应用模式的标志。
语法 1 re = /pattern/[flags]
语法 2 re = new RegExp(“pattern”,["flags"])

参数 re 必选项。将要赋值为正则表达式模式的变量名。
Pattern 必选项。要使用的正则表达式模式。如果使用语法 1，用 “/” 字符分隔模式。如果用语法 2，用引号将模式引起来。

Flags 可选项。如果使用语法 2 要用引号将 flag 引起来。标志可以组合使用，可用的有：

g （全文查找出现的所有 pattern）
i （忽略大小写）
m （多行查找）

示例下面的示例创建一个包含正则表达式模式及相关标志的对象(re)，向您演示正则表达式对象的用法。在本例中，作为结果的正则表达式对

象又用于 match 方法中：
function MatchDemo()
{
var r, re; // 声明变量。
var s = “The rain in Spain falls mainly in the plain”;
re = new RegExp(“ain”,”g”); // 创建正则表达式对象。
r = s.match(re); // 在字符串 s 中查找匹配。
return(r);
}

exec 方法用正则表达式模式在字符串中运行查找，并返回包含该查找结果的一个数组。 rgExp.exec(str)
参数

rgExp 必选项。包含正则表达式模式和可用标志的正则表达式对象。

str 必选项。要在其中执行查找的 String 对象或字符串文字。

说明
如果 exec 方法没有找到匹配，则它返回 null。如果它找到匹配，则 exec 方法返回一个数组，并且更新全局 RegExp 对象的属性，以反映匹

配结果。数组的0元素包含了完整的匹配，而第1到n元素中包含的是匹配中出现的任意一个子匹配。这相当于没有设置全局标志 (g) 的 match

方法。如果为正则表达式设置了全局标志，exec 从以 lastIndex 的值指示的位置开始查找。如果没有设置全局标志，exec 忽略 lastIndex

的值，从字符串的起始位置开始搜索。

exec 方法返回的数组有三个属性，分别是 input、index 和 lastIndex。Input 属性包含了整个被查找的字符串。Index 属性中包含了整个被

查找字符串中被匹配的子字符串的位置。LastIndex 属性中包含了匹配中最后一个字符的下一个位置。

示例
下面的例子举例说明了 exec 方法的用法：

返回值：0-3The 4-8rain 9-11in 12-17Spain 18-23falls 24-30mainly 31-33in 34-37the 38-43plain

test 方法
返回一个 Boolean 值，它指出在被查找的字符串中是否存在模式。 rgexp.test(str)

参数
rgexp 必选项。包含正则表达式模式或可用标志的正则表达式对象。

str 必选项。要在其上测试查找的字符串。

说明 test 方法检查在字符串中是否存在一个模式，如果存在则返回 true，否则就返回 false。全局 RegExp 对象的属性不由 test 方法来修

改。

示例下面的例子举例说明了 test 方法的用法：

function TestDemo(re, s)
{
var s1; // 声明变量。
// 检查字符串是否存在正则表达式。
if (re.test(s)) // 测试是否存在。
s1 = ” contains “; // s 包含模式。
else
s1 = ” does not contain “; // s 不包含模式。
return(“‘” + s + “‘” + s1 + “‘”+ re.source + “‘”); // 返回字符串。
}

函数调用：document.write (TestDemo(/ain+/ ,”The rain in Spain falls mainly in the plain.”));

返回值：’The rain in Spain falls mainly in the plain.’ contains ‘ain+’

match 方法使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回。
stringObj.match(rgExp)
参数
stringObj 必选项。对其进行查找的 String 对象或字符串文字。

rgExp 必选项。为包含正则表达式模式和可用标志的正则表达式对象。也可以是包含正则表达式模式和可用标志的变量名或字符串文字。

说明
如果 match 方法没有找到匹配，返回 null。如果找到匹配返回一个数组并且更新全局 RegExp 对象的属性以反映匹配结果。 match 方法返回

的数组有三个属性：input、index 和 lastIndex。Input 属性包含整个的被查找字符串。Index 属性包含了在整个被查找字符串中匹配的子字

符串的位置。LastIndex 属性包含了最后一次匹配中最后一个字符的下一个位置。如果没有设置全局标志 (g)，数组的 0 元素包含整个匹配，

而第 1 到 n 元素包含了匹配中曾出现过的任一个子匹配。这相当于没有设置全局标志的 exec 方法。如果设置了全局标志，元素 0 到 n 中

包含所有匹配。

示例
下面的示例演示了match 方法的用法：

function MatchDemo()
{
var r, re; // 声明变量。
var s = “The rain in Spain falls mainly in the plain”;
re = /ain/i; // 创建正则表达式模式。
r = s.match(re); // 尝试匹配搜索字符串。
return(r); // 返回第一次出现 “ain” 的地方。
}

返回值：ain
本示例说明带 g 标志设置的 match 方法的用法。

function MatchDemo()
{
var r, re; // 声明变量。
var s = “The rain in Spain falls mainly in the plain”;
re = /ain/ig; // 创建正则表达式模式。
r = s.match(re); // 尝试去匹配搜索字符串。
return(r); // 返回的数组包含了所有 “ain”
// 出现的四个匹配。
}

返回值：ain,ain,ain,ain
上面几行代码演示了字符串文字的 match 方法的用法。

var r, re = “Spain”;
r = “The rain in Spain”.replace(re, “Canada”);
return r;

返回值：The rain in Canada search 方法返回与正则表达式查找内容匹配的第一个子字符串的位置。
stringObj.search(rgExp)

参数
stringObj 必选项。要在其上进行查找的 String 对象或字符串文字。

rgExp 必选项。包含正则表达式模式和可用标志的正则表达式对象。

说明

search 方法指明是否存在相应的匹配。如果找到一个匹配，search 方法将返回一个整数值，指明这个匹配距离字符串开始的偏移位置。如果

没有找到匹配，则返回 -1。

示例
下面的示例演示了 search 方法的用法。

function SearchDemo()
{
var r, re; // 声明变量。
var s = “The rain in Spain falls mainly in the plain.”;
re = /falls/i; // 创建正则表达式模式。
r = s.search(re); // 查找字符串。
return(r); // 返回 Boolean 结果。
}

返回值：18

正则表达式语法一个正则表达式就是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主

体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。
这里有一些可能会遇到的正则表达式示例：

JScript VBScript 匹配
/^\[ \t]*$/ “^\[ \t]*$” 匹配一个空白行。
/\d{2}-\d{5}/ “\d{2}-\d{5}” 验证一个ID 号码是否由一个2位数字，一个连字符以及一个5位数字组成。
/<(.*)>.*<\/\1>/ “<(.*)>.*<\/\1>” 匹配一个 HTML 标记。

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

字符描述 \ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个后向引用、或一个八进制转义符。例如，’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 <= m。最少匹配 n 次且最多匹配 m 次。刘， “o{1,3}” 将匹配 “fooooood” 中的前三个 o。’o{0,1}’

等价于 ‘o?’。请注意在逗号和两个数之间不能有空格。

? 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字

符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 “oooo”，’o+?’ 将匹配单个 “o”，而 ‘o+’ 将匹配所有 ‘o’。

. 匹配除 “\n” 之外的任何单个字符。要匹配包括 ‘\n’ 在内的任何字符，请使用象 ‘[.\n]‘ 的模式。 (pattern) 匹配pattern 并获取这一

匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 $0…$9 属性。要匹配圆

括号字符，请使用 ‘$‘ 或 ‘$’。

(?: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 是一个正整数。对所获取的匹配的引用。例如，’(.)\1′ 匹配两个连续的相同字符。

\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 匹配版权符号 (?)。

优先权顺序在构造正则表达式之后，就可以象数学表达式一样来求值，也就是说，可以从左至右并按照一个优先权顺序来求值。
下表从最高优先级到最低优先级列出各种正则表达式操作符的优先权顺序：

操作符描述
\ 转义符
(), (?:), (?=), [] 圆括号和方括号
*, +, ?, {n}, {n,}, {n,m} 限定符
^, $, \anymetacharacter 位置和顺序
| “或”操作

普通字符

普通字符由所有那些未显式指定为元字符的打印和非打印字符组成。这包括所有的大写和小写字母字符，所有数字，所有标点符号以及一些符

号。

最简单的正则表达式是一个单独的普通字符，可以匹配所搜索字符串中的该字符本身。例如，单字符模式 ‘A’ 可以匹配所搜索字符串中任何位

置出现的字母 ‘A’。这里有一些单字符正则表达式模式的示例：

/a/
/7/
/M/

等价的 VBScript 单字符正则表达式为：
“a”
“7″
“M”

可以将多个单字符组合在一起得到一个较大的表达式。例如，下面的 JScript 正则表达式不是别的，就是通过组合单字符表达式 ‘a’、’7′以

及 ‘M’ 所创建出来的一个表达式。
/a7M/ 等价的 VBScript 表达式为：

“a7M” 请注意这里没有连接操作符。所需要做的就是将一个字符放在了另一个字符后面。

页面平滑加载js

vicZen — Thu, 30 Aug 2007 06:43:26 +0000

为了避免JS在HTMLDOM加载完之前就运行而产生错误，一般是通过window.onload事件来控制页面加载完之后才执行JS，但window.onload的加载还包括了图片、视频等，这样造成js最终执行可能要等上很长一段时间。

下面的代码能判定DOM是否加载完成：

提供支持的2个东东：

Mozilla提供的DOMContentLoaded事件——在Dom树构完成但图片资源等未完成时触发

IE的defer属性——包括在W3C的DOM1标准里，但defer只能放在script标签里.冏

/*
*(c)2006 Dean Edwards/Matthias Miller/John Resig
*Special thanks to Dan Webb's domready.js Prototype extension
*and Simon Willison's addLoadEvent
*
*For more info,see:
*http://dean.edwards.name/weblog/2006/06/again/
*http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
*http://simon.incutio.com/archive/2004/05/26/addLoadEvent
*
*Thrown together by Jesse Skinner (http://www.thefutureoftheweb.com/)
*
*
*To use: call addDOMLoadEvent one	or more times with functions, ie:
*
*function something() {
*   // do something
*}
*addDOMLoadEvent(something);
*
*addDOMLoadEvent(function() {
*    // do other stuff
*});
*/
function addLoad(func) {
	if (!window.__load_events) {
		var init = function (){
			// quit if this function has already been called
			if (arguments.callee.done) return;
 
			// flag this function so we don't do the same thing twice
			arguments.callee.done = true;
 
			// kill the timer
			if (window.__load_timer){
				clearInterval(window.__load_timer);
				window.__load_timer = null;
			}
 
			// execute each function	in the stack in the order they were	added
			for (var i=0;i < window.__load_events.length;i++) {
				window.__load_events[i]();
			}
			window.__load_events = null;
		}
		// for Mozilla/Opera9
		if (document.addEventListener) {
			document.addEventListener("DOMContentLoaded", init, false);
		}
 
		// for Internet Explorer
		/*@cc_on @*/
		/*@if (@_win32)
			document.write("<\/scr"+"ipt>");
			var script =document.getElementById("__ie_onload");
			script.onreadystatechange = function() {
				if(this.readyState == "complete") {
					init(); //	call the onload handler
				}
			};
		/*@end @*/
 
		// for Safari
		if (/WebKit/i.test(navigator.userAgent)) {// sniff
			window.__load_timer = setInterval(function() {
				if(/loaded|complete/.test(document.readyState)) {
					init();	//call the onload handler
				}
			},10);
		}
 
		// for other browsers
		window.onload = init;
 
		// create event function stack
		window.__load_events =	[];
	}
 
	// add function to event stack
	window.__load_events.push(func);
}

单条新闻滚动

vicZen — Wed, 01 Aug 2007 04:33:16 +0000

效果点此预览

function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}
 
//滚动新闻---begin
// initMarquee(主容器id，主容器中放置文字的容器元素名称，新容器id，高度px，延迟时间ms)
//调用函数：insertAfter(newElement,targetElement)，依赖innerHTML方法；
marqueeInterval=new Array();
marqueeId = 0;
 
function marqueeMain () {
	initMarquee('mContend','li','mBox',15,4000);
}
 
function initMarquee(mid,mchild,mnewid,mheight,mdelay) {
	if (!document.getElementById) return false;
	if (!document.getElementById (mid)) return false;
	var m = document.getElementById(mid);
	var mc = document.getElementById(mid).getElementsByTagName(mchild);
	m.style.display = 'none';
	marqueeContent=new Array();
	for (var i=0; i<mc.length; i++) {
		marqueeContent[i] = mc[i].innerHTML;
	}
	var str=marqueeContent[0];
	var marDIV = document.createElement('div');
	var marDIV2 = document.createElement('div');
	//var marSTR = document.createTextNode(str);
	marDIV.id = mnewid;
	marDIV.style.overflow = 'hidden';
	marDIV.style.height = mheight+'px';
	marDIV.appendChild(marDIV2);
	//marDIV2.appendChild(marSTR);
	marDIV2.innerHTML = str
	insertAfter(marDIV,m);
	marqueeId++;
	marqueeInterval[0]=setInterval("startMarquee("+mheight+",'"+mnewid+"')",mdelay);
}
 
function startMarquee(mheight,mnewid) {
	var str=marqueeContent[marqueeId];
	var newdiv = document.getElementById (mnewid);
	marqueeId++;
	if(marqueeId>=marqueeContent.length) marqueeId=0;
	if(newdiv.childNodes.length==1) {
		var nextLine=document.createElement('DIV');
		nextLine.innerHTML=str;
		newdiv.appendChild(nextLine);
	}else{
		newdiv.childNodes[0].innerHTML=str;
		newdiv.appendChild(marqueeBox.childNodes[0]);
		newdiv.scrollTop=0;
	}
	clearInterval(marqueeInterval[1]);
	marqueeInterval[1]=setInterval("scrollMarquee("+mheight+",'"+mnewid+"')",10);
}
 
function scrollMarquee(mheight,mnewid) {
	var newdiv = document.getElementById (mnewid);
	newdiv.scrollTop++;
	if(newdiv.scrollTop%mheight==mheight){
		clearInterval(marqueeInterval[1]);
	}
}
//滚动新闻---end

AJAX实战电子版下载

vicZen — Fri, 29 Jun 2007 11:45:49 +0000

《AJAX实战》中文版电子书下载
下载地址:

http://www.xlvv.com/soft/32/34/F76C/F76C8E14312754.html

另附:
《Ajax基础教程》中文版(附代码)(pdf格式)

http://book.devworld.cn/book/5/20060825001.html

vfresh » JavaScript

JSLint for EditPlus 检验js语法

历史版本

相关阅读

各浏览器中cookie限制

jQuery源码查看器

jQuery 1.4 更新概述

修改内容：

新增内容：

[译]IE6终极备忘：修复IE6下 25+ Bugs

【目录】

〖策略〗

IE6 市场占有率

做一个简洁的设计

使用合适的文档申明(doctype)

HTML 5

HTML 4.01 Strict

HTML 4.01 Frameset

HTML 4.01 Transitional

XHTML 1.0 Strict

XHTML 1.0 Frameset

XHTML 1.0 Transitional

XHTML 1.1

验证你的代码

先对标准浏览器进行兼容

渐进增强(Progressive Enhancement)

更多渐进增强的资料：

使用自己的预设样式（CSS Reset）

简单CSS Reset示例：

一些可供参考的CSS Resets：

使用JavaScript框架

使用JavaScript模拟标准浏览器

如何在IE下调试页面

〖对IE6单独兼容〗

使用IE特有条件注释

使用CSS选择器区分开IE6

扩展阅读：

使用JavaScript区分开IE6

扩展阅读：

〖图片〗

PNG半透明图片

JavaScript方式修复IE6 PNG

IE6下的圆角

背景闪烁问题

其他解决方法：

〖布局〗

理解 hasLayout

扩展阅读：

IE6 盒模型

扩展阅读：

最小高度

最大高度

JavaScript

100% 高度

最小宽度

最大宽度

双边距Bug

清除浮动

示例：

扩展阅读：

浮动层错位

扩展阅读

躲猫猫bug

扩展阅读：

绝对定位元素的1像素间距bug

扩展阅读：

3像素间距bug

IE下z-index的bug

扩展阅读：

Overflow Bug

〖列表问题〗

横向列表宽度bug

列表阶梯bug

垂直列表间隙bug

BUG代码：

解决方法：

扩展阅读：

〖行为〗

IE6中的:hover

在IE浏览其中使用Canvas标签

在IE浏览其中使用`Canvas`标签

AJAX实战电子版下载