脚步无法到达的地方，目光可以到达！目光无法到达的地方，梦想可以到达！预览模式: 普通 | 列表

JS解析JSON

作者:bonny 日期:2010-07-16 TOP

在开始之前，先介绍一下javascript中的eval()函数

先看一个例子：

alert(eval("3+4"))

上面可以在页面中输入7。这就是奇迹！注意这里的"3+4"是一个字符串，也就是说：eval函数可以把一个字符串当作一个javascript表达式一样执行。当然，用eval函数要小心，可能会出现很多安全问题！这里我们暂且不提这个。

分类:JavaScript | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 136

车友网驾驶员考试系统上线啦！

作者:bonny 日期:2010-07-05 TOP

网上实在是找不到一个好点的驾驶员考试系统，想自己做一个。近来一段时间终于完成了。

地址：http://www.che-you.cn

功能特点

离线考试

用户进入驾驶员模拟考试系统后，系统会随机取出100题。如果用户选好试题后，网络不稳定掉线对用户答题交卷没有任何影响。

界面友好

分类:Note | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 141

事件处理---addEventListener

作者:bonny 日期:2010-06-24 TOP

addEventListener 用于注册事件处理程序，IE 中为 attachEvent，我们为什么讲 addEventListener 而不讲 attachEvent 呢？一来 attachEvent 比较简单，二来 addEventListener 才是 DOM 中的标准内容。

简介

addEventListener 为文档节点、document、window 或 XMLHttpRequest 注册事件处理程序，在以前我们一般是 <input type="button" onclick="..."，或 document.getElementById("testButton").onclick = FuncName，而在 DOM 中，我们用 addEventListener（IE 中用 attachEvent）。

语法
target.addEventListener(type, listener, useCapture);

    * target 文档节点、document、window 或 XMLHttpRequest。
    * type 字符串，事件名称，不含"on"，比如"click"、"mouseover"、"keydown"等。
    * listener 实现了 EventListener 接口或者是 JavaScript 中的函数。
    * useCapture 是否使用捕捉，看了后面的事件流一节后就明白了，一般用 false。

示例
function Go()
{
    //...
}

document.getElementById("testButton").addEventListener("click", Go, false);

或者 listener 直接就是函数
document.getElementById("testButton").addEventListener("click", function () { ... }, false);

addEventListener－事件流

说到 addEventListener 不得不说到事件流，先说事件流对后面的解释比较方便。

当一个事件发生时，分为三个阶段：

捕获阶段从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。（IE 中无此阶段。）

目标阶段触发在目标对象本身注册的事件处理程序，也称正常事件派发阶段。

冒泡阶段从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCapture 为 false，则调用该事件处理程序。

举例
<div id="div1">
<div id="div2">
    <div id="div3">
      <div id="div4">
      </div>
    </div>
</div>
</div>

如果在 d3 上点击鼠标，事件流是这样的：

捕获阶段在 div1 处检测是否有 useCapture 为 true 的事件处理程序，若有，则执行该程序，然后再同样地处理 div2。

目标阶段在 div3 处，发现 div3 就是鼠标点击的节点，所以这里为目标阶段，若有事件处理程序，则执行该程序，这里不论 useCapture 为 true 还是 false。

冒泡阶段在 div2 处检测是否有 useCapture 为 false 的事件处理程序，若有，则执行该程序，然后再同样地处理 div1。

注意，上述捕获阶段和冒泡阶段中，实际上 div1 之上还应该有结点，比如有 body，但这里不讨论。

addEventListener－第三个参数 useCapture

addEventListener 有三个参数：第一个参数表示事件名称（不含 on，如 "click"）；第二个参数表示要接收事件处理的函数；第三个参数为 useCapture，本文就讲解它。
<div id="outDiv">
<div id="middleDiv">
    <div id="inDiv">请在此点击鼠标。</div>
</div>
</div>

<div id="info"></div>

var outDiv = document.getElementById("outDiv");
var middleDiv = document.getElementById("middleDiv");
var inDiv = document.getElementById("inDiv");
var info = document.getElementById("info");

outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);

