[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
]]>這也就是說,VBScript 與 Jscript 兩種腳本語言既能應(yīng)用與客戶端,也能應(yīng)用與服務(wù)端??纯聪旅娴睦樱?BR><script language=”vbscript”>
<!–
//客戶端腳本vbs
response.write “demo text…” //不區(qū)分大小寫,語法相當(dāng)寬松
–>
</script>
<script language=”Javascript”>
<!–
//客戶端腳本js
document.write(“demo text…”) //內(nèi)置對象必須區(qū)分大小寫
–>
</script>
<script language=”vbscript” runat=”server” >
<!–
//服務(wù)端腳本vbs
response.write “demo text…” //不區(qū)分大小寫,語法相當(dāng)寬松
–>
</script>
<script language=”javascript” runat=”server” >
<!–
//服務(wù)端腳本js
Response.Write(“demo text…”) //ASP內(nèi)置對象必須區(qū)分大小寫 –>
</script>
或者:
<%@LANGUAGE=”JAVASCRIPT”%> //放在服務(wù)端頁面第一行,表示該頁默認(rèn)使用Javascript腳本,在頁面的其他地方使用<%’code…%>,解釋器就認(rèn)為這是第一行定義的語言
<%@LANGUAGE=”VBSCRIPT”%> //放在服務(wù)端頁面第一行,表示該頁使用VBSCRIPT腳本,在頁面的其他地方使用<%’code…%>,解釋器就認(rèn)為這是第一行定義的語言
來自 Nine Javascript Gotchas , 以下是JavaScript容易犯錯的九個陷阱。雖然不是什么很高深的技術(shù)問題,但注意一下,會使您的編程輕松些,即所謂make life easier. 筆者對某些陷阱會混雜一些評點。
1. 最后一個逗號
如這段代碼,注意最后一個逗號,按語言學(xué)角度來說應(yīng)該是不錯的(python的類似數(shù)據(jù)類型辭典dictionary就允許如此)。IE會報語法錯誤,但語焉不詳,你只能用人眼從幾千行代碼中掃描。
<script>
var theObj = {
city : “Boston”,
state : “MA”,
}
</script>
2. this的引用會改變
如這段代碼:
<input type=”button” value=”Gotcha!” id=”MyButton” >
<script>
var MyObject = function () {
this.alertMessage = “Javascript rules”;
this.ClickHandler = function() {
alert(this.alertMessage );
}
}();
document.getElementById(”theText”).onclick = MyObject.ClickHandler
</script>
并不如你所愿,答案并不是”JavaScript rules”。在執(zhí)行MyObject.ClickHandler時,代碼中紅色這行,this的引用實際上指向的是document.getElementById(“theText”)的引用??梢赃@么解決:
<input type=”button” value=”Gotcha!” id=”theText” >
<script>
var MyObject = function () {
var self = this;
this.alertMessage = “Javascript rules”;
this.OnClick = function() {
alert(self.value);
}
}();
document.getElementById(”theText”).onclick = MyObject.OnClick
</script>
實質(zhì)上,這就是JavaScript作用域的問題。如果你看過,你會發(fā)現(xiàn)解決方案不止一種。
3. 標(biāo)識盜賊
在JavaScript中不要使用跟HTML的id一樣的變量名。如下代碼:
<input type=”button” id=”TheButton”>
<script>
TheButton = get(“TheButton”);
</script>
IE會報對象未定義的錯誤。我只能說:IE sucks.
4. 字符串只替換第一個匹配
如下代碼:
<script>
var fileName = “This is a title”.replace(” “,”_”);
</script>
而實際上,結(jié)果是”This_is a title“. 在JavaScript中,String.replace的第一個參數(shù)應(yīng)該是正則表達(dá)式。所以,正確的做法是這樣:
var fileName = “This is a title”.replace(/ /g,”_”);
5. mouseout意味著mousein
事實上,這是由于事件冒泡導(dǎo)致的。IE中有mouseenter和mouseleave,但不是標(biāo)準(zhǔn)的。作者在此建議大家使用庫比如YUI來解決問題。
6. parseInt是基于進(jìn)制體系的
這個是常識,可是很多人給忽略了parseInt還有第二個參數(shù),用以指明進(jìn)制。比如,parseInt(“09”),如果你認(rèn)為答案是9,那就錯了。因為,在此,字符串以0開頭,parseInt以八進(jìn)制來處理它,在八進(jìn)制中,09是非法,返回false,布爾值false轉(zhuǎn)化成數(shù)值就是0. 因此,正確的做法是parseInt(“09”, 10).
7. for…in…會遍歷所有的東西
有一段這樣的代碼:
var arr = [5,10,15]
var total = 1;
for ( var x in arr) {
total = total * arr[x];
}
運行得好好的,不是嗎?但是有一天它不干了,給我返回的值變成了NaN, 暈。我只不過引入了一個庫而已啊。原來是這個庫改寫了Array的prototype,這樣,我們的arr平白無過多出了一個屬性(方法),而for…in…會把它給遍歷出來。所以這樣做才是比較安全的:
for ( var x = 0; x < arr.length; x++) {
total = total * arr[x];
}
其實,這也是污染基本類的prototype會帶來危害的一個例證。
8. 事件處理器的陷阱
這其實只會存在使用作為對象屬性的事件處理器才會存在的問題。比如window.onclick = MyOnClickMethod這樣的代碼,這會復(fù)寫掉之前的window.onclick事件,還可能導(dǎo)致IE的內(nèi)容泄露(sucks again)。在IE還沒有支持DOM 2的事件注冊之前,作者建議使用庫來解決問題,比如使用YUI:
YAHOO.util.Event.addListener(window, “click”, MyOnClickMethod);
這應(yīng)該也屬于常識問題,但新手可能容易犯錯。
9. Focus Pocus
新建一個input文本元素,然后把焦點挪到它上面,按理說,這樣的代碼應(yīng)該很自然:
var newInput = document.createElement(“input”);
document.body.appendChild(newInput);
newInput.focus();
newInput.select();
但是IE會報錯(sucks again and again)。理由可能是當(dāng)你執(zhí)行fouce()的時候,元素尚未可用。因此,我們可以延遲執(zhí)行:
var newInput = document.createElement(“input”);
newInput.id = “TheNewInput”;
document.body.appendChild(newInput);
setTimeout(function(){ //這里我使用閉包改寫過,若有興趣可以對比原文
document.getElementById(‘TheNewInput’).focus();
document.getElementById(‘TheNewInput’).select();}, 10);
在實踐中,JavaScript的陷阱還有很多很多,大多是由于解析器的實現(xiàn)不到位而引起。這些東西一般都不會在教科書中出現(xiàn),只能靠開發(fā)者之間的經(jīng)驗分享。謝天謝地,我們生活在網(wǎng)絡(luò)時代,很多碰到的問題,一般都可以在Google中找到答案。
]]>| 事件 | 瀏覽器支持 | 描述 |
| onClick | IE3|N2|O3 | 鼠標(biāo)點擊事件,多用在某個對象控制的范圍內(nèi)的鼠標(biāo)點擊 |
| onDblClick | IE4|N4|O | 鼠標(biāo)雙擊事件 |
| onMouseDown | IE4|N4|O | 鼠標(biāo)上的按鈕被按下了 |
| onMouseUp | IE4|N4|O | 鼠標(biāo)按下后,松開時激發(fā)的事件 |
| onMouseOver | IE3|N2|O3 | 當(dāng)鼠標(biāo)移動到某對象范圍的上方時觸發(fā)的事件 |
| onMouseMove | IE4|N4|O | 鼠標(biāo)移動時觸發(fā)的事件 |
| onMouseOut | IE4|N3|O3 | 當(dāng)鼠標(biāo)離開某對象范圍時觸發(fā)的事件 |
| onKeyPress | IE4|N4|O | 當(dāng)鍵盤上的某個鍵被按下并且釋放時觸發(fā)的事件.[注意:頁面內(nèi)必須有被聚焦的對象] |
| onKeyDown | IE4|N4|O | 當(dāng)鍵盤上某個按鍵被按下時觸發(fā)的事件[注意:頁面內(nèi)必須有被聚焦的對象] |
| onKeyUp | IE4|N4|O | 當(dāng)鍵盤上某個按鍵被按放開時觸發(fā)的事件[注意:頁面內(nèi)必須有被聚焦的對象] |
| 事件 | 瀏覽器支持 | 描述 |
| onAbort | IE4|N3|O | 圖片在下載時被用戶中斷 |
| onBeforeUnload | IE4|N|O | 當(dāng)前頁面的內(nèi)容將要被改變時觸發(fā)的事件 |
| onError | IE4|N3|O | 捕抓當(dāng)前頁面因為某種原因而出現(xiàn)的錯誤,如腳本錯誤與外部數(shù)據(jù)引用的錯誤 |
| onLoad | IE3|N2|O3 | 頁面內(nèi)空完成傳送到瀏覽器時觸發(fā)的事件,包括外部文件引入完成 |
| onMove | IE|N4|O | 瀏覽器的窗口被移動時觸發(fā)的事件 |
| onResize | IE4|N4|O | 當(dāng)瀏覽器的窗口大小被改變時觸發(fā)的事件 |
| onScroll | IE4|N|O | 瀏覽器的滾動條位置發(fā)生變化時觸發(fā)的事件 |
| onStop | IE5|N|O | 瀏覽器的停止按鈕被按下時觸發(fā)的事件或者正在下載的文件被中斷 |
| onUnload | IE3|N2|O3 | 當(dāng)前頁面將被改變時觸發(fā)的事件 |
| 事件 | 瀏覽器支持 | 描述 |
| onBlur | IE3|N2|O3 | 當(dāng)前元素失去焦點時觸發(fā)的事件 [鼠標(biāo)與鍵盤的觸發(fā)均可] |
| onChange | IE3|N2|O3 | 當(dāng)前元素失去焦點并且元素的內(nèi)容發(fā)生改變而觸發(fā)的事件 [鼠標(biāo)與鍵盤的觸發(fā)均可] |
| onFocus | IE3|N2|O3 | 當(dāng)某個元素獲得焦點時觸發(fā)的事件 |
| onReset | IE4|N3|O3 | 當(dāng)表單中RESET的屬性被激發(fā)時觸發(fā)的事件 |
| onSubmit | IE3|N2|O3 | 一個表單被遞交時觸發(fā)的事件 |
| 事件 | 瀏覽器支持 | 描述 |
| onBounce | IE4|N|O | 在Marquee內(nèi)的內(nèi)容移動至Marquee顯示范圍之外時觸發(fā)的事件 |
| onFinish | IE4|N|O | 當(dāng)Marquee元素完成需要顯示的內(nèi)容后觸發(fā)的事件 |
| onStart | IE4|N|O | 當(dāng)Marquee元素開始顯示內(nèi)容時觸發(fā)的事件 |
| 事件 | 瀏覽器支持 | 描述 |
| onBeforeCopy | IE5|N|O | 當(dāng)頁面當(dāng)前的被選擇內(nèi)容將要復(fù)制到瀏覽者系統(tǒng)的剪貼板前觸發(fā)的事件 |
| onBeforeCut | IE5|N|O | 當(dāng)頁面中的一部分或者全部的內(nèi)容將被移離當(dāng)前頁面[剪貼]并移動到瀏覽者的系統(tǒng)剪貼板時觸發(fā)的事件 |
| onBeforeEditFocus | IE5|N|O | 當(dāng)前元素將要進(jìn)入編輯狀態(tài) |
| onBeforePaste | IE5|N|O | 內(nèi)容將要從瀏覽者的系統(tǒng)剪貼板傳送[粘貼]到頁面中時觸發(fā)的事件 |
| onBeforeUpdate | IE5|N|O | 當(dāng)瀏覽者粘貼系統(tǒng)剪貼板中的內(nèi)容時通知目標(biāo)對象 |
| onContextMenu | IE5|N|O | 當(dāng)瀏覽者按下鼠標(biāo)右鍵出現(xiàn)菜單時或者通過鍵盤的按鍵觸發(fā)頁面菜單時觸發(fā)的事件 [試試在頁面中的<body>中加入onContentMenu=”return false”就可禁止使用鼠標(biāo)右鍵了] |
| onCopy | IE5|N|O | 當(dāng)頁面當(dāng)前的被選擇內(nèi)容被復(fù)制后觸發(fā)的事件 |
| onCut | IE5|N|O | 當(dāng)頁面當(dāng)前的被選擇內(nèi)容被剪切時觸發(fā)的事件 |
| onDrag | IE5|N|O | 當(dāng)某個對象被拖動時觸發(fā)的事件 [活動事件] |
| onDragDrop | IE|N4|O | 一個外部對象被鼠標(biāo)拖進(jìn)當(dāng)前窗口或者幀 |
| onDragEnd | IE5|N|O | 當(dāng)鼠標(biāo)拖動結(jié)束時觸發(fā)的事件,即鼠標(biāo)的按鈕被釋放了 |
| onDragEnter | IE5|N|O | 當(dāng)對象被鼠標(biāo)拖動的對象進(jìn)入其容器范圍內(nèi)時觸發(fā)的事件 |
| onDragLeave | IE5|N|O | 當(dāng)對象被鼠標(biāo)拖動的對象離開其容器范圍內(nèi)時觸發(fā)的事件 |
| onDragOver | IE5|N|O | 當(dāng)某被拖動的對象在另一對象容器范圍內(nèi)拖動時觸發(fā)的事件 |
| onDragStart | IE4|N|O | 當(dāng)某對象將被拖動時觸發(fā)的事件 |
| onDrop | IE5|N|O | 在一個拖動過程中,釋放鼠標(biāo)鍵時觸發(fā)的事件 |
| onLoseCapture | IE5|N|O | 當(dāng)元素失去鼠標(biāo)移動所形成的選擇焦點時觸發(fā)的事件 |
| onPaste | IE5|N|O | 當(dāng)內(nèi)容被粘貼時觸發(fā)的事件 |
| onSelect | IE4|N|O | 當(dāng)文本內(nèi)容被選擇時的事件 |
| onSelectStart | IE4|N|O | 當(dāng)文本內(nèi)容選擇將開始發(fā)生時觸發(fā)的事件 |
| 事件 | 瀏覽器支持 | 描述 |
| onAfterUpdate | IE4|N|O | 當(dāng)數(shù)據(jù)完成由數(shù)據(jù)源到對象的傳送時觸發(fā)的事件 |
| onCellChange | IE5|N|O | 當(dāng)數(shù)據(jù)來源發(fā)生變化時 |
| onDataAvailable | IE4|N|O | 當(dāng)數(shù)據(jù)接收完成時觸發(fā)事件 |
| onDatasetChanged | IE4|N|O | 數(shù)據(jù)在數(shù)據(jù)源發(fā)生變化時觸發(fā)的事件 |
| onDatasetComplete | IE4|N|O | 當(dāng)來子數(shù)據(jù)源的全部有效數(shù)據(jù)讀取完畢時觸發(fā)的事件 |
| onErrorUpdate | IE4|N|O | 當(dāng)使用onBeforeUpdate事件觸發(fā)取消了數(shù)據(jù)傳送時,代替onAfterUpdate事件 |
| onRowEnter | IE5|N|O | 當(dāng)前數(shù)據(jù)源的數(shù)據(jù)發(fā)生變化并且有新的有效數(shù)據(jù)時觸發(fā)的事件 |
| onRowExit | IE5|N|O | 當(dāng)前數(shù)據(jù)源的數(shù)據(jù)將要發(fā)生變化時觸發(fā)的事件 |
| onRowsDelete | IE5|N|O | 當(dāng)前數(shù)據(jù)記錄將被刪除時觸發(fā)的事件 |
| onRowsInserted | IE5|N|O | 當(dāng)前數(shù)據(jù)源將要插入新數(shù)據(jù)記錄時觸發(fā)的事件 |
| 事件 | 瀏覽器支持 | 描述 |
| onAfterPrint | IE5|N|O | 當(dāng)文檔被打印后觸發(fā)的事件 |
| onBeforePrint | IE5|N|O | 當(dāng)文檔即將打印時觸發(fā)的事件 |
| onFilterChange | IE4|N|O | 當(dāng)某個對象的濾鏡效果發(fā)生變化時觸發(fā)的事件 |
| onHelp | IE4|N|O | 當(dāng)瀏覽者按下F1或者瀏覽器的幫助選擇時觸發(fā)的事件 |
| onPropertyChange | IE5|N|O | 當(dāng)對象的屬性之一發(fā)生變化時觸發(fā)的事件 |
| onReadyStateChange | IE4|N|O | 當(dāng)對象的初始化屬性值發(fā)生變化時觸發(fā)的事件 |
用法說明:
以下說明將以一個半徑為20像素圓角的DIV為例.
實現(xiàn)div圓角的JavaScript代碼.rar
解壓您下載的文件, 上傳到您的站點。然后復(fù)制代碼如下和黏貼它入您的網(wǎng)頁的頂頭部分。如果您保存了文件到該網(wǎng)頁目錄外
的任何地方, 修正代碼中的src值.
===代碼:
< script type="text/javascript" src="rounded_corners.js"></script >
——————————B
然后創(chuàng)造一個div。如果您已有div使用圓角,只要給這個div一個id就可以.
===代碼:
< div id="mydiv"></div >
——————————C
最后我們需要添加一段javascript來預(yù)載。在您的網(wǎng)頁的頂頭部分增加以下代碼:
|
以下是引用片段: <script type="text/javascript"> window.onload = function() var PObj = document.getElementById("mydiv"); var cornersObj = new curvyCorners(settings, divObj); </script> |
======== 其中,radius表示半徑,數(shù)值越大,圓角就越大.
————————————D
現(xiàn)在可以運行了.呵呵
———————————–PS:
*********如果你想搞成奇形怪狀的圓角,你可以設(shè)置每個角都不同的半徑.
例如:
|
以下是引用片段: settings = { tl: { radius: 20 }, tr: { radius: 40 }, bl: { radius: 60 }, br: { radius: 80 }, antiAlias: true, autoPad: false } 或者: settings = { tl: { radius: 20 }, tr: false, bl: false, br: { radius: 80 }, antiAlias: true, autoPad: false } |
提示: tl-左上角 tr=右上角 bl=左下角 br=右下角
]]>常用的網(wǎng)頁特效收集起來做一個“大全”。
1.讓文字不停地滾動
?。糓ARQUEE>滾動文字</MARQUEE>
2.記錄并顯示網(wǎng)頁的最后修改時間
?。約cript language=Javascript>
document.write(“最后更新時間: ” + document.lastModified + “”)
?。?script>
3.關(guān)閉當(dāng)前窗口
?。糰 href=”/”onClick=”javascript:window.close();return false;”>關(guān)閉窗口</a>
4.5秒后關(guān)閉當(dāng)前頁
<script language=”Javascript”>
?。?–
setTimeout(‘window.close();’,5000);
–>
?。?script>
5.2秒后載入指定網(wǎng)頁
?。糷ead>
<meta http-equiv=”refresh” content=”2;URL=http://你的網(wǎng)址”>
?。?head>
6.添加到收藏夾
<script Language=”Javascript”>
function bookmarkit()
{
window.external.addFavorite(‘http://你的網(wǎng)址’,’你的網(wǎng)站名稱’)
}
if (document.all)document.write(‘<a href=”#” onClick=”bookmarkit()”>加入收藏夾</a>’)
?。?script>
7.讓超鏈接不顯示下劃線
<style type=”text/css”>
?。?-
a:link{text-decoration:none}
a:hover{text-decoration:none}
a:visited{text-decoration:none}
->
?。?style>
8.禁止鼠標(biāo)右鍵的動作
<script Language = “Javascript”>
function click() { if (event.button==2||event.button==3)
{
alert(‘禁止鼠標(biāo)右鍵’);
}
document.onmousedown=click // –>
?。?script>
9.設(shè)置該頁為首頁
?。糱ody bgcolor=”#FFFFFF” text=”#000000″>
<!– 網(wǎng)址:http://你的網(wǎng)址–>
?。糰 class=”chlnk” style=”cursor:hand” HREF
onClick=”this.style.behavior=’url(#default#homepage)’;
this.setHomePage(‘你的網(wǎng)站名稱);”><font color=”000000″ size=”2″ face=”宋體”>設(shè)為首頁</font></a>
?。?body>
10.節(jié)日倒計時
<script Language=”Javascript”>
var timedate= new Date(“December 25,2003”);
var times=”圣誕節(jié)”;
var now = new Date();
var date = timedate.getTime() – now.getTime();
var time = Math.floor(date / (1000 * 60 * 60 * 24));
if (time >= 0)
document.write(“現(xiàn)在離”+times+”還有: “+time +”天”)</script>
11.單擊按鈕打印出當(dāng)前頁
?。約cript Language=”Javascript”>
<!– Begin
if (window.print) {
document.write(‘<form>’
+ ‘<input type=button name=print value=”打印本頁” ‘
+ ‘onClick=”javascript:window.print()”></form>’);
}
// End –>
?。?script>
12.單擊按鈕‘另存為’當(dāng)前頁
?。糹nput type=”button” name=”Button” value=”保存本頁”
onClick=”document.all.button.ExecWB(4,1)”>
?。紀(jì)bject id=”button”
width=0
height=0
classid=”CLSID:8856F961-340A-11D0-A96B-00C04FD705A2″>
<embed width=”0″ height=”0″></embed>
?。?object>
13.顯示系統(tǒng)當(dāng)前日期
<script language=Javascript>
today=new Date();
function date(){
this.length=date.arguments.length
for(var i=0;i<this.length;i++)
this[i+1]=date.arguments }
var d=new date(“星期日”,”星期一”,”星期二”,”星期三”,”星期四”,”星期五”,”星期六”);
document.write(
”<font color=##000000 style=’font-size:9pt;font-family: 宋體’> “,
today.getYear(),”年”,today.getMonth()+1,”月”,today.getDate(),”日”,
d[today.getDay()+1],”</font>” );
?。?script>
14.不同時間段顯示不同問候語
?。約cript Language=”Javascript”>
?。?–
var text=””; day = new Date( ); time = day.getHours( );
if (( time>=0) && (time < 7 ))
text=”夜貓子,要注意身體哦! ”
if (( time >= 7 ) && (time < 12))
text=”今天天氣……哈哈哈,不去玩嗎?”
if (( time >= 12) && (time < 14))
text=”午休時間哦,朋友一定是不習(xí)慣午睡的吧?!”
if (( time >=14) && (time < 18))
text=”下午茶的時間到了,休息一下吧! ”
if ((time >= 18) && (time <= 22))
text=”您又來了,可別和MM聊太久哦!”
if ((time >= 22) && (time < 24))
text=”很晚了哦,注意休息呀!”
document.write(text)
//—>
</script>
15.水中倒影效果
?。糹mg id=”reflect” src=”你自己的圖片文件名” width=”175″ height=”59″>
<script language=”Javascript”>
function f1()
{
setInterval(“mP.filters.wave.phase+=10”,100);
}
if (document.all)
{
document.write(‘<img id=mP src=”‘+document.all.reflect.src+'”
style=”filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()”>’)
window.onload=f1
}
?。?script>
16.慢慢變大的窗口
<script Language=”Javascript”>
?。?–
var Windowsheight=100
var Windowswidth=100
var numx=5
function openwindow(thelocation){
temploc=thelocation
if
(!(window.resizeTo&&document.all)&&!(window.resizeTo&&document.getElementById))
{
window.open(thelocation)
return
}
windowsize=window.open(“”,””,”scrollbars”)
windowsize.moveTo(0,0)
windowsize.resizeTo(100,100)
tenumxt()
}
function tenumxt(){
if (Windowsheight>=screen.availHeight-3)
numx=0
windowsize.resizeBy(5,numx)
Windowsheight+=5
Windowswidth+=5
if (Windowswidth>=screen.width-5)
{
windowsize.location=temploc
Windowsheight=100
Windowswidth=100
numx=5
return
}
setTimeout(“tenumxt()”,50)
}
//–>
</script>
?。紁><a href=”javascript:openwindow(http://m.createwh.com)”>進(jìn)入</a>
17.改變IE地址欄的IE圖標(biāo)
我們要先做一個16*16的icon(圖標(biāo)文件),保存為index.ico。把這個圖標(biāo)文件上傳到根目錄下并在首頁<head></head>之間加上如下代碼:
]]>對于如今熱衷于網(wǎng)頁設(shè)計的愛好者們來說,單調(diào)的網(wǎng)頁效果已經(jīng)遠(yuǎn)遠(yuǎn)不能滿足他們新奇的心理了。本文就來介紹一種簡單的下拉菜單的制作。只要你懂得一點點HTML的知識,就可以。即使什么也不懂,照葫蘆畫瓢也行,呵呵。
第一步,定義下拉菜單JS代碼
第二步,在適當(dāng)?shù)奈恢貌迦肽夸洸藛?
第三步,插入隱藏層的定義.
到這里,你就可以看到一個完整的下拉菜單的網(wǎng)頁特效了。
]]>以下以 IE 代替 Internet Explorer,以 MF 代替 Mozzila Firefox
1. document.form.item 問題
(1)現(xiàn)有問題:
現(xiàn)有代碼中存在許多 document.formName.item(“itemName”) 這樣的語句,不能在 MF 下運行
(2)解決方法:
改用 document.formName.elements[“elementName”]
(3)其它
參見 2
2. 集合類對象問題
(1)現(xiàn)有問題:
現(xiàn)有代碼中許多集合類對象取用時使用 (),IE 能接受,MF 不能。
(2)解決方法:
改用 [] 作為下標(biāo)運算。如:document.forms(“formName”) 改為 document.forms[“formName”]。
又如:document.getElementsByName(“inputName”)(1) 改為 document.getElementsByName(“inputName”)[1]
(3)其它
3. window.event
(1)現(xiàn)有問題:
使用 window.event 無法在 MF 上運行
(2)解決方法:
MF 的 event 只能在事件發(fā)生的現(xiàn)場使用,此問題暫無法解決??梢赃@樣變通:
原代碼(可在IE中運行):
<input type=”button” name=”someButton” value=”提交” onclick=”javascript:gotoSubmit()”/>
…
<script language=”javascript”>
function gotoSubmit() {
…
alert(window.event); // use window.event
…
}
</script>
新代碼(可在IE和MF中運行):
<input type=”button” name=”someButton” value=”提交” onclick=”javascript:gotoSubmit(event)”/>
…
<script language=”javascript”>
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
…
alert(evt); // use evt
…
}
</script>
此外,如果新代碼中第一行不改,與老代碼一樣的話(即 gotoSubmit 調(diào)用沒有給參數(shù)),則仍然只能在IE中運行,但不會出錯。所以,這種方案 tpl 部分仍與老代碼兼容。
4. HTML 對象的 id 作為對象名的問題
(1)現(xiàn)有問題
在 IE 中,HTML 對象的 ID 可以作為 document 的下屬對象變量名直接使用。在 MF 中不能。
(2)解決方法
用 getElementById(“idName”) 代替 idName 作為對象變量使用。
5. 用idName字符串取得對象的問題
(1)現(xiàn)有問題
在IE中,利用 eval(idName) 可以取得 id 為 idName 的 HTML 對象,在MF 中不能。
(2)解決方法
用 getElementById(idName) 代替 eval(idName)。
6. 變量名與某 HTML 對象 id 相同的問題
(1)現(xiàn)有問題
在 MF 中,因為對象 id 不作為 HTML 對象的名稱,所以可以使用與 HTML 對象 id 相同的變量名,IE 中不能。
(2)解決方法
在聲明變量時,一律加上 var ,以避免歧義,這樣在 IE 中亦可正常運行。
此外,最好不要取與 HTML 對象 id 相同的變量名,以減少錯誤。
(3)其它
參見 問題4
7. event.x 與 event.y 問題
(1)現(xiàn)有問題
在IE 中,event 對象有 x, y 屬性,MF中沒有。
(2)解決方法
在MF中,與event.x 等效的是 event.pageX。但event.pageX IE中沒有。
故采用 event.clientX 代替 event.x。在IE 中也有這個變量。
event.clientX 與 event.pageX 有微妙的差別(當(dāng)整個頁面有滾動條的時候),不過大多數(shù)時候是等效的。
如果要完全一樣,可以稍麻煩些:
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
(3)其它
event.layerX 在 IE 與 MF 中都有,具體意義有無差別尚未試驗。
8. 關(guān)于frame
(1)現(xiàn)有問題
在 IE中 可以用window.testFrame取得該frame,mf中不行
(2)解決方法
在frame的使用方面mf和ie的最主要的區(qū)別是:
如果在frame標(biāo)簽中書寫了以下屬性:
<frame src=”xx.htm” id=”frameId” name=”frameName” />
那么ie可以通過id或者name訪問這個frame對應(yīng)的window對象
而mf只可以通過name來訪問這個frame對應(yīng)的window對象
例如如果上述frame標(biāo)簽寫在最上層的window里面的htm里面,那么可以這樣訪問
ie: window.top.frameId或者window.top.frameName來訪問這個window對象
mf: 只能這樣window.top.frameName來訪問這個window對象
另外,在mf和ie中都可以使用window.top.document.getElementById(“frameId”)來訪問frame標(biāo)簽
并且可以通過window.top.document.getElementById(“testFrame”).src = ‘xx.htm’來切換frame的內(nèi)容
也都可以通過window.top.frameName.location = ‘xx.htm’來切換frame的內(nèi)容
關(guān)于frame和window的描述可以參見bbs的‘window與frame’文章
以及/test/js/test_frame/目錄下面的測試
—-adun 2004.12.09修改
9. 在mf中,自己定義的屬性必須getAttribute()取得
10.在mf中沒有 parentElement parement.children 而用
parentNode parentNode.childNodes
childNodes的下標(biāo)的含義在IE和MF中不同,MF使用DOM規(guī)范,childNodes中會插入空白文本節(jié)點。
一般可以通過node.getElementsByTagName()來回避這個問題。
當(dāng)html中節(jié)點缺失時,IE和MF對parentNode的解釋不同,例如
<form>
<table>
<input/>
</table>
</form>
MF中input.parentNode的值為form, 而IE中input.parentNode的值為空節(jié)點
MF中節(jié)點沒有removeNode方法,必須使用如下方法 node.parentNode.removeChild(node)
11.const 問題
(1)現(xiàn)有問題:
在 IE 中不能使用 const 關(guān)鍵字。如 const constVar = 32; 在IE中這是語法錯誤。
(2)解決方法:
不使用 const ,以 var 代替。
12. body 對象
MF的body在body標(biāo)簽沒有被瀏覽器完全讀入之前就存在,而IE則必須在body完全被讀入之后才存在
13. url encoding
在js中如果書寫url就直接寫&不要寫&例如var url = ‘xx.jsp?objectName=xx&objectEvent=xxx’;
frm.action = url那么很有可能url不會被正常顯示以至于參數(shù)沒有正確的傳到服務(wù)器
一般會服務(wù)器報錯參數(shù)沒有找到
當(dāng)然如果是在tpl中例外,因為tpl中符合xml規(guī)范,要求&書寫為&
一般MF無法識別js中的&
14. nodeName 和 tagName 問題
(1)現(xiàn)有問題:
在MF中,所有節(jié)點均有 nodeName 值,但 textNode 沒有 tagName 值。在 IE 中,nodeName 的使用好象
有問題(具體情況沒有測試,但我的IE已經(jīng)死了好幾次)。
(2)解決方法:
使用 tagName,但應(yīng)檢測其是否為空。
15. 元素屬性
IE下 input.type屬性為只讀,但是MF下可以修改
16. document.getElementsByName() 和 document.all[name] 的問題
(1)現(xiàn)有問題:
在 IE 中,getElementsByName()、document.all[name] 均不能用來取得 P 元素(是否還有其它不能取的元素還不知道)。
]]>