JavaScript方法和技巧大全.doc

JavaScript方法和技巧大全 更新日期：2006-09-03 20:42 網(wǎng)頁(yè)教學(xué)網(wǎng)這篇介紹JavaScript方面的日志，我在是Clang上看到的。作者介紹挺全面的，所以轉(zhuǎn)載過(guò)來(lái)讓感興趣的朋友看一下。呵呵有些時(shí)候你精通一門(mén)語(yǔ)言，但是會(huì)發(fā)現(xiàn)你其實(shí)整天在和其它語(yǔ)言打交道，也許你以為這些微不足道，不至于影響你的開(kāi)發(fā)進(jìn)度，但恰恰是這些你不重視的東西會(huì)浪費(fèi)你很多時(shí)間，我一直以為我早在幾年前就已經(jīng)精通JavaScript了，直到目前，我才越來(lái)越覺(jué)得JavaScript遠(yuǎn)比我想象的復(fù)雜和強(qiáng)大，我開(kāi)始崇拜它，就像崇拜所有OOP語(yǔ)言一樣趁著節(jié)日的空隙，把有關(guān)JavaScript的方法和技巧整理下，讓每個(gè)在為JavaScript而煩惱的人明白，JavaScript就這么回事！并希望JavaScript還可以成為你的朋友，讓你豁然開(kāi)朗，在項(xiàng)目中更好的應(yīng)用適合閱讀范圍：對(duì)JavaScript一無(wú)所知離精通只差一步之遙的人基礎(chǔ)知識(shí)：HTMLJavaScript就這么回事1：基礎(chǔ)知識(shí) 1 創(chuàng)建腳本塊1: 2: JavaScript code goes here3: 2 隱藏腳本代碼1: 2: 5: 在不支持JavaScript的瀏覽器中將不執(zhí)行相關(guān)代碼3 瀏覽器不支持的時(shí)候顯示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 創(chuàng)建數(shù)組1: 2: 11: 13 數(shù)組排序1: 2: 11: 14 分割字符串1: 2: 10: 15 彈出警告信息1: 2: 5: 16 彈出確認(rèn)框1: 2: 5: 17 定義函數(shù)1: 2: 8: 18 調(diào)用JS函數(shù)1: Link text2: Link text 19 在頁(yè)面加載完成后執(zhí)行函數(shù)1: 2: Body of the page3: 20 條件判斷1: 2: 7: 21 指定次數(shù)循環(huán)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 設(shè)定將來(lái)執(zhí)行1: 2: 8: 23 定時(shí)執(zhí)行函數(shù)1: 2: 9: 24 取消定時(shí)執(zhí)行1: 2: 9: 25 在頁(yè)面卸載時(shí)候執(zhí)行函數(shù)1: 2: Body of the page3: JavaScript就這么回事2：瀏覽器輸出 26 訪問(wèn)document對(duì)象1: 2: var myURL = document.URL;3: window.alert(myURL);4: 27 動(dòng)態(tài)輸出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 指定日期的時(shí)區(qū)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 設(shè)置日期輸出格式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參數(shù)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是無(wú)狀態(tài)的么？33 打開(kāi)一個(gè)新的document對(duì)象1: 2: function newDocument() 3: document.open();4: document.write(“This is a New Document.”);5: document.close();6: 7: 34 頁(yè)面跳轉(zhuǎn)1: 2: window.location = “/”;3: 35 添加網(wǎng)頁(yè)加載進(jìn)度窗口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 動(dòng)態(tài)加載圖像1: 2: myImage = new Image;3: myImage.src = “Tellers1.jpg”;4: 38 簡(jiǎn)單的圖像替換1: 2: rollImage = new Image;3: rollImage.src = “rollImage1.jpg”;4: defaultImage = new Image;5: defaultImage.src = “image1.jpg”;6: 7: 9: 39 隨機(jī)顯示圖像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 函數(shù)實(shí)現(xiàn)的圖像替換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 創(chuàng)建幻燈片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 隨機(jī)廣告圖片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：表單 還是先繼續(xù)寫(xiě)完JS就這么回事系列吧43 表單構(gòu)成1: 2: 3: 4: First Choice5: Second Choice6: 7: 8: 9: 44 訪問(wèn)表單中的文本框內(nèi)容1: 2: 3: 4: Check Text Field 45 動(dòng)態(tài)復(fù)制文本框內(nèi)容1: 2: Enter some Text: 3: Copy Text: 4: 5: Copy Text Field 46 偵測(cè)文本框的變化1: 2: Enter some Text: 3: 47 訪問(wèn)選中的Select1: 2: 3: 14: 25: 36: 7: 8: Check Selection List 48 動(dòng)態(tài)增加Select項(xiàng)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 驗(yàn)證表單字段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 驗(yàn)證Select項(xiàng)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 動(dòng)態(tài)改變表單的action1: 2: Username: 3: Password: 4: 5: 6: 7: 52 使用圖像按鈕1: 2: Username: 3: Password: 4: 5: 6: 53 表單數(shù)據(jù)的加密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 改變?yōu)g覽器狀態(tài)欄文字提示1: 2: window.status = “A new status message”;3: 55 彈出確認(rèn)提示框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 打開(kāi)一個(gè)新窗口1: /打開(kāi)一個(gè)名稱為myNewWindow的瀏覽器新窗口2: 3: window.open(“/”,”myNewWindow”);4: 58 設(shè)置新窗口的大小1: 2: window.open(“/”,”myNewWindow”,height=300,width=300);3: 59 設(shè)置新窗口的位置1: 2: window.open(“/”,”myNewWindow”,height=300,width=300,left=200,screenX=200,top=100,screenY=100);3: 60 是否顯示工具欄和滾動(dòng)欄1: 2: window.open(“http: 經(jīng)過(guò)設(shè)置相關(guān)參數(shù)后的彈出窗口 只要再往上面的代碼中設(shè)置一下參數(shù)就可以了。 我們來(lái)定制這個(gè)彈出的窗口的外觀，尺寸大小，彈出的位置以適應(yīng)的具體情況。 參數(shù)解釋： window.open 彈出新窗口的命令； page.html 彈出窗口的文件名； newwindow 彈出窗口的名字（不是文件名），非必須，可用空代替； height=100 窗口高度；width=400 窗口寬度； top=0 窗口距離屏幕上方的象素值； left=0 窗口距離屏幕左側(cè)的象素值； toolbar=no 是否顯示工具欄，yes為顯示； menubar，scrollbars 表示菜單欄和滾動(dòng)欄。 resizable=no 是否允許改變窗口大小，yes為允許； location=no 是否顯示地址欄，yes為允許； status=no 是否顯示狀態(tài)欄內(nèi)的信息，yes為允許； js腳本結(jié)束 61 是否可以縮放新窗口的大小1: 2: window.open(/ , myNewWindow, resizable=yes ); 62 加載一個(gè)新的文檔到當(dāng)前窗口1: Open New Document 63 設(shè)置頁(yè)面的滾動(dòng)位置1: 2: if (document.all) /如果是IE瀏覽器則使用scrollTop