上述是我们测试的代码，根据 info 的显示来确定触发的顺序，有三个 addEventListener，而 useCapture 可选值为 true 和 false，所以 2*2*2，可以得出 8 段不同的程序。

    * 全为 false 时，触发顺序为：inDiv、middleDiv、outDiv；
    * 全为 true 时，触发顺序为：outDiv、middleDiv、inDiv；
    * outDiv 为 true，其他为 false 时，触发顺序为：outDiv、inDiv、middleDiv；
    * middleDiv 为 true，其他为 false 时，触发顺序为：middleDiv、inDiv、outDiv；
    * ……

最终得出如下结论：

    * true 的触发顺序总是在 false 之前；
    * 如果多个均为 true，则外层的触发先于内层；
    * 如果多个均为 false，则内层的触发先于外层。

下面提供全部代码，您可以更改其中的 true、false 值，来进行测试。注意，不适用于 IE。

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

<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>useCapture</title>
<style type="text/css">
#outDiv
{
    padding:10px 10px 10px 10px;
    border:1px solid red;
}

#middleDiv
{
    padding:10px 10px 10px 10px;
    border:1px solid green;
}

#inDiv
{
    padding:10px 10px 10px 10px;
    border:1px solid blue;
}
</style>
</head>

<body>

<div id="outDiv">
<div id="middleDiv">
    <div id="inDiv">请在此点击鼠标。</div>
</div>
</div>

<div id="info"></div>

<script language="javascript" type="text/javascript">

</script>

</body>

</html>

addEventListener－event 对象的属性和方法

事件触发时，会将一个 Event 对象传递给事件处理程序，比如：
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

事件类型

DOM 事件类型是分为 UIEvent、UIEvent:KeyEvent、UIEvent:MouseEvent，不同的事件有不同的属性和方法，但常用的来说我们都不会用错，比如我们不会在鼠标事件中去取键盘值（Ctrl、Alt、Shift 除外），所以我们没有必要深究。

该对象的属性和方法有：

view 只读，对象，发生事件的 Window 对象。

type 只读，字符串。比如鼠标点击事件的类型：click。

eventPhase 只读，数字，事件流正经历的阶段。1－捕获，2－目标，3－冒泡。

target 只读，对象，派发事件的目标对象。比如鼠标是点击在哪个按钮上的。

currentTarget 只读，对象，当前正在调用addEventListener的对象，也就是当前 addEventListener 是绑定在哪个对象上的。

timeStamp 只读，数字，用毫秒表示事件发生时距计算机开机的时间。

cancelable 只读，布尔，处理事件的默认行为是否可以停止。主要针对一些系统事件，如果值为 true，则 event 的 preventDefault 方法可以使用，否则不可用。

preventDefault() 阻止浏览器的默认行为，比如在文本框中打字触发 keydown，如果 keydown 事件处理程序中调用了 preventDefault()，所打的字就不会跑到文本框中去，注意，此时不要弹出 alert 对话框，否则可能不起作用。IE 中在事件处理程序中用 return false 实现类似功能。

bubbles 只读，布尔，事件是否开启冒泡功能。

stopImmediatePropagation 这个东西在 JavaScript 中是个属性，而不是方法，布尔，但具体测试并未发现其用途，不知是不是 bug。

stopPropagation() 停止当前的事件流传播，但不会停止当前正在处理的对象。IE 中用 event.cancelBubble = true 实现类似功能。

cancelBubble 布尔，是否取消冒泡，不建议使用，用 stopPropagation() 代替。

preventBubble() 阻止冒泡，不建议使用，用 stopPropagation() 代替。

preventCapture() 阻止捕获，不建议使用，用 stopPropagation() 代替。

detail 只读，数字，提供时间的额外信息，对于 click 事件、mousedown 事件和 mouseup 事件，这个字段代表点击的次数。

isChar 只读，布尔，按下的按键值是否是字符，比如按下 Ctrl 键时，就返回 false。不过您在 Firefox 中测试时，该值总是 false，Firefox 官方已经说明这是一个 bug。

altKey 只读，布尔，是否按下了 Alt 键。

