]]>
onerror事g处理函数是第一个用来协助javascript处理错误的机制。页面上出现异常Ӟerror事g便在window对象上触发?br>例如Q?br>
<head>
<title>OnError Example</title>
<script type="text/javascript">
window.onerror = function () {
alert("An error occurred.");
}
</script>
</head>
<body onload="nonExistentFunction()">
</body>
</html>
<head>
<title>OnError Example</title>
<script type="text/javascript">
window.onerror = function () {
alert("An error occurred.");
return true;
}
</script>
</head>
<body onload="nonExistentFunction()">
</body>
</html>
2.取出错误信息
onerror事g处理函数提供了三U信息来定错误切的性质Q?br>错误信息Q－对于l定错误Q浏览器会显C同L信息?br>URLQ－在哪个文件中发生了错误?br>行号Q－l定的URL中发生错误的行号?br>
<head>
<title>OnError Example</title>
<script type="text/javascript">
window.onerror = function (sMessage, sUrl, sLine) {
alert("An error occurred:\n" + sMessage + "\nURL: " + sUrl + "\nLine Number: " + sLine);
return true;
}
</script>
</head>
<body onload="nonExistentFunction()">
</body>
</html>
3.囑փ载入错误
囑փ对象也支持onerror事g处理函数。当一个图像由于某U原因未能成功蝲入时Q例如，文g不存在）Qerror事g便在q个囑փ上触发?br>
<head>
<title>Image Error Test</title>
</head>
<body>
<p>The image below attempts to load a file that doesn't exist.</p>
<img src="blue.gif" onerror="alert('An error occurred loading the image.')" />
</body>
</html>
与window对象的onerror事g处理函数不同Qimage的onerror事g处理函数没有d关于额外信息的参数?br>
4.处理语法错误
onerror事g处理函数不仅可以处理异常Q它q能处理语法错误Q也只有它才能处理?br>
<head>
<title>OnError Example</title>
<script type="text/javascript">
window.onerror = function (sMessage, sUrl, sLine) {
alert("An error occurred:\n" + sMessage + "\nURL: " + sUrl + "\nLine Number: " + sLine);
return true;
}
alert("Syntax error.";
</script>
</head>
<body onload="nonExistentFunction()">
<p>The syntax error on this page comes <em>after</em> the <code>onerror</code>
event handler is defined, so the custom dialog catches it.</p>
<p><strong>Note:</strong> This may not work in newer browsers with tighter security restrictions.</p>
</body>
</html>
注：使用onerror事g处理函数的主要问题是Q它是BOM的一部分Q所以，没有M标准能控制它的行为。因此，不同的浏览器使用q个事g处理函数处理错误的方式有明显的不同。例如，在IE中发生error事gӞ正常的代码会l箋执行Q所有的变量和数据都保存下来Qƈ可能qonerror事g处理函数讉K。然而在Mozilla中，正常的代码执行都会结束，同时所有错误发生之前的变量和数据都被销毁。Safari和Konqueror不支持window对象上的onerror事g处理函数Q但是它们支持图像上的onerror事g处理函数?br>
5.try...catch语句
<head>
<title>Try Catch Example</title>
<script type="text/javascript">
try {
window.nonExistentFunction();
alert("Method completed.");
} catch (exception) {
alert("An exception occurred.");
} finally {
alert("End of try...catch test.");
}
</script>
</head>
<body>
</body>
</html>
与java不同QECMAScript标准在try...catch语句中指定只能有一个catch子句。因为javascript是弱cdQ没办法指明catch子句中的异常的特定类型。不错误是什么类型，都由同一个catch子句处理。Mozilla对其q行了扩展，可ؓtry...catch语句d多个catch子句。当然只有Mozilla才能使用q个形式Q所以不推荐使用?br>
(1)嵌套try...catch语句
<head>
<title>Try Catch Example</title>
<script type="text/javascript">
try {
eval("a ++ b"); //causes error
} catch (oException) {
alert("An exception occurred.");
try {
var arrErrors = new Array(10000000000000000000000); //causes error
arrErrors.push(exception);
} catch (oException2) {
alert("Another exception occurred.");
}
} finally {
alert("All done.");
}
</script>
</head>
<body>
</body>
</html>
cM于java有个用于抛出的基cExceptionQjavascript有个Error基类用于抛出。Error对象有以下特性：
nameQ－表示错误cd的字W串?br>messageQ－实际的错误信息?br>Error对象的名U对象对应于它的c?因ؓError只是一个基c?Q可以是以下g一Q?br>
| c?/td> | 发生原因 |
| EvalError | 错误发生在eval()函数?/td> |
| RangeError | 数字的D出javascript可表C的范围 |
| ReferenceError | 使用了非法的引用 |
| SyntaxError | 在eval()函数调用中发生了语法错误。其他的语法错误由浏览器报告Q无法通过try...catch语句处理 |
| TypeError | 变量的类型不是预期所需?/td> |
| URIError | 在encodeURI()或者decodeURI()函数中发生了错误 |
Mozilla和IE都扩展了Erro对象以适应各自的需求。Mozilla提供一个fileNameҎ来表示错误发生在哪一个文件中Q以及一个stackҎ以包含到错误发生时的调用堆?IE提供了一个numberҎ来表示错误代号?br>(3)判断错误cd
<head>
<title>Try Catch Example</title>
<script type="text/javascript">
try {
eval("a ++ b"); //causes SyntaxError
} catch (oException) {
if (oException.name == "SyntaxError") { //或者if(oException instanceof SyntaxError)
alert("Syntax Error: " + oException.message);
} else {
alert("An unexpected error occurred: " + oException.message);
}
}
</script>
</head>
<body>
</body>
</html>
(4)抛出异常
ECMAScriptW三版还引入了throw语句Q用于有目的的抛出异常。语法如下：
throw error_object; //error_object可以是字W串、数字、布值或者是实际的对象?br>
<head>
<title>Try Catch Example</title>
<script type="text/javascript">
function addTwoNumbers(a, b) {
if (arguments.length < 2) {
throw new Error("Two numbers are required.");
} else {
return a + b;
}
}
try {
result = addTwoNumbers(90);
} catch (oException) {
alert(oException.message); //outputs "Two numbers are required."
}
</script>
</head>
<body>
</body>
</html>
另个Q因为浏览器不生成Error对象Q它L生成一个较_的Error对象Q比如RangeErrorQ，所以区分浏览器抛出的错误和开发h员抛出的错误很简单，使用前面的技术就行了Q?br>try{
result = addTwoNumber(90,parseInt(z));
}catch(oException){
if(oException instanceof SyntaxError){
alert("Syntax Error: "+oException.message);
}else if(oException instanceof Error){
alert(oException.message);
}
}
注意查instanceof Error必须是if语句中的最后一个条Ӟ因ؓ所有其他的错误c都l承于它Q所以在instanceof Error旉q回trueQ?br>
所有的览器都可以报告开发h员抛出的错误Q但是错误消息的昄方式可能有所不同。IE6只会在抛出Error对象Ӟ才显C错误信?其他情况下，它就只显CException thrown and not caughtQ而没有Q何详l内宏VMozilla则会报告Error:uncaught exception:然后调用所抛出的对象的toString()Ҏ?
]]>
DocumentQ－最层的节点，所有的其他节点都是附属于它的?br>DocumentTypeQ－DTD引用Q?lt;!DOCTYPE>语法Q的对象表现形式Q它不能包含子节炏V?br>DocumentFragmentQ－可以像Document一h保存其他节点?br>ElementQ－表示起始标签和结束标{之间的内容Q例?lt;tag></tab>或?lt;tag/>。这是唯一可以同时包含Ҏ和子节点的节点cd?br>AttrQ－代表一对特性名和特性倹{这个节点类型不能包含子节点?br>TextQ－代表XML文中的在v始标{֒l束标签之间Q或者CDataSection内包含的普通文本。这个节点类型不能包含子节点?br>CDataSectionQ－<![CDATA[]]>的对象表现Ş式。这个节点类型仅能包含文本节点Text作ؓ子节炏V?br>EntityQ－表示在DTD中的一个实体定义，例如<!ENTITY foo"foo">。这个节点类型不能包含子节点?br>EntityReferenceQ－代表一个实体引用，例如"。这个节点类型不能包含子节点?br>ProcessingInstructionQ－代表一个PI。这个节点类型不能包含子节点?br>CommentQ－代表XML注释。这个节点不能包含子节点?br>NotationQ－代表在DTD中定义的记号。这个很用到?br>
Node接口定义了所有节点类型都包含的特性和Ҏ?br>
| Ҏ?Ҏ | cd/q回cd | 说明 |
| nodeName | String | 节点的名?Ҏ节点的类型而定?/td> |
| nodeValue | String | 节点的?Ҏ节点的类型而定?/td> |
| nodeType | Number | 节点的类型常量g一 |
| ownerDocument | Document | 指向q个节点所属的文 |
| firstChild | Node | 指向在childNodes列表中的W一个节?/td> |
| lastChild | Node | 指向在childNodes列表中的最后一个节?/td> |
| childNodes | NodeList | 所有子节点的列?/td> |
| previousSibling | Node | 指向前一个兄弟节?如果q个节点是W一个兄弟节点，那么该gؓnull |
| nextSibling | Node | 指向后一个兄弟节?如果q个节点是最后一个兄弟节点，那么该gؓnull |
| hasChildNodes() | Boolean | 当childNodes包含一个或多个节点?q回?/td> |
| attributes | NamedNodeMap | 包含了代表一个元素的Ҏ的Attr对象;仅用于Element节点 |
| appendChild(node) | Node | noded到childNodes的末?/td> |
| removeChild(node) | Node | 从childNodes中删除node |
| replaceChild(newnode,oldnode) | Node | childNodes中的oldnode替换成newnode |
| insertBefore(newnode,refnode) | Node | 在childNodes中的refnode之前插入newnodd |
除节点外QDOMq定义了一些助手对象，它们可以和节点一起用，但不是DOM文必有的部分?br>NodeListQ－节点数组Q按照数D行烦?用来表示和一个元素的子节炏V?br>NamedNodeMapQ－同时使用数值和名字q行索引的节点表;用于表示元素Ҏ?br>
2.讉K相关的节?br>下面的几节中考虑下面的HTML面
<head>
<title>DOM Example</title>
</head>
<body>
<p>Hello World!</p>
<p>Isn't this exciting?</p>
<p>You're learning to use the DOM!</p>
</body>
</html>
var oHtml = document.documentElement;
现在变量oHtml包含一个表C?lt;html/>的HTMLElement对象。如果你惛_?lt;head/>?lt;body/>元素Q下面的可以实现Q?br>var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
也可以用childNodesҎ来完成同样的工作。只需把它当成普通的javascript arrayQ用方括号标记Q?br>var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];
注意Ҏh记其实是NodeList在javascript中的便实现。实际上正式的从childNodes列表中获取子节点的方法是使用item()ҎQ?br>var oHead = oHtml.childNodes.item(0);
var oBody = oHtml.childNodes.item(1);
HTML DOM定义了document.body作ؓ指向<body/>元素的指针?br>var oBody = ducument.body;
有了oHtml,oHead和oBodyq三个变量，可以尝试确定它们之间的关系Q?br>alert(oHead.parentNode==oHtml);
alert(oBody.parentNode==oHtml);
alert(oBody.previousSibling==oHead);
alert(bHead.nextSibling==oBody);
alert(oHead.ownerDocument==document);
以上均outputs "true"?br>
3.处理Ҏ?br>正如前面所提到的，即便Node接口已具有attributesҎQ且已被所有类型的节点l承Q然而，只有
Element节点才能有特性。Element节点的attributes属性其实是NameNodeMap,它提供一些用于访问和处理其内容的ҎQ?br>getNamedItem(name)Q－q回nodename属性值等于name的节?
removeNamedItem(name)Q－删除nodename属性值等于name的节?
setNamedItem(node)Q－noded到列表中Q按其nodeName属性进行烦?
item(pos)Q－像NodeList一Pq回在位|pos的节?
注：误住这些方法都是返回一个Attr节点Q而非Ҏ倹{?br>
NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量?br>当NamedNodeMap用于表示Ҏ时Q其中每个节炚w是Attr节点Q这的nodeName属性被讄为特性名Uͼ而nodeValue属性被讄为特性的倹{例如，假设有这样一个元素：
<p style="color:red" id="p1">Hello world!</p>
同时Q假讑֏量oP包含指向q个元素的一个引用。于是可以这栯问idҎ的?
var sId = oP.attributes.getNamedItem("id").nodeValue;
当然Q还可以用数值方式访问idҎ，但这L微有些不直观Q?br>var sId = oP.attributes.item(1).nodeValue;
q可以通过lnodeValue属性赋新值来改变idҎ：
oP.attributes.getNamedItem("id").nodeValue="newId";
Attr节点也有一个完全等同于(同时也完全同步于)nodeValue属性的value属性，q且有name属性和nodeName属性保持同步。我们可以随意用这些属性来修改或变更特性?br>因ؓq个Ҏ有些累赘QDOM又定义了三个元素Ҏ来帮助访问特性：
getAttribute(name)Q－{于attributes.getNamedItem(name).value;
setAttribute(name,newvalue)Q－{于attribute.getNamedItem(name).value=newvalue;
removeAttribute(name)Q－{于attribute.removeNamedItem(name)?br>
4.讉K指定节点
(1)getElementsByTagName()
核心(XML) DOM定义了getElementsByTagName()ҎQ用来返回一个包含所有的tagName(标签?Ҏ等于某个指定值的元素的NodeList。在Element对象中，tagNameҎL{于于号之后紧跟随的名UͼQ例如，<img />的tagName?img"。下一行代码返回文档中所?lt;img />元素的列表：
var oImgs = document.getElementsByTagName("img");
把所有图形都存于oImgs后，只需使用Ҏh者Item()ҎQgetElementsByTagName()q回一个和childNodes一LNodeListQ，可以像讉K子节炚w样逐个讉Kq些节点了：
alert(oImgs[0].tagName); //outputs "IMG"
假如只想获取在某个页面第一个段落的所有图像，可以通过对第一个段落元素调用getElementsByTagName()来完成，像这P
var oPs = document.getElementByTagName("p");
var oImgsInp = oPs[0].getElementByTagName("img");
可以使用一个星LҎ来获取document中的所有元素：
var oAllElements = document.getElementsByTagName("*");
当参数是一个星L时候，IE6.0q不q回所有的元素。必M用document.all来替代它?br>(2)getElementsByName()
HTML DOM 定义了getElementsByName()Q这用来获取所有nameҎ等于指定值的元素的?br>(3)getElementById()
q是HTML DOM定义的第二种ҎQ它返回idҎ等于指定值的元素。在HTML中，idҎ是唯一的－Q这意味着没有两个元素可以׃n同一个id。毫无疑问这是从文树中获取单个指定元素最快的Ҏ?br>注：如果l定的ID匚w某个元素的nameҎ，IE6.0q会q回q个元素。这是一个bugQ也是必非常小心的一个问题?br>
5.创徏新节?br>最常用到的几个Ҏ?br>createDocumentFragment()Q－创徏文片节点
createElement(tagname)Q－创徏标签名ؓtagname的元?br>createTextNode(text)Q－创徏包含文本text的文本节?br>
createElement()、createTextNode()、appendChild()
<head>
<title>createElement() Example</title>
<script type="text/javascript">
function createMessage() {
var oP = document.createElement("p");
var oText = document.createTextNode("Hello World!");
oP.appendChild(oText);
document.body.appendChild(oP);
}
</script>
</head>
<body onload="createMessage()">
</body>
</html>
removeChild()、replaceChild()、insertBefore()
删除节点
<head>
<title>removeChild() Example</title>
<script type="text/javascript">
function removeMessage() {
var oP = document.body.getElementsByTagName("p")[0];
oP.parentNode.removeChild(oP);
}
</script>
</head>
<body onload="removeMessage()">
<p>Hello World!</p>
</body>
</html>
<head>
<title>replaceChild() Example</title>
<script type="text/javascript">
function replaceMessage() {
var oNewP = document.createElement("p");
var oText = document.createTextNode("Hello Universe!");
oNewP.appendChild(oText);
var oOldP = document.body.getElementsByTagName("p")[0];
oOldP.parentNode.replaceChild(oNewP, oOldP);
}
</script>
</head>
<body onload="replaceMessage()">
<p>Hello World!</p>
</body>
</html>
<head>
<title>insertBefore() Example</title>
<script type="text/javascript">
function insertMessage() {
var oNewP = document.createElement("p");
var oText = document.createTextNode("Hello Universe!");
oNewP.appendChild(oText);
var oOldP = document.getElementsByTagName("p")[0];
document.body.insertBefore(oNewP, oOldP);
}
</script>
</head>
<body onload="insertMessage()">
<p>Hello World!</p>
</body>
</html>
createDocumentFragment()
一旦把节点d到document.bodyQ或者它的后代节点）中，面׃更新q反映出q个变化。对于少量的更新Q这是很好的Q然而，当要向documentd大量数据Ӟ如果逐个dq些变动Q这个过E有可能会十分缓慢。ؓ解决q个问题Q可以创Z个文碎片，把所有的新节炚w加其上，然后把文档碎片的内容一ơ性添加到document中，假如惛_建十个新D落?br>
<head>
<title>insertBefore() Example</title>
<script type="text/javascript">
function addMessages() {
var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];
var oFragment = document.createDocumentFragment();
for (var i=0; i < arrText.length; i++) {
var oP = document.createElement("p");
var oText = document.createTextNode(arrText[i]);
oP.appendChild(oText);
oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);
}
</script>
</head>
<body onload="addMessages()">
</body>
</html>
6.让特性像属性一?br>大部分情况下QHTML DOM元素中包含的所有特性都是可作ؓ属性?br>假设有如下图像元素：
<img src = "mypicture.jpg" border=0 />
如果要用核心的DOM来获取和讄src和borderҎ，那么要用getAttribute()和setAttribute()ҎQ?br>alert(oImg.getAttribute("src"));
alert(oImg.getAttribute("border"));
oImg.setAttribute("src","mypicture2.jpg");
oImg.setAttribute("border",1);
然而，使用HTML DOMQ可以用同样名U的属性来获取和设|这些|
alert(oImg.src);
alert(oImg.border);
oImg.src="mypicture2.jpg";
oImg.border ="1";
唯一的特性名和属性名不一L特例是class属性，它是用来指定应用于某个元素的一个CSSc，因ؓclass在ECMAScript中是一个保留字Q在javascript中，它不能被作ؓ变量名、属性名或都函数名。于是，相应的属性名变成了className;
注：IE在setAttribute()上有很大的问题，最好尽可能使用属性?br>
7.tableҎ
Z协助建立表格QHTML DOMl?lt;table/>,<tbody/>?lt;tr/>{元素添加了一些特性和Ҏ?br>l?lt;table/>元素d了以下内容：
| Ҏ?Ҏ | 说明 |
| caption | 指向<caption/>元素q将其放入表?/td> |
| tBodies | <tbody/>元素的集?/td> |
| tFoot | 指向<tfoot/>元素Q如果存在） |
| tHead | 指向<thead/>元素Q如果存在） |
| rows | 表格中所有行的集?/td> |
| createTHead() | 创徏<thead/>元素q将其放入表?/td> |
| createTFood() | 创徏<tfoot/>元素q将其放入表?/td> |
| createCpation() | 创徏<caption/>元素q将其放入表?/td> |
| deleteTHead() | 删除<thead/>元素 |
| deleteTFood() | 删除<tfoot/>元素 |
| deleteCaption() | 删除<caption/>元素 |
| deleteRow(position) | 删除指定位置上的?/td> |
| insertRow(position) | 在rows集合中的指定位置上插入一个新?/td> |
<tbody/>元素d了以下内?br>
| Ҏ?Ҏ | 说明 |
| rows | <tbody/>中所有行的集?/td> |
| deleteRow(position) | 删除指定位置上的?/td> |
| insertRow(position) | 在rows集合中的指定位置上插入一个新?/td> |
<tr/>元素d了以下内?br>
| Ҏ?Ҏ | 说明 |
| cells | <tr/>元素中所有的单元格的集合 |
| deleteCell(postion) | 删除l定位置上的单元?/td> |
| insertCell(postion) | 在cells集合的给点位|上插入一个新的单元格 |
8.遍历DOM
NodeIteratorQTreeWalker
DOM Level2的功能，q些功能只有在Mozilla和Konqueror/Safari中才有，q里׃介绍了?br>
]]>
if(document.forms[0].username==""){
alert("误入用户名");
document.forms[0].username.focus();
return false;
}
return true;
}
关于q种验证的实用性暂且不谈，现在一般的验证早已不用q个了?br>只是Z在工作中偷偷懒，写了个方便点的CheckUtilQ如?br>
其实也可以方便的Ҏ需要更ҎC的方式?
]]>
源代码下?/a>
]]>
EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
};
EventUtil.formatEvent = function (oEvent) {
if (isIE && isWin) {
oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
oEvent.eventPhase = 2;
oEvent.isChar = (oEvent.charCode > 0);
oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
oEvent.pageY = oEvent.clientY + document.body.scrollTop;
oEvent.preventDefault = function () {
this.returnValue = false;
};
if (oEvent.type == "mouseout") {
oEvent.relatedTarget = oEvent.toElement;
} else if (oEvent.type == "mouseover") {
oEvent.relatedTarget = oEvent.fromElement;
}
oEvent.stopPropagation = function () {
this.cancelBubble = true;
};
oEvent.target = oEvent.srcElement;
oEvent.time = (new Date).getTime();
}
return oEvent;
};
EventUtil.getEvent = function() {
if (window.event) {
return this.formatEvent(window.event);
} else {
return EventUtil.getEvent.caller.arguments[0];
}
};
]]>
( [ { \ ^ $ | ) ? * + .
M时候要在正则表辑ּ中用这些元字符Q都必须对它们进行{义。因此要匚w一个问P正则表达式就该这栯C：
var veQMark =/\?/;
或者这栯C：
var veQMark=new RegExp("\\?");
注意当正则表辑ּ以第二种形式表示Ӟ所有的反斜杠都必须用两个反斜杠来替换，因ؓjavascript字符串解析器会按照\n的方式尝试翻译\?。ؓ了保证不会出现这个问题，在元字符的前面加上两个反斜杠Q双重{义）。这个小的gotcha是多数开发者更偏好使用字面量语法的原因?br>
2.使用Ҏ字符
要用ASCII来表CZ个字W，则必L定一个两位的十六q制代码Qƈ有前面加上\x。例如字Wb的ASCII码ؓ98Q等于十六进制的62Q因此，表示字符b可以使用\x62
另外也可以用八q制代替十六q制来指定字W代码，直接在反斜杠之后跟上八进制数|例如Qb{于八进制的142Q所以下面就该这?br>/\142/
如果要用Unicode来表C字W，必须指定字符串的四位十六q制表示形式Q因此b应该是\u0062
另外q有其他一些预定义的特D字W，如下表所?br>
| 字符 | 描述 |
| \t | 制表W?/td> |
| \n | 换行W?/td> |
| \r | 回RW?/td> |
| \f | 换页W?/td> |
| \a | alert字符 |
| \e | escape字符 |
| \cx | 与X相对应的控制字符 |
| \b | 回退字符 |
| \v | 垂直制表W?/td> |
| \0 | I字W?/td> |
3.字符c?br>3.1单类
假设相匹?bat","cat","fat"。用简单类可以很方便的解决q个问题
/[bcf]at/gi
后面的g表示全匹配，i表示不区分大写?br>3.2负向c?br>要匹配除了a和b的所有字W，那么q个字符是[^ab]
3.3范围c?br>[a-z]
[A-Z]
[0-9]
[^1-4]
3.4l合c?br>匚w所有从a~m的字母以及从1~4的数字，以及一个换行符
[a-m1-4\n]
3.5预定义类
| 代码 | {同?/td> | 匚w |
| . | [^\n\r] | 除了换行和回车之外的L字符 |
| \d | [0-9] | 数字 |
| \D | [^0-9] | 非数字字W?/td> |
| \s | [\t\n\x0B\f\r] | I白字符 |
| \S | [^\t\n\x0B\f\r] | 非空白字W?/td> |
| \w | [a-zA-Z_0-9] | 单词字符Q所有字母，所有的数字和下划线Q?/td> |
| \W | [^a-zA-Z_0-9] | 非单词字W?/td> |
4.量词
4.1单量?br>
| 代码 | 描述 |
| ? | 出现零次或一?/td> |
| * | 出现零次或多?/td> |
| + | 出现一ơ或多次Q至出Cơ） |
| {n} | 一定出现n?/td> |
| {n,m} | 臛_出现nơ但不超qm?/td> |
| {n,} | 臛_出现n?/td> |
贪婪量词Q先看整个的字符串是不是一个匹配，如果没有发现匚wQ它L字符串中的最后一个字W，q再ơ尝试。直到发C个匹配字W或者字W串不剩M字符?br>惰性量词：先看字符串中的第一个字U是不是一个匹配。如果单独这个字W还不够Q就d下一个字W，l成两个字符的字W串Q如果还是没有发现匹配，l箋d字会直到发现一个或者整个字W都查过也没有匹配。其工作方式恰好与贪婪相反?br>支配量词Q只试匚w整个字符丌Ӏ如果整个字W串不能产生匚wQ不做进一步尝试?br>表示Ҏ如下?br>
| 贪婪 | 惰?/td> | 支配 | 描述 |
| ? | ?? | ?+ | 零次或一ơ出?/td> |
| * | *? | *+ | 零次或多ơ出?/td> |
| + | +? | ++ | 一ơ或多次出现 |
| {n} | {n}? | {n}+ | 恰好nơ出?/td> |
| {n,m} | {n,m}? | {n,m}+ | 臛_nơ至多mơ出?/td> |
| {n,} | {n,}? | {n,}+ | 臛_nơ出?/td> |
览器对支配量词的支持还很不完善。IE和Opera不支持，Mozilla支配量词看作是贪婪的?br>
二、复杂模?br>1.分组
分组是通过一pd括号包围一pd字符、字W类以及量词来用的?br>/dogdog/可用分l来重写?(dog){2}/
/([bd]ad?)*/匚w零个和多?ba","da","bad"?dad"
/(mom( and dad)?)/匚w"mom" 或 "mom and dad"
2.反向引用
在表辑ּ计算完成后还可以怎样利用分组Q每个分l都被存攑֜一个特D的地方以备来使用。这些存储在分组中的Ҏ|我们UC为反向引用?br>反向引用是按照从左到右遇到的左括号字W的序q行创徏和编L。例如表辑ּ(A?(B?(C?)))生编号从1-3的三个反向引?br>(1).(A?(B?(C?)))
(2).(B?(C?))
(3).(C?)
反向引用可以有几U不同的使用Ҏ?br>首先Q用正则表辑ּ对象的test(),match()或search()Ҏ后，反向引用的值可以从RegExp构造函C获得。例
var sToMatch = "#123456789";
var reNumbers = /#(\d+)/;
reNumbers.test(sToMatch);
alert(RegExp.$1); //outputs "123456789"
然后Q还可以直接在定义分l的表达式中包含反向引用Q这可以通过使用Ҏ转义序列如\1,\2{等实现
例如
var sToMatch = "dogdog";
var reDogDog = /(dog)\1/;
alert(reDogDog.test(sToMatch)); //outputs "true"
正则表达式reDogDog首先创徏单词dog的组Q然后又被特D{义序列\1引用Q得这个正则表辑ּ{同?dogdog/
W三Q反向引用可以用在String对象的replace()Ҏ中，q通过使用Ҏ字符序列$1,$2{等来实现。例?br>var sToChange = "1234 5678";
var reMatch = /(\d{4}) (\d{4})/
var sNew = sToChange.replace(reMatch,"$2 $1");
alert(sNew); //outputs "5678 1234"
3.候?br>有时候要构徏一个能够正匹配想得到所有可能性的模式是十分困隄。如果要对同一个表辑ּ同时匚w"red"?break"时要怎么做呢Q这些单词完全没有相同的字符Q这样就要写两个不同的正则表辑ּQƈ分别对两个字W串q行匚wQ像q样Q?br>var sToMatch1 = "red";
var sToMatch2 = "black";
var reRed = /red/;
var reBlack = /black/;
alert(reRed.test(sToMatch1)||reBlack.test(sToMatch1)); //outputs "true"
alert(reRed.test(sToMatch2)||reBlack.test(sToMatch2)); //outputs "true"
q完成了dQ但是十分冗ѝ还有另一U方式就是用正则表辑ּ的候选操作符。例Q?br>var sToMatch1 = "red";
var sToMatch2 = "black";
var reRedOrBlack = /(red|black)/;
alert(reRedOrBlack.test(sToMatch1)); //outputs "true"
alert(reRedOrBlack.test(sToMatch2)); //outputs "true"
4.非捕h分l?br>创徏反向引用的分l，我们UC为捕h分l。同时还有一U非捕获性分l，它不会创建反向引用。在较长的正则表辑ּ中，存储反向引用会降低匹配速度?br>如果要创Z个非捕获性分l，只要在左括号的后面加上一个问号和一个紧跟的冒号Q?br>var sToMatch = "#123456789";
var reNumbers = /#(?:\d+)/;
reNumbers.test(sToMatch);
alert(RegExp.$1); //outputs ""
5.前瞻
有时候，可能希望Q当某个特定的字W分l出现在另一个字W串之前Ӟ才去捕获它。如果?#8220;前瞻”可以让q个q程变得十分单?br>前瞻Q告诉正则表辑ּq算器向前看一些字W而不Ud其位|。同样存在正向前d负向前瞻。正向前L查的是接下来出现的是不是某个特定字符集。而负向前d是检查接下来的不应该出现的特定字W集?br>创徏正向前瞻要将模式攑֜(?=?之间。注意这不是分组Q虽然它也用到括受?br>var sToMatch1 = "bedroom";
var sToMatch2 = "bedding";
var reBed = /(bed(?=room)/;
alert(reBed.test(sToMatch1)); //outputs "true"
alert(RegExp.$1); //outputs "bed"
alert(reBed.test(sToMatch2)); //outputs "false"
负向前瞻Q则要将模式攑֜(?!?之间?br>var sToMatch1 = "bedroom";
var sToMatch2 = "bedding";
var reBed = /(bed(?!room)/;
alert(reBed.test(sToMatch1)); //outputs "false"
alert(reBed.test(sToMatch2)); //outputs "true"
alert(RegExp.$1); //outputs "bed"
6.边界
边界 用于正则表达式中表示模式的位|。下表列Z几种可能的边?br>
| 边界 | 描述 |
| ^ | 行开?/td> |
| $ | 行结?/td> |
| \b | 单词的边?/td> |
| \B | 非单词的边界 |
假设x找一个单词，但要它只出现在行，则可以用美元符?来表C它Q?br>var sToMatch = "Important word is the last one.";
var reLastWord = /(\w+).$/;
reLastWord.test(sToMatch);
alert(RegExp.$1); //outputs "one"
7.多行模式
要指定多行模式，只要在正则表辑ּ后面d一个m选项。这会让$边界匚w换行W?\n)以及字符串真正的l尾?br>var sToMatch = "First second\nthird fourth\nfifth sixth";
var reLastWordOnLine = /(\w+)$/gm;
var arrWords = sToMatch.match(reLastWordOnLine);
表达式返?second","fourth"?sixth"。若不指定多行模式，表达式将只返?sixth"?br>
二、RegExp对象
javascript中的每个正则表达式都是一个对象，同其他的对象一栗?br>1.实例属?br>globalQ－Boolean|表示g(全局选项)是否已设|?br>ignoreCaseQ－Boolean|表示i(忽略大小写选项)是否已设|?br>lastIndexQ－整数Q代表下ơ匹配将会从哪个字符位置开?只有当用exec()或test()函数才会填入Q否则ؓ0)?br>multilineQ－Boolean|表示m(多行模式选项)是否已设|?br>sourceQ－正则表达式的源字W串形式。例如表辑ּ/[ba]*/的source返?[ba]*"?br>
2.静态属?br>静态的RegExp属性对所有的正则表达式都有效?br>
| 长名 | 短名 | 描述 |
| input | $_ | 最后用于匹配的字符?传递给exec()或test()的字W串) |
| lastMatch | $& | 最后匹配的字符 |
| lastParen | $+ | 最后匹配的分组 |
| leftContext | $` | 在上ơ匹配的前面的子?/td> |
| multiline | $* | 用于指定是否所有的表达式都使用多行模式的布?/td> |
| rightContext | $' | 在上ơ匹配之后的子串 |
IE和Operaq不支持RegExp.multilineQ所以最好单独的Ҏ个表辑ּ讄m选项而不要直接设|这个标记?/p>
]]>
1.对象冒充
function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
alert(this.color);
};
}
function ClassB(sColor, sName) {
this.newMethod = ClassA;
this.newMethod(sColor);
delete this.newMethod;
this.name = sName;
this.sayName = function () {
alert(this.name);
};
}
var objA = new ClassA("red");
var objB = new ClassB("blue", "Nicholas");
objA.sayColor();
objB.sayColor();
objB.sayName();
所有新的属性和新的Ҏ都必d删除了新Ҏ的代码行后定义。否则，可能会覆盖超cȝ相关属性和Ҏ?br>对象冒充可以支持多ѝ?br>function ClassZ(){
this.newMethod = ClassX;
this.newMethod(sColor);
delete this.newMethod;
this.newMethod = ClassY;
this.newMethod(sColor);
delete this.newMethod;
}
q里存在一个弊端，如果ClassX和ClassYh相同的属性或ҎQClassYh高优先Q因为承的是最后的cR?br>
2.call()Ҏ
call()Ҏ是与l典的对象冒充方法最怼的方法，它的W一个参数用作this的对象，其他参数都直接传递函数自w?br>function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
alert(this.color);
};
}
function ClassB(sColor, sName) {
//this.newMethod = ClassA;
//this.newMethod(color);
//delete this.newMethod;
ClassA.call(this, sColor);
this.name = sName;
this.sayName = function () {
alert(this.name);
};
}
var objA = new ClassA("red");
var objB = new ClassB("blue", "Nicholas");
objA.sayColor();
objB.sayColor();
objB.sayName();
3.apply()Ҏ
apply()Ҏ有两个参敎ͼ用作this的对象和要传递参数的数组。例如：
function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
alert(this.color);
};
}
function ClassB(sColor, sName) {
//this.newMethod = ClassA;
//this.newMethod(color);
//delete this.newMethod;
ClassA.apply(this, arguments);
this.name = sName;
this.sayName = function () {
alert(this.name);
};
}
var objA = new ClassA("red");
var objB = new ClassB("blue", "Nicholas");
objA.sayColor();
objB.sayColor();
objB.sayName();
当然Q只有超cM的参数顺序与子类中的参数序完全一致时才可以传递参数对象。如果不是，必dZ个单独的数组Q按照正的序攄参数。此外，q可以用call()Ҏ?br>
4.原型?br>function ClassA() {
}
ClassA.prototype.color = "red";
ClassA.prototype.sayColor = function () {
alert(this.color);
};
function ClassB() {
}
ClassB.prototype = new ClassA();
ClassB.prototype.name = "";
ClassB.prototype.sayName = function () {
alert(this.name);
};
var objA = new ClassA();
var objB = new ClassB();
objA.color = "red";
objB.color = "blue";
objB.name = "Nicholas";
objA.sayColor();
objB.sayColor();
objB.sayName();
注意Q调用ClassA的构造函数时Q没有给它传递参数。这在原型链中是标准做法。要保构造函数没有Q何参数?br>原型铄弊端是不支持多重l承?br>
5.混合方式
与创建对象最好方式相|用对象冒充承构造函数的属性，用原型链l承prototype对象的方法?br>function ClassA(sColor) {
this.color = sColor;
}
ClassA.prototype.sayColor = function () {
alert(this.color);
};
function ClassB(sColor, sName) {
ClassA.call(this, sColor);
this.name = sName;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () {
alert(this.name);
};
var objA = new ClassA("red");
var objB = new ClassB("blue", "Nicholas");
objA.sayColor();
objB.sayColor();
objB.sayName();
二、其他承方?br>1.zlnherit?br>可以?a >http://www.nczonline.net/downloads处下?br>zInherit库给ObjectcL加了两个ҎQinheritFrom()和instanceOf()
ClassB.prototype.inheritFrom(ClassA);
CalssB.instanceOf(ClassA);
2.xbObjects?br>可以?a );
q里Q子cd类名都以字W串形式传进来，而不是指向它们的构造函数的指针。这个调用必L在指定子cȝ构造构函数前?br>W二步，在构造函数内调用defineClass()ҎQ传l它cd及被ClaryUCؓ原型函数的指针，该函数用于初始化对象的所有属性和Ҏ?br>?br>_classes.registerClass("ClassA");
function ClassA(color){
_classes.defineClass("ClassA",prototypeFunction);
function prototypeFunction(){
//...
}
}
W三步，cd建init()Ҏ。该Ҏ负责讄该类的所有属性，它必L受与构造函数相同的参数。作ZU规U，init()ҎL在defineClass()Ҏ后调用?br>_classes.registerClass("ClassA");
function ClassA(color){
_classes.defineClass("ClassA",prototypeFunction);
this.init(sColor);
function prototypeFunction(){
ClassA.prototype.init = function(sColor){
this.parentMethod("init");
this.color = sColor;
}
}
}
W四步，在原型函数内d其他cȝҎ?br>_classes.registerClass("ClassA");
function ClassA(color){
_classes.defineClass("ClassA",prototypeFunction);
this.init(sColor);
function prototypeFunction(){
ClassA.prototype.init = function(sColor){
this.parentMethod("init");
this.color = sColor;
}
ClassA.prototype.sayColor = function(){
alert(this.color);
}
}
}
然后Q即可以以常规方式创建ClassA的实?br>var objA = new ClassA("red");
objA.sayColor(); //outputs "res"
]]>
创徏对象car
var oCar = new Object;
oCar.color = "red";
oCar.doors = 4;
oCar.mpg = 23;
oCar.showColor = function(){
alert(this.corlor);
};
创徏多个car
function createCar(color, doors, mpg) {
var tempcar = new Object;
tempcar.color = color;
tempcar.doors = doors;
tempcar.mpg = mpg;
tempcar.showColor = function () {
alert(this.color)
};
return tempcar;
}
var car1 = createCar("red", 4, 23);
var car2 = createCar("blue", 3, 25);
car1.showColor(); //outputs "red"
car2.showColor(); //outputs "blue"
q个例子中，每次调用函数createCar()Q都要创建新函数showColor()Q意味着每个对象都有自己的showColor()版本Q事实上Q每个对象都׃n了同一个函数?br>有些开发者在工厂函数外定义对象的ҎQ然后通过属性指向该ҎQ从而避开q个问题?br>function showColor(){
alert(this.color);
}
function createCar(color, doors, mpg) {
var tempcar = new Object;
tempcar.color = color;
tempcar.doors = doors;
tempcar.mpg = mpg;
tempcar.showColor = showColor;
return tempcar;
}
var car1 = createCar("red", 4, 23);
var car2 = createCar("blue", 3, 25);
car1.showColor(); //outputs "red"
car2.showColor(); //outputs "blue"
从功能上Ԍq样解决了重复创建函数对象的问题Q但该函数看h不像对象的方法。所有这些问题引发了开发者定义的构造函数的出现?br>
2.构造函数方?br>function Car(sColor, iDoors, iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.showColor = function () {
alert(this.color)
};
}
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);
oCar1.showColor(); //outputs "red"
oCar2.showColor(); //outputs "blue"
像工厂函数Q构造函C重复生成函数Qؓ每个对象都创建独立的函数版本。不q，也可以用外部函数重写构造函敎ͼ同样Q这么做语义上无M意义?br>
3.原型方式
function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors= 4;
Car.prototype.mpg= 23;
Car.prototype.showColor = function(){
alert(this.color);
}
var oCar1 = new Car();
var oCar2 = new Car();
它解决了前面两种方式存在的两个问题。但q不h意。首先，q个构造函数没有参数。用原型方式时Q不能通过构造函C递参数初始化属性的|q点很o厌，但还没完Q真正的问题出现在属性指向的是对象，而不是函数时。考虑下面的例子：
function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors= 4;
Car.prototype.mpg= 23;
Car.prototype.drivers = new Array("Mike","Sue");
Car.prototype.showColor = function(){
alert(this.color);
}
var oCar1 = new Car();
var oCar2 = new Car();
oCar1.drivers.push("Matt");
alert(oCar1.drivers); //outputs "Mike,Sue,Matt"
alert(oCar2.drivers); //outputs "Mike,Sue,Matt"
4.混合的构造函?原型方式
function Car(sColor, iDoors, iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike", "Sue");
}
Car.prototype.showColor = function () {
alert(this.color);
};
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);
oCar1.drivers.push("Matt");
alert(oCar1.drivers); //outputs "Mike,Sue,Matt"
alert(oCar2.drivers); //outputs "Mike,Sue"
现在更像创Z般对象了。所有的非函数属性都有构造函C创徏Q意味着又可用构造函数的参数赋予属性默认g。因为只创徏showColor()函数的一个实例，所以没有内存浪贏V?br>
5.动态原型方?br>function Car(sColor, iDoors, iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike", "Sue");
if (typeof Car._initialized == "undefined") {
Car.prototype.showColor = function () {
alert(this.color);
};
Car._initialized = true;
}
}
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);
oCar1.drivers.push("Matt");
alert(oCar1.drivers); //outputs "Mike,Sue,Matt"
alert(oCar2.drivers); //outputs "Mike,Sue"
动态原型方法的基本x与合的构造函?原型方式相同Q即在构造函数内定义非函数属性，而函数属性则利用原型属性定义。唯一的区别是赋予对象Ҏ的位|?/p>
6.混合工厂方式
q种方式通常是在不能应用前一U方式时的变通方法。它的目的是创徏假构造函敎ͼ只返回另一U对象的新实例?br>function Car() {
var tempcar = new Object;
tempcar.color = "red";
tempcar.doors = 4;
tempcar.mpg = 23;
tempcar.showColor = function () {
alert(this.color)
};
return tempcar;
}
与经典方式不同，q种方式使用newq算W，使它看v来像真正的构造函数?br>
7.采用哪种方式
如前所qͼ目前使用最q泛的是混合的构造函?原型方式。些外，动态原型方法也很流行，在功能上与前者等P可以采用q两U方式中的Q何一U?br>
二、修改对?br>1.创徏新方?br>可以用prototype属性ؓM已有的类定义新方法，像处理自己的类一栗?br>例：
Array.prototype.indexOf = function(vItem){
for(var i=0;i<this.length;i++){
if(vItem == this[i]){
return i;
}
}
retunr -1;
}
最后，如果想给ECMAScript中的每个本地对象d新方法，必须在Object对象的prototype属性上定义它?br>
2.重定义已有方?br>像能给自己的类定义新方法一P也可重定义已有的Ҏ。函数名只是指向函数的指针，因此可以LC它指向其他函数?br>?br>Function.prototype.toString = function(){
return "Function code hidden";
}
function sayHi(){
alert("hi");
}
alert(sayHi.toString()); //outputs "Function code hidden"
]]>