JavaScript方法和技巧大全 更新日期：2006-09-03 20:42 網頁教學網這篇介紹JavaScript方面的日志，我在是Clang上看到的。作者介紹挺全面的，所以轉載過來讓感興趣的朋友看一下。呵呵有些時候你精通一門語言，但是會發現你其實整天在和其它語言打交道，也許你以為這些微不足道，不至于影響你的開發進度，但恰恰是這些你不重視的東西會浪費你很多時間，我一直以為我早在幾年前就已經精通JavaScript了，直到目前，我才越來越覺得JavaScript遠比我想象的復雜和強大，我開始崇拜它，就像崇拜所有OOP語言一樣趁著節日的空隙，把有關JavaScript的方法和技巧整理下，讓每個在為JavaScript而煩惱的人明白，JavaScript就這么回事！并希望JavaScript還可以成為你的朋友，讓你豁然開朗，在項目中更好的應用適合閱讀范圍：對JavaScript一無所知離精通只差一步之遙的人基礎知識：HTMLJavaScript就這么回事1：基礎知識 1 創建腳本塊1: 2: JavaScript code goes here3: 2 隱藏腳本代碼1: 2: 5: 在不支持JavaScript的瀏覽器中將不執行相關代碼3 瀏覽器不支持的時候顯示1: 2: Hello to the non-JavaScript browser.3: 4 鏈接外部腳本文件1: 5 注釋腳本1: / This is a comment2: document.write(“Hello”); / This is a comment3: /*4: All of this5: is a comment6: */ 6 輸出到瀏覽器1: document.write(“Hello”); 7 定義變量1: var myVariable = “some value”; 8 字符串相加1: var myString = “String1” + “String2”; 9 字符串搜索1: 2: 7: 10 字符串替換1: thisVar.replace(“Monday”,”Friday”); 11 格式化字串1: 2: !-3: var myVariable = “Hello there”;4: document.write(myVariable.big() + “”);5: document.write(myVariable.blink() + “”);6: document.write(myVariable.bold() + “”);7: document.write(myVariable.fixed() + “”);8: document.write(myVariable.fontcolor(“red”) + “”);9: document.write(myVariable.fontsize(“18pt”) + “”);10: document.write(myVariable.italics() + “”);11: document.write(myVariable.small() + “”);12: document.write(myVariable.strike() + “”);13: document.write(myVariable.sub() + “”);14: document.write(myVariable.sup() + “”);15: document.write(myVariable.toLowerCase() + “”);16: document.write(myVariable.toUpperCase() + “”);17: 18: var firstString = “My String”;19: var finalString = firstString.bold().toLowerCase().fontcolor(“red”);20: / -21: 12 創建數組1: 2: 11: 13 數組排序1: 2: 11: 14 分割字符串1: 2: 10: 15 彈出警告信息1: 2: 5: 16 彈出確認框1: 2: 5: 17 定義函數1: 2: 8: 18 調用JS函數1: Link text2: Link text 19 在頁面加載完成后執行函數1: 2: Body of the page3: 20 條件判斷1: 2: 7: 21 指定次數循環1: 2: !-3: var myArray = new Array(3);4: myArray0 = “Item 0”;5: myArray1 = “Item 1”;6: myArray2 = “Item 2”;7: for (i = 0; i myArray.length; i+) 8: document.write(myArrayi + “”);9: 10: / -11: 22 設定將來執行1: 2: 8: 23 定時執行函數1: 2: 9: 24 取消定時執行1: 2: 9: 25 在頁面卸載時候執行函數1: 2: Body of the page3: JavaScript就這么回事2：瀏覽器輸出 26 訪問document對象1: 2: var myURL = document.URL;3: window.alert(myURL);4: 27 動態輸出HTML1: 2: document.write(“Heres some information about this document:”);3: document.write(“”);4: document.write(“Referring Document: “ + document.referrer + “”);5: document.write(“Domain: “ + document.domain + “”);6: document.write(“URL: “ + document.URL + “”);7: document.write(“”);8: 28 輸出換行1: document.writeln(“a”);2: document.writeln(“b”); 29 輸出日期1: 2: var thisDate = new Date();3: document.write(thisDate.toString();4: 30 指定日期的時區1: 2: var myOffset = -2;3: var currentDate = new Date();4: var userOffset = currentDate.getTimezoneOffset()/60;5: var timeZoneDifference = userOffset - myOffset;6: currentDate.setHours(currentDate.getHours() + timeZoneDifference);7: document.write(“The time and date in Central Europe is: “ + currentDate.toLocaleString();8: 31 設置日期輸出格式1: 2: var thisDate = new Date();3: var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes();4: var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate();5: document.write(thisTimeString + “ on “ + thisDateString);6: 32 讀取URL參數1: 2: var urlParts = document.URL.split(“?”);3: var parameterParts = urlParts1.split(“&”);4: for (i = 0; i parameterParts.length; i+) 5: var pairParts = parameterPartsi.split(“=”);6: var pairName = pairParts0;7: var pairValue = pairParts1;8: document.write(pairName + “ ：“ +pairValue );9: 10: 你還以為HTML是無狀態的么？33 打開一個新的document對象1: 2: function newDocument() 3: document.open();4: document.write(“This is a New Document.”);5: document.close();6: 7: 34 頁面跳轉1: 2: window.location = “/”;3: 35 添加網頁加載進度窗口1: 2: 3: 4: var placeHolder = window.open(holder.html,placeholder,width=200,height=200);5: 6: The Main Page7: 8: 9: This is the main page10: 11: JavaScript就這么回事3：圖像 36 讀取圖像屬性1: 2: Width3: 37 動態加載圖像1: 2: myImage = new Image;3: myImage.src = “Tellers1.jpg”;4: 38 簡單的圖像替換1: 2: rollImage = new Image;3: rollImage.src = “rollImage1.jpg”;4: defaultImage = new Image;5: defaultImage.src = “image1.jpg”;6: 7: 9: 39 隨機顯示圖像1: 2: var imageList = new Array;3: imageList0 = “image1.jpg”;4: imageList1 = “image2.jpg”;5: imageList2 = “image3.jpg”;6: imageList3 = “image4.jpg”;7: var imageChoice = Math.floor(Math.random() * imageList.length);8: document.write();9: 40 函數實現的圖像替換1: 2: var source = 0;3: var replacement = 1;4: function createRollOver(originalImage,replacementImage) 5: var imageArray = new Array;6: imageArraysource = new Image;7: imageArraysource.src = originalImage;8: imageArrayreplacement = new Image;9: imageArrayreplacement.src = replacementImage;10: return imageArray;11: 12: var rollImage1 = createRollOver(“image1.jpg”,”rollImage1.jpg”);13: 14: 16: 17: 41 創建幻燈片1: 2: var imageList = new Array;3: imageList0 = new Image;4: imageList0.src = “image1.jpg”;5: imageList1 = new Image;6: imageList1.src = “image2.jpg”;7: imageList2 = new Image;8: imageList2.src = “image3.jpg”;9: imageList3 = new Image;10: imageList3.src = “image4.jpg”;11: function slideShow(imageNumber) 12: document.slideShow.src = imageListimageNumber.src;13: imageNumber += 1;14: if (imageNumber imageList.length) 15: window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);16: 17: 18: 19: 20: 21: 42 隨機廣告圖片1: 2: var imageList = new Array;3: imageList0 = “image1.jpg”;4: imageList1 = “image2.jpg”;5: imageList2 = “image3.jpg”;6: imageList3 = “image4.jpg”;7: var urlList = new Array;8: urlList0 = “http:/some.host/”;9: urlList1 = “http:/another.host/”;10: urlList2 = “http:/somewhere.else/”;11: urlList3 = “http:/right.here/”;12: var imageChoice = Math.floor(Math.random() * imageList.length);13: document.write();14: JavaScript就這么回事4：表單 還是先繼續寫完JS就這么回事系列吧43 表單構成1: 2: 3: 4: First Choice5: Second Choice6: 7: 8: 9: 44 訪問表單中的文本框內容1: 2: 3: 4: Check Text Field 45 動態復制文本框內容1: 2: Enter some Text: 3: Copy Text: 4: 5: Copy Text Field 46 偵測文本框的變化1: 2: Enter some Text: 3: 47 訪問選中的Select1: 2: 3: 14: 25: 36: 7: 8: Check Selection List 48 動態增加Select項1: 2: 3: 14: 25: 6: 7: 8: document.myForm.mySelect.length+;9: document.myForm.mySelect.optionsdocument.myForm.mySelect.length - 1.text = “3”;10: document.myForm.mySelect.optionsdocument.myForm.mySelect.length - 1.value = “Third Choice”;11: 49 驗證表單字段1: 2: function checkField(field) 3: if (field.value = “”) 4: window.alert(“You must enter a value in the field”);5: field.focus();6: 7: 8: 9: 10: Text Field: 11: 12: 50 驗證Select項1: function checkList(selection) 2: if (selection.length = 0) 3: window.alert(“You must make a selection from the list.”);4: return false;5: 6: return true;7: 51 動態改變表單的action1: 2: Username: 3: Password: 4: 5: 6: 7: 52 使用圖像按鈕1: 2: Username: 3: Password: 4: 5: 6: 53 表單數據的加密1: 2: !-3: function encrypt(item) 4: var newItem = ;5: for (i=0; i item.length; i+) 6: newItem += item.charCodeAt(i) + .;7: 8: return newItem;9: 10: function encryptForm(myForm) 11: for (i=0; i 17: 18: 19: Enter Some Text: 20: JavaScript就這么回事5：窗口和框架 54 改變瀏覽器狀態欄文字提示1: 2: window.status = “A new status message”;3: 55 彈出確認提示框1: 2: var userChoice = window.confirm(“Click OK or Cancel”);3: if (userChoice) 4: document.write(“You chose OK”);5: else 6: document.write(“You chose Cancel”);7: 8: 56 提示輸入1: 2: var userName = mpt(“Please Enter Your Name”,”Enter Your Name Here”);3: document.write(“Your Name is “ + userName);4: 57 打開一個新窗口1: /打開一個名稱為myNewWindow的瀏覽器新窗口2: 3: window.open(“/”,”myNewWindow”);4: 58 設置新窗口的大小1: 2: window.open(“/”,”myNewWindow”,height=300,width=300);3: 59 設置新窗口的位置1: 2: window.open(“/”,”myNewWindow”,height=300,width=300,left=200,screenX=200,top=100,screenY=100);3: 60 是否顯示工具欄和滾動欄1: 2: window.open(“http: 經過設置相關參數后的彈出窗口 只要再往上面的代碼中設置一下參數就可以了。 我們來定制這個彈出的窗口的外觀，尺寸大小，彈出的位置以適應的具體情況。 參數解釋： window.open 彈出新窗口的命令； page.html 彈出窗口的文件名； newwindow 彈出窗口的名字（不是文件名），非必須，可用空代替； height=100 窗口高度；width=400 窗口寬度； top=0 窗口距離屏幕上方的象素值； left=0 窗口距離屏幕左側的象素值； toolbar=no 是否顯示工具欄，yes為顯示； menubar，scrollbars 表示菜單欄和滾動欄。 resizable=no 是否允許改變窗口大小，yes為允許； location=no 是否顯示地址欄，yes為允許； status=no 是否顯示狀態欄內的信息，yes為允許； js腳本結束 61 是否可以縮放新窗口的大小1: 2: window.open(/ , myNewWindow, resizable=yes ); 62 加載一個新的文檔到當前窗口1: Open New Document 63 設置頁面的滾動位置1: 2: if (document.all) /如果是IE瀏覽器則使用scrollTop