ctrlKey 只读，布尔，是否按下了 Ctrl 键。

shiftKey 只读，布尔，是否按下了 Shift 键。

metaKey 只读，布尔，是否按下了 Meta 键。

下面一些属性很有意思，请仔细区别。

charCode 只读，数字，字符（英文、数字、符号）的 Unicode 值。

    * 只用于 keypress。

keyCode 只读，数字，键盘按键值。

    * 用于 keypress 时：返回非字符按键值（除 Ctrl、Shift、Alt、Caps Lock、单行文本框中按向上键等）；
    * 用于 keydown、keyup 时：返回任意键值。

button 只读，数字，鼠标按键值。

    * 用于 click 时：0－左键。
    * 用于 mousedown、mouseup 时：0－左键，1－中间键（滚轮），2－右键。

which 只读，数字，键盘按键值或鼠标按键值。

    * 用于 keypress 时：等同于 charCode + 回退键 + 回车键；
    * 用于 keydown、keyup 时：返回任意键值；
    * 用于 click 时：1－左键，与 button 的值略有区别。
    * 用于 mousedown、mouseup 时：1－左键，2－中间键（滚轮），3－右键，与 button 的值略有区别。

可以看出，which 只有一点没有包括：那就是 keypress 时，不如 keyCode 那么全，但实际上，keypress 事件中用于非字符键的情况较少，所以一般还是用 which 代替全部。

addEventListener－有用的笔记

为什么用 addEventListener

    * 可以对同一物件的同一事件绑定多个事件处理程序。
    * 可以通过事件流三个阶段更好地控制何时触发事件处理程序。
    * 工作于 DOM 元素，而不仅是 HTML 元素。

事件分发时添加 eventListener

不会立即触发 eventListener，可能会在下一个事件流（比如冒泡阶段）中触发。

多个相同的 eventListener

如下，三个参数完全相同，并且第二个参数不是匿名函数。
document.getElementById("myBox").addEventListener("click", Go, false);
document.getElementById("myBox").addEventListener("click", Go, false);
document.getElementById("myBox").addEventListener("click", Go, false);

会抛弃多余的，只保留一个，对应的 removeEventListener 也只用一次就可以了（removeEventListener 用法和 addEventListener 完全相同）。

但如果是第二个参数是匿名函数，比如：
document.getElementById("outDiv").addEventListener("click", function () { document.getElementById("info").innerHTML += "1";}, false);
document.getElementById("outDiv").addEventListener("click", function () { document.getElementById("info").innerHTML += "1";}, false);
document.getElementById("outDiv").addEventListener("click", function () { document.getElementById("info").innerHTML += "1";}, false);

则三个均有效，并且无法用 removeEventListener 除去。

this

事件处理程序中，this 变成了触发事件的控件，但我们仍推荐用 event.target 或 event.currentTarget。

早期的事件监听

在 DOM0 中，我们用 obj.onclick = FuncName，由于兼容性好，应用非常广泛，只是功能不如 addEventListener 强大。

内存问题

前面提到了许多使用域名函数的地方，有时这是没办法的，但这会导致内存问题。

一旦事件绑定之后，该绑定代码作用域的变量就都保留下来，不会被 JavaScript 引擎回收，这可能会引起占用大量内存的问题，由于 removeEventListener 无法删除匿名函数的事件处理程序，只有在物件（比如按钮）去除之后，该内存才可能得到回收。

分类:JavaScript | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 181

详尽解析window.event对象

作者:bonny 日期:2010-06-09 TOP

描述

event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。

event对象只在事件发生的过程中才有效。

event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。

例子

下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下，就取消链接的跳转。

<HTML>

<HEAD><TITLE>Cancels Links</TITLE>

function cancelLink() {

if (window.event.srcElement.tagName == "A" && window.event.shiftKey)

window.event.returnValue = false;

}

</SCRIPT>

下面的例子在状态栏上显示鼠标的当前位置。

属性：

altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y

--------------------------------------------------------------------------------

1.altKey

描述：

检查alt键的状态。

语法：

event.altKey

可能的值：

