ž®ç¥ 2007-07-07 00:12 å‘表评论
]]>onerror事äšg处ç†å‡½æ•°æ˜¯ç¬¬ä¸€ä¸ªç”¨æ¥å助javascript处ç†é”™è¯¯çš„机制。页é¢ä¸Šå‡ºçŽ°å¼‚常æ—Óž¼Œerror事äšg便在window对象上触å‘ã€?br>例如åQ?br>
<html>
<head>
<title>OnError Example</title>
<script type="text/javascript">
window.onerror = function () {
alert("An error occurred.");
}
</script>
</head>
<body onload="nonExistentFunction()">
</body>
</html>
在这个例åä¸åQŒå°è¯•è°ƒç”¨ä¸å˜åœ¨çš„函数nonExistentFunction()æ—Óž¼Œž®×ƒ¼šå¼•å‘一个异常。这时会弹出è¦å‘Šæ¡†æ˜¾½C?#8220;An error occurred.”ä¸å¹¸çš„是åQŒæµè§ˆå™¨çš„错误信æ¯ä¹Ÿæ˜„¡¤ºå‡ºæ¥äº†ï¼Œè¦ä»Ž‹¹è§ˆå™¨ä¸éšè—它，onerror事äšg处ç†å‡½æ•°å¿…é¡»˜q”回trueå€û|¼šå¦‚下<head>
<title>OnError Example</title>
<script type="text/javascript">
window.onerror = function () {
alert("An error occurred.");
}
</script>
</head>
<body onload="nonExistentFunction()">
</body>
</html>
<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>
<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>URLåQï¼åœ¨å“ªä¸ªæ–‡ä»¶ä¸å‘生了错误ã€?br>è¡Œå·åQï¼¾l™å®šçš„URLä¸å‘生错误的行å·ã€?br>
<html>
<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>
<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ä¸å˜åœ¨ï¼‰åQŒerror事äšg便在˜q™ä¸ªå›‘փ上触å‘ã€?br>
<html>
<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>
<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处ç†å‡½æ•°ä¸åŒåQŒimageçš„onerror事äšg处ç†å‡½æ•°æ²¡æœ‰ä»ÕdŠ¡å…³äºŽé¢å¤–ä¿¡æ¯çš„å‚æ•°ã€?br>
4.处ç†è¯æ³•é”™è¯¯
onerror事äšg处ç†å‡½æ•°ä¸ä»…å¯ä»¥å¤„ç†å¼‚常åQŒå®ƒ˜q˜èƒ½å¤„ç†è¯æ³•é”™è¯¯åQŒä¹Ÿåªæœ‰å®ƒæ‰èƒ½å¤„ç†ã€?br>
<html>
<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>
<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Œåƈå¯èƒ½˜q‡onerror事äšg处ç†å‡½æ•°è®‰K—®ã€‚然而在Mozillaä¸ï¼Œæ£å¸¸çš„代ç 执行都会结æŸï¼ŒåŒæ—¶æ‰€æœ‰é”™è¯¯å‘生之å‰çš„å˜é‡å’Œæ•°æ®éƒ½è¢«é”€æ¯ã€‚Safariå’ŒKonquerorä¸æ”¯æŒwindow对象上的onerror事äšg处ç†å‡½æ•°åQŒä½†æ˜¯å®ƒä»¬æ”¯æŒå›¾åƒä¸Šçš„onerror事äšg处ç†å‡½æ•°ã€?br>
5.try...catchè¯å¥
<html>
<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>
<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ä¸åŒåQŒECMAScriptæ ‡å‡†åœ¨try...catchè¯å¥ä¸æŒ‡å®šåªèƒ½æœ‰ä¸€ä¸ªcatchåå¥ã€‚å› ä¸ºjavascript是弱¾cÕdž‹åQŒæ²¡åŠžæ³•æŒ‡æ˜Žcatchåå¥ä¸çš„异常的特定类型。丽Ž¡é”™è¯¯æ˜¯ä»€ä¹ˆç±»åž‹ï¼Œéƒ½ç”±åŒä¸€ä¸ªcatchåå¥å¤„ç†ã€‚Mozilla对其˜q›è¡Œäº†æ‰©å±•ï¼Œå¯äØ“try...catchè¯å¥æ·ÕdŠ 多个catchåå¥ã€‚当然åªæœ‰Mozillaæ‰èƒ½ä½¿ç”¨˜q™ä¸ªå½¢å¼åQŒæ‰€ä»¥ä¸æŽ¨è使用ã€?br>
(1)嵌套try...catchè¯å¥
<html>
<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>
(2)Error对象<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>
¾cÖM¼¼äºŽjava有个用于抛出的基¾c»ExceptionåQŒjavascript有个Error基类用于抛出。Error对象有以下特性：
nameåQï¼è¡¨ç¤ºé”™è¯¯¾cÕdž‹çš„å—½W¦ä¸²ã€?br>messageåQï¼å®žé™…的错误信æ¯ã€?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ç‰ÒŽ(gu¨©)€§æ¥è¡¨ç¤ºé”™è¯¯å‘生在哪一个文件ä¸åQŒä»¥åŠä¸€ä¸ªstackç‰ÒŽ(gu¨©)€§ä»¥åŒ…å«åˆ°é”™è¯¯å‘ç”Ÿæ—¶çš„è°ƒç”¨å †æ ?IEæ供了一个numberç‰ÒŽ(gu¨©)€§æ¥è¡¨ç¤ºé”™è¯¯ä»£å·ã€?br>(3)判æ–错误¾cÕdž‹
<html>
<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>
<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)抛出异常
ECMAScript½W¬ä¸‰ç‰ˆè¿˜å¼•å…¥äº†throwè¯å¥åQŒç”¨äºŽæœ‰ç›®çš„的抛出异常。è¯æ³•å¦‚下：
throw error_object; //error_objectå¯ä»¥æ˜¯å—½W¦ä¸²ã€æ•°å—ã€å¸ƒ?y¨u)®”值或者是实际的对象ã€?br>
<html>
<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>
<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Œæ¯”如RangeErroråQ‰ï¼Œæ‰€ä»¥åŒºåˆ†æµè§ˆå™¨æŠ›å‡ºçš„错误和开å‘ä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”回trueåQ‰ã€?br>
所有的‹¹è§ˆå™¨éƒ½å¯ä»¥æŠ¥å‘Šå¼€å‘äh员抛出的错误åQŒä½†æ˜¯é”™è¯¯æ¶ˆæ¯çš„昄¡¤ºæ–¹å¼å¯èƒ½æœ‰æ‰€ä¸åŒã€‚IE6åªä¼šåœ¨æŠ›å‡ºError对象æ—Óž¼Œæ‰æ˜¾½Cºé”™è¯¯ä¿¡æ?其他情况下，它就åªæ˜¾½CºException thrown and not caughtåQŒè€Œæ²¡æœ‰ä“Q何详¾l†å†…å®V€‚Mozilla则会报告Error:uncaught exception:然åŽè°ƒç”¨æ‰€æŠ›å‡ºçš„对象的toString()æ–ÒŽ(gu¨©)³•ã€?
ž®ç¥ 2007-04-25 00:58 å‘表评论
]]>DocumentåQï¼æœ€™å¶å±‚的节点，所有的其他节点都是附属于它的ã€?br>DocumentTypeåQï¼DTD引用åQˆä‹Éç”?lt;!DOCTYPE>è¯æ³•åQ‰çš„对象表现形å¼åQŒå®ƒä¸èƒ½åŒ…å«å节ç‚V€?br>DocumentFragmentåQï¼å¯ä»¥åƒDocument一æ äh¥ä¿å˜å…¶ä»–节点ã€?br>ElementåQï¼è¡¨ç¤ºèµ·å§‹æ ‡ç¾å’Œç»“æŸæ ‡½{¾ä¹‹é—´çš„内容åQŒä¾‹å¦?lt;tag></tab>或è€?lt;tag/>。这是唯一å¯ä»¥åŒæ—¶åŒ…å«ç‰ÒŽ(gu¨©)€§å’Œå节点的节点¾cÕdž‹ã€?br>AttråQï¼ä»£è¡¨ä¸€å¯¹ç‰¹æ€§å和特性倹{€‚这个节点类型ä¸èƒ½åŒ…å«å节点ã€?br>TextåQï¼ä»£è¡¨XML文档ä¸çš„在è“vå§‹æ ‡½{‘Ö’Œ¾l“æŸæ ‡ç¾ä¹‹é—´åQŒæˆ–者CDataSection内包å«çš„普通文本。这个节点类型ä¸èƒ½åŒ…å«å节点ã€?br>CDataSectionåQï¼<![CDATA[]]>的对象表现åÅžå¼ã€‚这个节点类型仅能包å«æ–‡æœ¬èŠ‚点Text作äØ“å节ç‚V€?br>EntityåQï¼è¡¨ç¤ºåœ¨DTDä¸çš„一个实体定义，例如<!ENTITY foo"foo">。这个节点类型ä¸èƒ½åŒ…å«å节点ã€?br>EntityReferenceåQï¼ä»£è¡¨ä¸€ä¸ªå®žä½“引用，例如"。这个节点类型ä¸èƒ½åŒ…å«å节点ã€?br>ProcessingInstructionåQï¼ä»£è¡¨ä¸€ä¸ªPI。这个节点类型ä¸èƒ½åŒ…å«å节点ã€?br>CommentåQï¼ä»£è¡¨XML注释。这个节点ä¸èƒ½åŒ…å«å节点ã€?br>NotationåQï¼ä»£è¡¨åœ¨DTDä¸å®šä¹‰çš„è®°å·ã€‚这个很ž®‘用到ã€?br>
Node接å£å®šä¹‰äº†æ‰€æœ‰èŠ‚点类型都包å«çš„特性和æ–ÒŽ(gu¨©)³•ã€?br>
| ç‰ÒŽ(gu¨©)€?æ–ÒŽ(gu¨©)³• | ¾cÕdž‹/˜q”回¾cÕdž‹ | 说明 |
| nodeName | String | 节点的åå?æ ÒŽ(gu¨©)®èŠ‚点的类型而定ä¹?/td> |
| nodeValue | String | 节点的å€?æ ÒŽ(gu¨©)®èŠ‚点的类型而定ä¹?/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 | 包å«äº†ä»£è¡¨ä¸€ä¸ªå…ƒç´ çš„ç‰ÒŽ(gu¨©)€§çš„Attr对象;仅用于Element节点 |
| appendChild(node) | Node | ž®†nodeæ·ÕdŠ 到childNodes的末ž®?/td> |
| removeChild(node) | Node | 从childNodesä¸åˆ 除node |
| replaceChild(newnode,oldnode) | Node | ž®†childNodesä¸çš„oldnode替æ¢æˆnewnode |
| insertBefore(newnode,refnode) | Node | 在childNodesä¸çš„refnode之å‰æ’å…¥newnodd |
除节点外åQŒDOM˜q˜å®šä¹‰äº†ä¸€äº›åŠ©æ‰‹å¯¹è±¡ï¼Œå®ƒä»¬å¯ä»¥å’ŒèŠ‚点一起ä‹É用，但ä¸æ˜¯DOM文档必有的部分ã€?br>NodeListåQï¼èŠ‚点数组åQŒæŒ‰ç…§æ•°å€ÆD¿›è¡Œçƒ¦å¼?用æ¥è¡¨ç¤ºå’Œä¸€ä¸ªå…ƒç´ çš„å节ç‚V€?br>NamedNodeMapåQï¼åŒæ—¶ä½¿ç”¨æ•°å€¼å’Œåå—˜q›è¡Œç´¢å¼•çš„节点表;ç”¨äºŽè¡¨ç¤ºå…ƒç´ ç‰ÒŽ(gu¨©)€§ã€?br>
2.讉K—®ç›¸å…³çš„节ç‚?br>下é¢çš„å‡ èŠ‚ä¸è€ƒè™‘下é¢çš„HTML™åµé¢
<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>
è¦è®¿é—?lt;html/>å…ƒç´ åQˆä½ 应该明白˜q™æ˜¯è¯¥æ–‡ä»¶çš„documentå…ƒç´ åQ‰ï¼Œä½ å¯ä»¥ä‹É用documentçš„documentElementç‰ÒŽ(gu¨©)€§ï¼š<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ç‰ÒŽ(gu¨©)€§æ¥å®ŒæˆåŒæ ·çš„工作。åªéœ€æŠŠå®ƒå½“æˆæ™®é€šçš„javascript arrayåQŒä‹É用方括å·æ ‡è®°åQ?br>var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];
注æ„æ–ÒŽ(gu¨©)‹¬åäh ‡è®°å…¶å®žæ˜¯NodeList在javascriptä¸çš„½Ž€ä¾¿å®žçŽ°ã€‚实际上æ£å¼çš„从childNodes列表ä¸èŽ·å–å节点的方法是使用item()æ–ÒŽ(gu¨©)³•å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å’ŒoBody˜q™ä¸‰ä¸ªå˜é‡ï¼Œž®±å¯ä»¥å°è¯•ç¡®å®šå®ƒä»¬ä¹‹é—´çš„关系å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.处ç†ç‰ÒŽ(gu¨©)€?br>æ£å¦‚å‰é¢æ‰€æ到的，å³ä¾¿Node接å£å·²å…·æœ‰attributesæ–ÒŽ(gu¨©)³•åQŒä¸”已被所有类型的节点¾l§æ‰¿åQŒç„¶è€Œï¼Œåªæœ‰
Element节点æ‰èƒ½æœ‰ç‰¹æ€§ã€‚Element节点的attributes属性其实是NameNodeMap,它æ供一些用于访问和处ç†å…¶å†…容的æ–ÒŽ(gu¨©)³•åQ?br>getNamedItem(name)åQ８q”回nodename属性值ç‰äºŽname的节ç‚?
removeNamedItem(name)åQï¼åˆ 除nodename属性值ç‰äºŽname的节ç‚?
setNamedItem(node)åQ＞®†nodeæ·ÕdŠ 到列表ä¸åQŒæŒ‰å…¶nodeName属性进行烦å¼?
item(pos)åQï¼åƒNodeList一æ øP¼Œ˜q”回在佾|®pos的节ç‚?
注：误‚®°ä½è¿™äº›æ–¹æ³•éƒ½æ˜¯è¿”回一个Attr节点åQŒè€Œéžç‰ÒŽ(gu¨©)€§å€¹{€?br>
NamedNodeMap对象也有一个length属性æ¥æŒ‡ç¤ºå®ƒæ‰€åŒ…å«çš„节点的数é‡ã€?br>当NamedNodeMap用于表示ç‰ÒŽ(gu¨©)€§æ—¶åQŒå…¶ä¸æ¯ä¸ªèŠ‚ç‚šwƒ½æ˜¯Attr节点åQŒè¿™çš„nodeName属性被讄¡½®ä¸ºç‰¹æ€§å¿UŽÍ¼Œè€ŒnodeValue属性被讄¡½®ä¸ºç‰¹æ€§çš„倹{€‚例如，å‡è®¾æœ‰è¿™æ ·ä¸€ä¸ªå…ƒç´ ：
<p style="color:red" id="p1">Hello world!</p>
åŒæ—¶åQŒå‡è®‘Ö˜é‡oP包å«æŒ‡å‘˜q™ä¸ªå…ƒç´ 的一个引用。于是å¯ä»¥è¿™æ ¯‚®¿é—®idç‰ÒŽ(gu¨©)€§çš„å€?
var sId = oP.attributes.getNamedItem("id").nodeValue;
当然åQŒè¿˜å¯ä»¥ç”¨æ•°å€¼æ–¹å¼è®¿é—®idç‰ÒŽ(gu¨©)€§ï¼Œä½†è¿™æ ïL¨å¾®æœ‰äº›ä¸ç›´è§‚åQ?br>var sId = oP.attributes.item(1).nodeValue;
˜q˜å¯ä»¥é€šè¿‡¾l™nodeValue属性赋新值æ¥æ”¹å˜idç‰ÒŽ(gu¨©)€§ï¼š
oP.attributes.getNamedItem("id").nodeValue="newId";
Attr节点也有一个完全ç‰åŒäºŽ(åŒæ—¶ä¹Ÿå®Œå…¨åŒæ¥äºŽ)nodeValue属性的value属性，òq¶ä¸”有name属性和nodeName属性ä¿æŒåŒæ¥ã€‚我们å¯ä»¥éšæ„ä‹É用这些属性æ¥ä¿®æ”¹æˆ–å˜æ›´ç‰¹æ€§ã€?br>å› äØ“˜q™ä¸ªæ–ÒŽ(gu¨©)³•æœ‰äº›ç´¯èµ˜åQŒDOMåˆå®šä¹‰äº†ä¸‰ä¸ªå…ƒç´ æ–ÒŽ(gu¨©)³•æ¥å¸®åŠ©è®¿é—®ç‰¹æ€§ï¼š
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()æ–ÒŽ(gu¨©)³•åQŒç”¨æ¥è¿”回一个包å«æ‰€æœ‰çš„tagName(æ ‡ç¾å?ç‰ÒŽ(gu¨©)€§ç‰äºŽæŸä¸ªæŒ‡å®šå€¼çš„å…ƒç´ çš„NodeList。在Element对象ä¸ï¼ŒtagNameç‰ÒŽ(gu¨©)€§æ€ÀL˜¯½{‰äºŽž®äºŽå·ä¹‹åŽç´§è·Ÿéšçš„å¿UŽÍ¼åQ例如，<img />çš„tagNameæ˜?img"。下一行代ç 返回文档ä¸æ‰€æœ?lt;img />å…ƒç´ çš„åˆ—è¡¨ï¼š
var oImgs = document.getElementsByTagName("img");
把所有图形都å˜äºŽoImgsåŽï¼Œåªéœ€ä½¿ç”¨æ–ÒŽ(gu¨©)‹¬åähˆ–者Item()æ–ÒŽ(gu¨©)³•åQˆgetElementsByTagName()˜q”回一个和childNodes一æ ïLš„NodeListåQ‰ï¼Œž®±å¯ä»¥åƒè®‰K—®å节炚w‚£æ ·é€ä¸ªè®‰K—®˜q™äº›èŠ‚点了：
alert(oImgs[0].tagName); //outputs "IMG"
å‡å¦‚åªæƒ³èŽ·å–在æŸä¸ªé¡µé¢ç¬¬ä¸€ä¸ªæ®µè½çš„所有图åƒï¼Œå¯ä»¥é€šè¿‡å¯¹ç¬¬ä¸€ä¸ªæ®µè½å…ƒç´ 调用getElementsByTagName()æ¥å®Œæˆï¼Œåƒè¿™æ øP¼š
var oPs = document.getElementByTagName("p");
var oImgsInp = oPs[0].getElementByTagName("img");
å¯ä»¥ä½¿ç”¨ä¸€ä¸ªæ˜ŸåïLš„æ–ÒŽ(gu¨©)³•æ¥èŽ·å–documentä¸çš„æ‰€æœ‰å…ƒç´ ï¼š
var oAllElements = document.getElementsByTagName("*");
当å‚数是一个星åïLš„时候，IE6.0òq¶ä¸˜q”å›žæ‰€æœ‰çš„å…ƒç´ ã€‚å¿…™åÖM‹É用document.allæ¥æ›¿ä»£å®ƒã€?br>(2)getElementsByName()
HTML DOM 定义了getElementsByName()åQŒè¿™ç”¨æ¥èŽ·å–所有nameç‰ÒŽ(gu¨©)€§ç‰äºŽæŒ‡å®šå€¼çš„å…ƒç´ çš„ã€?br>(3)getElementById()
˜q™æ˜¯HTML DOM定义的第二ç§æ–ÒŽ(gu¨©)³•åQŒå®ƒ?y¨u)®†è¿”回idç‰ÒŽ(gu¨©)€§ç‰äºŽæŒ‡å®šå€¼çš„å…ƒç´ ã€‚åœ¨HTMLä¸ï¼Œidç‰ÒŽ(gu¨©)€§æ˜¯å”¯ä¸€çš„ï¼åQè¿™æ„味ç€æ²¡æœ‰ä¸¤ä¸ªå…ƒç´ å¯ä»¥å…׃ínåŒä¸€ä¸ªidã€‚æ¯«æ— ç–‘é—®è¿™æ˜¯ä»Žæ–‡æ¡£æ ‘ä¸èŽ·å–å•ä¸ªæŒ‡å®šå…ƒç´ 最快的æ–ÒŽ(gu¨©)³•ã€?br>注：如果¾l™å®šçš„ID匚w…æŸä¸ªå…ƒç´ çš„nameç‰ÒŽ(gu¨©)€§ï¼ŒIE6.0˜q˜ä¼š˜q”回˜q™ä¸ªå…ƒç´ 。这是一个bugåQŒä¹Ÿæ˜¯å¿…™å»éžå¸¸å°å¿ƒçš„一个问题ã€?br>
5.创å¾æ–°èŠ‚ç‚?br>æœ€å¸¸ç”¨åˆ°çš„å‡ ä¸ªæ–ÒŽ(gu¨©)³•æ˜?br>createDocumentFragment()åQï¼åˆ›å¾æ–‡æ¡£¼„Žç‰‡èŠ‚点
createElement(tagname)åQï¼åˆ›å¾æ ‡ç¾åäØ“tagnameçš„å…ƒç´?br>createTextNode(text)åQï¼åˆ›å¾åŒ…å«æ–‡æœ¬text的文本节ç‚?br>
createElement()ã€createTextNode()ã€appendChild()
<html>
<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>
<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()
åˆ é™¤èŠ‚ç‚¹
<html>
<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>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>
<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>
新消æ¯æ·»åŠ 到旧消æ¯ä¹‹å‰?br>
<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>
<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>
<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.bodyåQˆæˆ–者它的åŽä»£èŠ‚点）ä¸ï¼Œ™åµé¢ž®×ƒ¼šæ›´æ–°òq¶åæ˜ å‡º˜q™ä¸ªå˜åŒ–。对于少é‡çš„æ›´æ–°åQŒè¿™æ˜¯å¾ˆå¥½çš„åQŒç„¶è€Œï¼Œå½“è¦å‘documentæ·ÕdŠ 大é‡æ•°æ®æ—Óž¼Œå¦‚æžœé€ä¸ªæ·ÕdŠ ˜q™äº›å˜åŠ¨åQŒè¿™ä¸ªè¿‡½E‹æœ‰å¯èƒ½ä¼šå分缓慢。äؓ解决˜q™ä¸ªé—®é¢˜åQŒå¯ä»¥åˆ›å»ÞZ¸€ä¸ªæ–‡æ¡£ç¢Žç‰‡ï¼ŒæŠŠæ‰€æœ‰çš„新节炚w™„åŠ å…¶ä¸Šï¼Œç„¶åŽæŠŠæ–‡æ¡£ç¢Žç‰‡çš„内容一‹Æ¡æ€§æ·»åŠ 到documentä¸ï¼Œå‡å¦‚惛_ˆ›å»ºå个新ŒDµè½ã€?br>
<html>
<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>
<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>大部分情况下åQŒHTML DOMå…ƒç´ ä¸åŒ…å«çš„所有特性都是å¯ä½œäؓ属性ã€?br>å‡è®¾æœ‰å¦‚下图åƒå…ƒç´ ：
<img src = "mypicture.jpg" border=0 />
如果è¦ä‹Éç”¨æ ¸å¿ƒçš„DOMæ¥èŽ·å–和讄¡½®srcå’Œborderç‰ÒŽ(gu¨©)€§ï¼Œé‚£ä¹ˆè¦ç”¨getAttribute()å’ŒsetAttribute()æ–ÒŽ(gu¨©)³•åQ?br>alert(oImg.getAttribute("src"));
alert(oImg.getAttribute("border"));
oImg.setAttribute("src","mypicture2.jpg");
oImg.setAttribute("border",1);
然而，使用HTML DOMåQŒå¯ä»¥ä‹É用åŒæ ·å¿U°çš„属性æ¥èŽ·å–和设¾|®è¿™äº›å€û|¼š
alert(oImg.src);
alert(oImg.border);
oImg.src="mypicture2.jpg";
oImg.border ="1";
唯一的特性å和属性åä¸ä¸€æ ïLš„特例是class属性，它是用æ¥æŒ‡å®šåº”用于æŸä¸ªå…ƒç´ 的一个CSS¾c»ï¼Œå› äØ“class在ECMAScriptä¸æ˜¯ä¸€ä¸ªä¿ç•™å—åQŒåœ¨javascriptä¸ï¼Œå®ƒä¸èƒ½è¢«ä½œäØ“å˜é‡åã€å±žæ€§å或都函数å。于是，相应的属性垮±å˜æˆäº†className;
注：IE在setAttribute()上有很大的问题，最好尽å¯èƒ½ä½¿ç”¨å±žæ€§ã€?br>
7.tableæ–ÒŽ(gu¨©)³•
ä¸ÞZº†ååŠ©å»ºç«‹è¡¨æ ¼åQŒHTML DOM¾l?lt;table/>,<tbody/>å’?lt;tr/>½{‰å…ƒç´ æ·»åŠ äº†ä¸€äº›ç‰¹æ€§å’Œæ–ÒŽ(gu¨©)³•ã€?br>¾l?lt;table/>å…ƒç´ æ·ÕdŠ 了以下内容：
| ç‰ÒŽ(gu¨©)€?æ–ÒŽ(gu¨©)³• | 说明 |
| 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>
| ç‰ÒŽ(gu¨©)€?æ–ÒŽ(gu¨©)³• | 说明 |
| rows | <tbody/>ä¸æ‰€æœ‰è¡Œçš„集å?/td> |
| deleteRow(position) | åˆ é™¤æŒ‡å®šä½ç½®ä¸Šçš„è¡?/td> |
| insertRow(position) | 在rows集åˆä¸çš„指定ä½ç½®ä¸Šæ’入一个新è¡?/td> |
<tr/>å…ƒç´ æ·ÕdŠ 了以下内å®?br>
| ç‰ÒŽ(gu¨©)€?æ–ÒŽ(gu¨©)³• | 说明 |
| cells | <tr/>å…ƒç´ ä¸æ‰€æœ‰çš„å•å…ƒæ ¼çš„é›†åˆ |
| deleteCell(postion) | åˆ é™¤¾l™å®šä½ç½®ä¸Šçš„å•å…ƒæ ?/td> |
| insertCell(postion) | 在cells集åˆçš„给点佾|®ä¸Šæ’入一个新的å•å…ƒæ ¼ |
8.é历DOM
NodeIteratoråQŒTreeWalker
DOM Level2的功能，˜q™äº›åŠŸèƒ½åªæœ‰åœ¨Mozillaå’ŒKonqueror/Safariä¸æ‰æœ‰ï¼Œ˜q™é‡Œž®×ƒ¸ä»‹ç»äº†ã€?br>
ž®ç¥ 2007-04-24 22:06 å‘表评论
]]>if(document.forms[0].username==""){
alert("误‚¾“入用户å");
document.forms[0].username.focus();
return false;
}
return true;
}
关于˜q™ç§éªŒè¯çš„实用性暂且ä¸è°ˆï¼ŒçŽ°åœ¨ä¸€èˆ¬çš„验è¯æ—©å·²ä¸ç”¨˜q™ä¸ªäº†ã€?br>åªæ˜¯ä¸ÞZº†åœ¨å·¥ä½œä¸å·å·æ‡’，写了个方便点的CheckUtilåQŒå¦‚ä¸?br>
其实也å¯ä»¥æ–¹ä¾¿çš„æ ÒŽ(gu¨©)®éœ€è¦æ›´æ”ÒŽ(gu¨©)½Cºçš„æ–¹å¼ã€?
ž®ç¥ 2007-04-18 23:36 å‘表评论
]]>æºä»£ç 下è½?/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];
}
};
ž®ç¥ 2007-04-18 00:18 å‘表评论
]]>( [ { \ ^ $ | ) ? * + .
ä»ÖM½•æ—¶å€™è¦åœ¨æ£åˆ™è¡¨è¾‘Ö¼ä¸ä‹É用这些元å—符åQŒéƒ½å¿…须对它们进行è{ä¹‰ã€‚å› æ¤è¦åŒšw…一个问åøP¼Œæ£åˆ™è¡¨è¾¾å¼å°±è¯¥è¿™æ ¯‚¡¨½Cºï¼š
var veQMark =/\?/;
æˆ–è€…è¿™æ ¯‚¡¨½Cºï¼š
var veQMark=new RegExp("\\?");
注æ„当æ£åˆ™è¡¨è¾‘ּ以第二ç§å½¢å¼è¡¨ç¤ºæ—Óž¼Œæ‰€æœ‰çš„åæ–œæ 都必须用两个åæ–œæ æ¥æ›¿æ¢ï¼Œå› äØ“javascriptå—符串解æžå™¨ä¼šæŒ‰ç…§\nçš„æ–¹å¼å°è¯•ç¿»è¯‘\?。äؓ了ä¿è¯ä¸ä¼šå‡ºçŽ°è¿™ä¸ªé—®é¢˜ï¼Œåœ¨å…ƒå—符的å‰é¢åŠ 上两个åæ–œæ åQˆåŒé‡è{义）。这个尞®çš„gotchaž®±æ˜¯å¤šæ•°å¼€å‘者更å好使用å—é¢é‡è¯æ³•çš„åŽŸå› ã€?br>
2.使用ç‰ÒŽ(gu¨©)®Šå—符
è¦ä‹É用ASCIIæ¥è¡¨½CÞZ¸€ä¸ªå—½W¦ï¼Œåˆ™å¿…™åÀLŒ‡å®šä¸€ä¸ªä¸¤ä½çš„åå…˜q›åˆ¶ä»£ç åQŒåƈ有å‰é¢åŠ 上\x。例如嗽W¦bçš„ASCIIç äØ“98åQŒç‰äºŽåå…进制的62åQŒå› æ¤ï¼Œè¡¨ç¤ºå—符bå¯ä»¥ä½¿ç”¨\x62
å¦å¤–也å¯ä»¥ä‹É用八˜q›åˆ¶ä»£æ›¿åå…˜q›åˆ¶æ¥æŒ‡å®šå—½W¦ä»£ç ，直接在åæ–œæ 之åŽè·Ÿä¸Šå…«è¿›åˆ¶æ•°å€û|¼Œä¾‹å¦‚åQŒb½{‰äºŽå…«è¿›åˆ¶çš„142åQŒæ‰€ä»¥ä¸‹é¢å°±è¯¥è¿™æ ?br>/\142/
如果è¦ä‹É用Unicodeæ¥è¡¨½Cºå—½W¦ï¼Œå¿…须指定å—符串的四ä½åå…˜q›åˆ¶è¡¨ç¤ºå½¢å¼åQŒå› æ¤b应该是\u0062
å¦å¤–˜q˜æœ‰å…¶ä»–一些预定义的特ŒDŠå—½W¦ï¼Œå¦‚下表所åˆ?br>
| å—符 | æè¿° |
| \t | 制表½W?/td> |
| \n | æ¢è¡Œ½W?/td> |
| \r | 回èžR½W?/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.4¾l„刾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‹Æ¡ä½†ä¸è¶…˜q‡m‹Æ?/td> |
| {n,} | 臛_°‘出现n‹Æ?/td> |
贪婪é‡è¯åQšå…ˆçœ‹æ•´ä¸ªçš„å—符串是ä¸æ˜¯ä¸€ä¸ªåŒ¹é…，如果没有å‘现匚w…åQŒå®ƒåŽÀLŽ‰å—符串ä¸çš„最åŽä¸€ä¸ªå—½W¦ï¼Œòq¶å†‹Æ¡å°è¯•ã€‚直到å‘çŽîC¸€ä¸ªåŒ¹é…å—½W¦æˆ–者嗽W¦ä¸²ä¸å‰©ä»ÖM½•å—符ã€?br>惰性é‡è¯ï¼šå…ˆçœ‹å—符串ä¸çš„第一个嗾U¿æ˜¯ä¸æ˜¯ä¸€ä¸ªåŒ¹é…。如果å•ç‹¬è¿™ä¸ªå—½W¦è¿˜ä¸å¤ŸåQŒå°±è¯Õd…¥ä¸‹ä¸€ä¸ªå—½W¦ï¼Œ¾l„æˆä¸¤ä¸ªå—符的嗽W¦ä¸²åQŒå¦‚果还是没有å‘现匹é…，¾l§ç®‹æ·ÕdŠ å—会直到å‘现一个或者整个嗽W¦éƒ½‹‚€æŸ¥è¿‡ä¹Ÿæ²¡æœ‰åŒ¹é…。其工作方å¼æ°å¥½ä¸Žè´ªå©ªç›¸åã€?br>支é…é‡è¯åQšåªž®è¯•åŒšw…整个å—符丌Ӏ‚如果整个嗽W¦ä¸²ä¸èƒ½äº§ç”ŸåŒšw…åQŒä¸åšè¿›ä¸€æ¥å°è¯•ã€?br>表示æ–ÒŽ(gu¨©)³•å¦‚下è¡?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.分组
分组是通过一¾pÕdˆ—括å·åŒ…围一¾pÕdˆ—å—符ã€å—½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Šçš„地方以备ž®†æ¥ä½¿ç”¨ã€‚这些å˜å‚¨åœ¨åˆ†ç»„ä¸çš„ç‰ÒŽ(gu¨©)®Šå€û|¼Œæˆ‘们¿UîC¹‹ä¸ºåå‘引用ã€?br>åå‘引用是按照从左到å³é‡åˆ°çš„左括å·å—½W¦çš„™åºåº˜q›è¡Œåˆ›å¾å’Œç¼–åïLš„。例如表辑ּ(A?(B?(C?)))ž®†äñ”生编å·ä»Ž1-3的三个åå‘引ç”?br>(1).(A?(B?(C?)))
(2).(B?(C?))
(3).(C?)
åå‘引用å¯ä»¥æœ‰å‡ ¿Uä¸åŒçš„使用æ–ÒŽ(gu¨©)³•ã€?br>首先åQŒä‹É用æ£åˆ™è¡¨è¾‘ּ对象的test(),match()或search()æ–ÒŽ(gu¨©)³•åŽï¼Œåå‘引用的值å¯ä»¥ä»ŽRegExpæž„é€ å‡½æ•îC¸èŽ·å¾—。例
var sToMatch = "#123456789";
var reNumbers = /#(\d+)/;
reNumbers.test(sToMatch);
alert(RegExp.$1); //outputs "123456789"
然åŽåQŒè¿˜å¯ä»¥ç›´æŽ¥åœ¨å®šä¹‰åˆ†¾l„的表达å¼ä¸åŒ…å«åå‘引用åQŒè¿™å¯ä»¥é€šè¿‡ä½¿ç”¨ç‰ÒŽ(gu¨©)®Šè½¬ä¹‰åºåˆ—如\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()æ–ÒŽ(gu¨©)³•ä¸ï¼Œ˜q™é€šè¿‡ä½¿ç”¨ç‰ÒŽ(gu¨©)®Šå—符åºåˆ—$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›è¡ŒåŒšw…åQŒåƒ˜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™å®Œæˆäº†ä»ÕdŠ¡åQŒä½†æ˜¯å分冗é•Ñ€‚还有å¦ä¸€¿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„，我们¿UîC¹‹ä¸ºæ•èŽä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¦è€Œä¸¿UÕdŠ¨å…¶ä½¾|®ã€‚åŒæ ·å˜åœ¨æ£å‘å‰çžÕ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>globalåQï¼Booleanå€û|¼Œè¡¨ç¤ºg(全局选项)是å¦å·²è®¾¾|®ã€?br>ignoreCaseåQï¼Booleanå€û|¼Œè¡¨ç¤ºi(忽略大å°å†™é€‰é¡¹)是å¦å·²è®¾¾|®ã€?br>lastIndexåQï¼æ•´æ•°åQŒä»£è¡¨ä¸‹‹Æ¡åŒ¹é…将会从哪个å—符ä½ç½®å¼€å§?åªæœ‰å½“ä‹É用exec()或test()函数æ‰ä¼šå¡«å…¥åQŒå¦åˆ™äØ“0)ã€?br>multilineåQï¼Booleanå€û|¼Œè¡¨ç¤ºm(多行模å¼é€‰é¡¹)是å¦å·²è®¾¾|®ã€?br>sourceåQï¼æ£åˆ™è¡¨è¾¾å¼çš„æºå—½W¦ä¸²å½¢å¼ã€‚例如表辑ּ/[ba]*/çš„sourcež®†è¿”å›?[ba]*"ã€?br>
2.é™æ€å±žæ€?br>é™æ€çš„RegExp属性对所有的æ£åˆ™è¡¨è¾¾å¼éƒ½æœ‰æ•ˆã€?br>
| é•¿å | çŸå | æè¿° |
| input | $_ | 最åŽç”¨äºŽåŒ¹é…çš„å—符ä¸?ä¼ é€’ç»™exec()或test()çš„å—½W¦ä¸²) |
| lastMatch | $& | 最åŽåŒ¹é…çš„å—符 |
| lastParen | $+ | 最åŽåŒ¹é…的分组 |
| leftContext | $` | 在上‹Æ¡åŒ¹é…çš„å‰é¢çš„åä¸?/td> |
| multiline | $* | 用于指定是å¦æ‰€æœ‰çš„表达å¼éƒ½ä½¿ç”¨å¤šè¡Œæ¨¡å¼çš„布?y¨u)®”å€?/td> |
| rightContext | $' | 在上‹Æ¡åŒ¹é…之åŽçš„å串 |
IEå’ŒOperaòq¶ä¸æ”¯æŒRegExp.multilineåQŒæ‰€ä»¥æœ€å¥½å•ç‹¬çš„å¯ÒŽ(gu¨©)¯ä¸ªè¡¨è¾‘ּ讄¡½®m选项而ä¸è¦ç›´æŽ¥è®¾¾|®è¿™ä¸ªæ ‡è®°ã€?/p>
ž®ç¥ 2007-04-17 00:45 å‘表评论
]]>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();
所有新的属性和新的æ–ÒŽ(gu¨©)³•éƒ½å¿…™åÕdœ¨åˆ 除了新æ–ÒŽ(gu¨©)³•çš„代ç è¡ŒåŽå®šä¹‰ã€‚å¦åˆ™ï¼Œå¯èƒ½ä¼šè¦†ç›–超¾cÈš„相关属性和æ–ÒŽ(gu¨©)³•ã€?br>对象冒充å¯ä»¥æ”¯æŒå¤šç‘ôæ‰Ñ€?br>function ClassZ(){
this.newMethod = ClassX;
this.newMethod(sColor);
delete this.newMethod;
this.newMethod = ClassY;
this.newMethod(sColor);
delete this.newMethod;
}
˜q™é‡Œå˜åœ¨ä¸€ä¸ªå¼Šç«¯ï¼Œå¦‚æžœClassXå’ŒClassYå…ähœ‰ç›¸åŒçš„属性或æ–ÒŽ(gu¨©)³•åQŒClassYå…ähœ‰é«˜ä¼˜å…ˆçñ”åQŒå› 为ç‘ô承的是最åŽçš„¾c…R€?br>
2.call()æ–ÒŽ(gu¨©)³•
call()æ–ÒŽ(gu¨©)³•æ˜¯ä¸Ž¾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()æ–ÒŽ(gu¨©)³•
apply()æ–ÒŽ(gu¨©)³•æœ‰ä¸¤ä¸ªå‚敎ͼŒç”¨ä½œ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Œåªæœ‰è¶…¾cÖM¸çš„å‚数顺åºä¸Žåç±»ä¸çš„å‚æ•°™åºåºå®Œå…¨ä¸€è‡´æ—¶æ‰å¯ä»¥ä¼ 递å‚数对象。如果ä¸æ˜¯ï¼Œž®±å¿…™åÕdˆ›å»ÞZ¸€ä¸ªå•ç‹¬çš„数组åQŒæŒ‰ç…§æ£¼‹®çš„™åºåºæ”„¡½®å‚数。æ¤å¤–，˜q˜å¯ä»¥ä‹É用call()æ–ÒŽ(gu¨©)³•ã€?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库给Object¾cÀL·»åŠ 了两个æ–ÒŽ(gu¨©)³•åQŒinheritFrom()å’ŒinstanceOf()
ClassB.prototype.inheritFrom(ClassA);
CalssB.instanceOf(ClassA);
2.xbObjectsåº?br>å¯ä»¥ä»?a );
˜q™é‡ŒåQŒå¾cÕd’Œ‘…ç±»å都以嗽W¦ä¸²å½¢å¼ä¼ è¿›æ¥ï¼Œè€Œä¸æ˜¯æŒ‡å‘å®ƒä»¬çš„æž„é€ å‡½æ•°çš„æŒ‡é’ˆã€‚è¿™ä¸ªè°ƒç”¨å¿…™åÀL”¾åœ¨æŒ‡å®šå¾cÈš„æž„é€ æž„å‡½æ•°å‰ã€?br>½W¬äºŒæ¥ï¼Œåœ¨æž„é€ å‡½æ•°å†…è°ƒç”¨defineClass()æ–ÒŽ(gu¨©)³•åQŒä¼ ¾l™å®ƒ¾cÕdåŠè¢«Clary¿UîCؓ原型函数的指针，该函数用于åˆå§‹åŒ–对象的所有属性和æ–ÒŽ(gu¨©)³•ã€?br>å¦?br>_classes.registerClass("ClassA");
function ClassA(color){
_classes.defineClass("ClassA",prototypeFunction);
function prototypeFunction(){
//...
}
}
½W¬ä¸‰æ¥ï¼Œä¸ø™¯¥¾cÕdˆ›å»ºinit()æ–ÒŽ(gu¨©)³•ã€‚该æ–ÒŽ(gu¨©)³•è´Ÿè´£è®„¡½®è¯¥ç±»çš„所有属性，它必™åÀLŽ¥å—ä¸Žæž„é€ å‡½æ•°ç›¸åŒçš„å‚数。作ä¸ÞZ¸€¿U规¾U¦ï¼Œinit()æ–ÒŽ(gu¨©)³•æ€ÀL˜¯åœ¨defineClass()æ–ÒŽ(gu¨©)³•åŽè°ƒç”¨ã€?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Èš„æ–ÒŽ(gu¨©)³•ã€?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"
ž®ç¥ 2007-04-16 23:24 å‘表评论
]]>创å¾å¯¹è±¡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>有些开å‘者在工厂函数外定义对象的æ–ÒŽ(gu¨©)³•åQŒç„¶åŽé€šè¿‡å±žæ€§æŒ‡å‘该æ–ÒŽ(gu¨©)³•å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Œå³åœ¨æž„é€ å‡½æ•°å†…å®šä¹‰éžå‡½æ•°å±žæ€§ï¼Œè€Œå‡½æ•°å±žæ€§åˆ™åˆ©ç”¨åŽŸåž‹å±žæ€§å®šä¹‰ã€‚唯一的区别是赋予对象æ–ÒŽ(gu¨©)³•çš„ä½¾|®ã€?/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™ç§æ–¹å¼ä½¿ç”¨new˜qç®—½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¼Œä¹Ÿå¯é‡å®šä¹‰å·²æœ‰çš„æ–ÒŽ(gu¨©)³•ã€‚函数ååªæ˜¯æŒ‡å‘å‡½æ•°çš„æŒ‡é’ˆï¼Œå› æ¤å¯ä»¥è½ÀL˜“åœîC‹É它指å‘其他函数ã€?br>å¦?br>Function.prototype.toString = function(){
return "Function code hidden";
}
function sayHi(){
alert("hi");
}
alert(sayHi.toString()); //outputs "Function code hidden"
ž®ç¥ 2007-04-16 22:20 å‘表评论
]]>最˜q‘å¦ä¹ webworkåQŒä¸»è¦æ˜¯ã€Šwebwork in action》一书，以åŠä¸€äº›å…¶å®ƒçš„文档。书是看完了åQŒwebwork大致有所了解åQŒè¿˜æ²¡æœ‰æœÞZ¼šå’Œæ—¶é—´åŽ»å®?br />
è·üc€‚记下了一些酾|®åž‹çš„东西，方便以åŽæŸ¥é˜…。还有很多东西没记录下æ¥åQŒä»¥åŽå®žè·ëŠš„è¯ï¼Œå†é€æ¥å®Œå–„ã€?br />
文档˜q˜æœ‰ç‚šw•¿åQŒå°±ç”¨æ–‡ä»¶çš„å½¢å¼äº†ã€?br />
下è²åœ°å€
ž®ç¥ 2007-03-24 12:18 å‘表评论
]]>tb_city表结构如�br />id      name      parentid
1      湖北      0
2Â Â Â Â Â Â æ¹–å—Â Â Â Â Â Â 0
3      æ¦æ±‰Â      1
4      仙桃      1
5      长沙      2
6      蔡甸      3
定义函数
create function c_tree(@initid int)/*定义函数c_treeåQŒè¾“å…¥å‚æ•îCØ“åˆå§‹èŠ‚点id*/
returns @t table(id int,name varchar(100),parentid int,lev int)/*定义表t用æ¥å˜æ”¾å–出的数æ?/
begin
 declare @i int/*æ ‡å¿—é€’å½’¾U§åˆ«*/
 set @i=1
 insert @t select id,name,parentid,@i from tb_city where id=@initid
 while @@rowcount<>0
 begin
 set @i=@i+1
 insert @t select a.id,a.name,a.parentid,@i from tb_city as a,@t as b
 where b.id=a.parentid and b.lev=@i-1
 end
return
end
执行
使用函数
select * from c_tree(1) /*å–湖北下é¢çš„å节ç‚?/
Oracleä¸çš„实现
select *Â from TB_CITY
/*æ¤å¤„å¯å†™WHEREè¯å¥é™åˆ¶*/
start with ID=1
connect by prior ID=PARENTID
ž®ç¥ 2007-02-06 17:24 å‘表评论
]]>