当 alt键按下时，值为 TRUE ，否则为 FALSE 。只读。

2.button

描述：

检查按下的鼠标键。

语法：

event.button

可能的值：

0 没按键

1 按左键

2 按右键

3 按左右键

4 按中间键

5 按左键和中间键

6 按右键和中间键

7 按所有的键

这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件，不管鼠标状态如何，都返回 0（比如onclick）。

3.cancelBubble

描述：

检测是否接受上层元素的事件的控制。

语法：

event.cancelBubble[ = cancelBubble]

可能的值：

这是一个可读写的布尔值:

TRUE 不被上层原素的事件控制。

FALSE 允许被上层元素的事件控制。这是默认值。

例子：

下面的代码片断演示了当在图片上点击（onclick）时，如果同时shift键也被按下，就取消上层元素（body）上的事件onclick所引发的 showSrc()函数。

function checkCancel() {

if (window.event.shiftKey)

window.event.cancelBubble = true;

}

function showSrc() {

if (window.event.srcElement.tagName == "IMG")

alert(window.event.srcElement.src);

}

</SCRIPT>

4.clientX

描述：

返回鼠标在窗口客户区域中的X坐标。

语法：

event.clientX

注释：

这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。

5.clientY

描述：

返回鼠标在窗口客户区域中的Y坐标。

语法：

event.clientY

注释：

这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。

6.ctrlKey

描述：

检查ctrl键的状态。

语法：

event.ctrlKey

可能的值：

当 ctrl键按下时，值为 TRUE ，否则为 FALSE 。只读。

7.fromElement

描述：

检测 onmouseover 和 onmouseout 事件发生时，鼠标所离开的元素。参考：18.toElement

语法：

event.fromElement

注释：

这是个只读属性。

8.keyCode

描述：

检测键盘事件相对应的内码。

这个属性用于 onkeydown, onkeyup, 和 onkeypress 事件。

语法：

event.keyCode[ = keyCode]

可能的值：

这是个可读写的值，可以是任何一个Unicode键盘内码。如果没有引发键盘事件，则该值为 0 。

9.offsetX

描述：

检查相对于触发事件的对象，鼠标位置的水平坐标

语法：

event.offsetX

10.offsetY

描述：

检查相对于触发事件的对象，鼠标位置的垂直坐标

语法：

event.offsetY

11.propertyName

描述：

设置或返回元素的变化了的属性的名称。

语法：

event.propertyName [ = sProperty ]

可能的值：

sProperty 是一个字符串，指定或返回触发事件的元素在事件中变化了的属性的名称。

这个属性是可读写的。无默认值。

注释：

你可以通过使用 onpropertychange 事件，得到 propertyName 的值。

例子：

下面的例子通过使用 onpropertychange 事件，弹出一个对话框，显示 propertyName 的值。

<HEAD>

function changeProp()

{

btnProp.value = "This is the new VALUE";

}

function changeCSSProp()

{

btnStyleProp.style.backgroundColor = "aqua";

}

</SCRIPT>

</HEAD>

<BODY>

<P>The event object property propertyName is

used here to return which property has been

altered.</P>

<INPUT TYPE=button ID=btnProp onclick="changeProp()"

VALUE="Click to change the VALUE property of this button"

onpropertychange='alert(event.propertyName+" property has changed value")'>

<INPUT TYPE=button ID=btnStyleProp

onclick="changeCSSProp()"

VALUE="Click to change the CSS backgroundColor property of this button"

onpropertychange='alert(event.propertyName+" property has changed value")'>

</BODY>

12.returnValue

描述：

设置或检查从事件中返回的值

语法：

event.returnValue[ = Boolean]

可能的值：

true 事件中的值被返回

false 源对象上事件的默认操作被取消

例子见本文的开头。

13.screenX

描述：

检测鼠标相对于用户屏幕的水平位置

语法：

event.screenX

注释：

这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。

14.screenY

描述：

检测鼠标相对于用户屏幕的垂直位置

语法：

event.screenY

注释：

这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。

15.shiftKey

描述：

检查shift键的状态。

语法：

event.shiftKey

可能的值：

当 shift键按下时，值为 TRUE ，否则为 FALSE 。只读。

16.srcElement

描述：

返回触发事件的元素。只读。例子见本文开头。

语法：

event.srcElement

17.srcFilter

描述：

返回触发 onfilterchange 事件的滤镜。只读。

语法：

event.srcFilter

18.toElement

描述：

检测 onmouseover 和 onmouseout 事件发生时，鼠标所进入的元素。参考：7.fromElement

语法：

event.toElement

注释：

这是个只读属性。

例子：下面的代码演示了当鼠标移到按钮上时，弹出一个对话框，显示“mouse arrived”

function testMouse(oObject) {

if(oObject.contains(event.toElement)) {

alert("mouse arrived");

}

</SCRIPT>

<BUTTON ID=oButton onmouseover="testMouse(this)">Mouse Over This.</BUTTON>

19.type

描述：

返回事件名。

语法：

event.type

注释：

返回没有“on”作为前缀的事件名，比如，onclick事件返回的type是click

只读。

20. x

描述：

返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。如果没有css属性中有position属性的上级元素，默认以BODY元素作为参考对象。

语法：

event.x

注释：

如果事件触发后，鼠标移出窗口外，则返回的值为 -1

这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。

21. y

描述：

返回鼠标相对于 css属性中有position属性的上级元素的y轴坐标。如果没有css属性中有position属性的上级元素，默认以BODY元素作为参考对象。

语法：

event.y

注释：

如果事件触发后，鼠标移出窗口外，则返回的值为 -1

这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。

分类:JavaScript | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 147

事件处理例子

作者:bonny 日期:2010-06-09 TOP

-------------------添加删除事件---------------------------------------

<html>

<head>

<title></title>
<script language="javascript" type="text/javascript">
function handleout(evt)
{
    $("msg").innerHTML+="<br />handle div out";
    //this.removeEventListener("click",handleout,false)
   //evt.currentTarget.detachEvent("onclick",handleout)
}
function handlemid(evt)
{
    $("msg").innerHTML+="<br />handle div mid";
//    evt.currentTarget.removeEventListener("click",handlemid,false)
//this.detachEvent("onclick",handlemid)
}
function handlein(evt)
{
    $("msg").innerHTML+="<br />handle div in";
//evt.currentTarget.removeEventListener("click",handlein,false)
//this.detachEvent("onclick",handlein)
}
function init()
{
if(window.attachEvent){
$("in").attachEvent("onclick",handlein)
$("out").attachEvent("onclick",handleout)
$("mid").attachEvent("onclick",handlemid)
}
else{

分类:JavaScript | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 136

在各浏览器中动态添加事件－方法篇

作者:bonny 日期:2010-06-09 TOP

在 HTML 中可以直接写事件代码，比如：<input type="button" value="验证" onclick="javascript:Verify();" />，这在各浏览器中的解释均相同，无可争议。

但往往我们又需要在 JS 中动态添加事件，这就涉及到浏览器兼容性问题了，以下谈及的几种方法，我们也常常混合使用。

方法一、 setAttribute

var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('测试');");

这里利用 setAttribute 指定 onclick 属性，简单，很好理解，但是：IE 不支持，IE 并不是不支持 setAttribute 这个函数，而是不支持用 setAttribute 设置某些属性，包括对象属性、集合属性、事件属性，也就是说用 setAttribute 设置 style、class、onclick、onmouseover 这些属性在 IE 中是行不通的。

分类:JavaScript | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 188

事件处理---addEventListener

作者:bonny 日期:2010-06-09 TOP

addEventListener 用于注册事件处理程序，IE 中为 attachEvent，我们为什么讲 addEventListener 而不讲 attachEvent 呢？一来 attachEvent 比较简单，二来 addEventListener 才是 DOM 中的标准内容。

简介

addEventListener 为文档节点、document、window 或 XMLHttpRequest 注册事件处理程序，在以前我们一般是 <input type="button" onclick="..."，或 document.getElementById("testButton").onclick = FuncName，而在 DOM 中，我们用 addEventListener（IE 中用 attachEvent）。

语法

target.addEventListener(type, listener, useCapture);

target 文档节点、document、window 或 XMLHttpRequest。
type 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener 实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture 是否使用捕捉，看了后面的事件流一节后就明白了，一般用 false。

分类:JavaScript | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 286

CSS3开发工具

作者:bonny 日期:2010-04-17 TOP

通常来说，CSS非常简单。但是当浏览器厂商开始实现CSS3特性，问题开始变得有些复杂了。不难，只是有些复杂。这可能包括两个方面：首先有些心得CSS3属性(比如，transition、渐变、transform等)不是那么简单，其次我们不得不使用浏览器厂商指定扩展。

CSS3开发工具收集

直到你最喜欢用的IDE原生支持CSS3，你最好的伙伴将是CSS3生成器、手册、参考指南以及基于JS的方案。这正是本文要推荐的，这里将收集能够助你学习和使用CSS3的真正有用的工具。

生成器

CSS3 Please!跨浏览器的CSS 规则生成器，支持：border-radius、box-shadow、渐变(线性)、rgba色彩、transform (旋转)、transition和@font-face。
CSS3 生成器支持border radius、box shadow、text shadow、RGBA、@font-face、多列、box resize、box sizing 和outline.
CSS3 Sandbox有一些列的CSS3生成器：线性渐变、放射渐变、文字阴影、盒阴影、Transforms和文字描边。
@font- face生成器来自于Font Squirrel的很好用的CSS3 @font-face 生成器。
CSS3渐变生成器为Firefox和Webkit浏览器生成线性渐变。
CSS 圆角生成用于Firefox、 Webkit和标准CSS3语法的“border-radius”属性。
Webkit CSS3 生成器简单的助你理解Webkit引入的CSS3特性。
CSS3 学习工具动态为你的浏览器获取私有前缀并检测该属性是否被它支持。

JavaScript方案

Modernizr一个确实很有用的 JavaScript库，可以检测HTML5/CSS3的原生支持，并为你提供一种维护良好控制级别的方法，不管浏览器的能力。如果你更喜欢使用 MooTools，你可以使用MooModernizr (MooTools 版本的Modernizr)
Sizzle – JavaScript 选择器库一个纯Javascript选择器引擎，被设计用来方便的插入到一个主库中。Sizzle 实际上支持所有的CSS3 选择器——它甚至包括一些很不常用的选择器，比如忽略选择器(escaped selectors )(”.foo\\+bar”)、Unicode 选择器、以及在document序列中返回的结果。这也是jQuery使用的选择器引擎。
YUI 选择器组件YUI CSS3 选择器组件，提供一个收集、过滤和测试HTML元素的稳定的简写方法。
ie7-js一个让IE拥有兼容标准的浏览器一样的行为的JavaScript库。
CSS3伪类选择器模拟ie-css3.js 可使Internet Explorer识别CSS3 伪类选择器并渲染任何使用它们定义的样式规则。简单滴在你的页面中引入这个脚本，然后在你的样式表中使用这些伪类选择器，然后IE就可以使用了。

参考指南

CSS 3.0参考手册
腾讯ISD WebTeam制作的一个CHM格式的参考手册，很全面，介绍+实例，推荐下载收藏；
我什么时候能用CSS3CSS3、HTML5、SVG以及其它即将可用的页面技术的浏览器兼容性列表；
浏览器支持清单使用 Modernizr库检测你的浏览器支持的“高级”特性，包括CSS3特性和选择器的支持。
CSS3 选择器测试自动运行大量的判断你的浏览器是否支持一些CSS选择器的小测试；
SelectORacle一个提供CSS2和CSS3选择器介绍的在线工具。简单的给它一些选择器，他就会返回选择器匹配的相关说明。
CSS3手册与快速指南提供当前CSS3规范的列表，列出属性可用的值、常用的选择器模式参考，以type/ 单位组织，选择器类型参考和单位参考和信息(另有PDF 版本)；
CSS3伪类SitePoint的CSS参考的相关部分内容；
CSS3 速查手册CSS3属性、选择器类型以及可用的值的列表，PDF格式；