js基礎(chǔ):JavaScript實現(xiàn)功能全集
當(dāng)前位置：點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
有些時候你精通一門語言，但是會發(fā)現(xiàn)你其實整天在和其它語言打交道，也許你以為這些微不足道，不至于影響你的開發(fā)進度，但恰恰是這些你不重視的東西會浪費你很多時間，我一直以為我早在幾年前就已經(jīng)精通JavaScript了，直到目前，我才越來越覺得JavaScript遠比我想象的復(fù)雜和強大，我開始崇拜它，就像崇拜所有OOP語言一樣～ 趁著節(jié)日的空隙，把有關(guān)JavaScript的方法和技巧整理下，讓每個在為JavaScript而煩惱的人明白，JavaScript就這么回事！并希望JavaScript還可以成為你的朋友，讓你豁然開朗，在項目中更好的應(yīng)用～ 適合閱讀范圍：對JavaScript一無所知～離精通只差一步之遙的人 JavaScript就這么回事1：基礎(chǔ)知識 1 創(chuàng)建腳本塊 <script language="JavaScript"> JavaScript code goes here </script> 2 隱藏腳本代碼 <script language="JavaScript"> <!-- document.write("Hello"); // --> </script> 3 在不支持JavaScript的瀏覽器中將不執(zhí)行相關(guān)代碼,瀏覽器不支持的時候顯示 <noscript> Hello to the non-JavaScript browser. </noscript> 4 鏈接外部腳本文件 <script language="JavaScript" src="/filename.js"></script> 5 注釋腳本 // This is a comment document.write("Hello"); // This is a comment /* All of this is a comment */ 6 輸出到瀏覽器 document.write("<strong>Hello</strong>"); 7 定義變量 var myVariable = "some value"; 8 字符串相加 var myString = "String1" + "String2"; 9 字符串搜索 <script language="JavaScript"> <!-- var myVariable = "Hello there"; var therePlace = myVariable.search("there"); document.write(therePlace); // --> </script> 10 字符串替換 thisVar.replace("Monday","Friday"); 11 格式化字串 <script language="JavaScript"> <!-- var myVariable = "Hello there"; document.write(myVariable.big() + "<br>"); document.write(myVariable.blink() + "<br>"); document.write(myVariable.bold() + "<br>"); document.write(myVariable.fixed() + "<br>"); document.write(myVariable.fontcolor("red") + "<br>"); document.write(myVariable.fontsize("18pt") + "<br>"); document.write(myVariable.italics() + "<br>"); document.write(myVariable.small() + "<br>"); document.write(myVariable.strike() + "<br>"); document.write(myVariable.sub() + "<br>"); document.write(myVariable.sup() + "<br>"); document.write(myVariable.toLowerCase() + "<br>"); document.write(myVariable.toUpperCase() + "<br>"); var firstString = "My String"; var finalString = firstString.bold().toLowerCase().fontcolor("red"); // --> </script> 12 創(chuàng)建數(shù)組 <script language="JavaScript"> <!-- var myArray = new Array(4); myArray[0] = "First Entry"; myArray[1] = "Second Entry"; myArray[2] = "Third Entry"; myArray[3] = "Fourth Entry"; var anotherArray = new Array("First Entry","Second Entry","Third Entry","Fourth Entry"); // --> </script> 13 數(shù)組排序 <script language="JavaScript"> <!-- var myArray = new Array(4); myArray[0] = "z"; myArray[1] = "c"; myArray[2] = "d"; myArray[3] = "a"; document.write(myArray.sort()); // --> </script> 14 分割字符串 <script language="JavaScript"> <!-- var myVariable = "a,b,c,d"; var stringArray = myVariable.split(","); document.write(stringArray[0]); document.write(stringArray[1]); document.write(stringArray[2]); document.write(stringArray[3]); // --> </script> 15 彈出警告信息 <script language="JavaScript"> <!-- window.alert("Hello"); // --> </script> 16 彈出確認框 <script language="JavaScript"> <!-- var result = window.confirm("Click OK to continue"); // --> </script> 17 定義函數(shù) <script language="JavaScript"> <!-- function multiple(number1,number2) { var result = number1 * number2; return result; } // --> </script> 18 調(diào)用JS函數(shù) <a href="#" onClick="functionName()">Link text</a> <a href="javascript:functionName()">Link text</a> 19 在頁面加載完成后執(zhí)行函數(shù) <body onLoad="functionName();"> Body of the page </body> 20 條件判斷 <script> <!-- var userChoice = window.confirm("Choose OK or Cancel"); var result = (userChoice == true) ? "OK" : "Cancel"; document.write(result); // --> </script> 21 指定次數(shù)循環(huán) <script> <!-- var myArray = new Array(3); myArray[0] = "Item 0"; myArray[1] = "Item 1"; myArray[2] = "Item 2"; for (i = 0; i < myArray.length; i++) { document.write(myArray + "<br>"); } // --> </script> 22 設(shè)定將來執(zhí)行,延時5秒 <script> <!-- function hello() { window.alert("Hello"); } window.setTimeout("hello()",5000); // --> </script> 23 定時執(zhí)行函數(shù) <script> <!-- function hello() { window.alert("Hello"); window.setTimeout("hello()",5000); } hello(); // --> </script> 24 取消定時執(zhí)行 <script> <!-- function hello() { window.alert("Hello"); } var myTimeout = window.setTimeout("hello()",5000); window.clearTimeout(myTimeout); // --> </script> 25 在頁面卸載時候執(zhí)行函數(shù) <body onUnload="functionName();"> Body of the page </body> avaScript就這么回事2：瀏覽器輸出 26 訪問document對象 <script language="JavaScript"> var myURL = document.URL; window.alert(myURL); </script> 27 動態(tài)輸出HTML <script language="JavaScript"> document.write("<p>Here's some information about this document:</p>"); document.write("<ul>"); document.write("<li>Referring Document: " + document.referrer + "</li>"); document.write("<li>Domain: " + document.domain + "</li>"); document.write("<li>URL: " + document.URL + "</li>"); document.write("</ul>"); </script> 28 輸出換行 document.writeln("<strong>a</strong>"); document.writeln("b"); 29 輸出日期 <script language="JavaScript"> var thisDate = new Date(); document.write(thisDate.toString()); </script> 30 指定日期的時區(qū) <script language="JavaScript"> var myOffset = -2; var currentDate = new Date(); var userOffset = currentDate.getTimezoneOffset()/60; var timeZoneDifference = userOffset - myOffset; currentDate.setHours(currentDate.getHours() + timeZoneDifference); document.write("The time and date in Central Europe is: " + currentDate.toLocaleString()); </script> 31 設(shè)置日期輸出格式 <script language="JavaScript"> var thisDate = new Date(); var thisTimeString = thisDate.getHours() + ":" + thisDate.getMinutes(); var thisDateString = thisDate.getFullYear() + "/" + thisDate.getMonth() + "/" + thisDate.getDate(); document.write(thisTimeString + " on " + thisDateString); </script> 32 讀取URL參數(shù)，你還以為HTML是無狀態(tài)的么？ <script language="JavaScript"> var urlParts = document.URL.split("?"); var parameterParts = urlParts[1].split("&"); for (i = 0; i < parameterParts.length; i++) { var pairParts = parameterParts.split("="); var pairName = pairParts[0]; var pairValue = pairParts[1]; document.write(pairName + " ：" +pairValue ); } </script> 33 打開一個新的document對象 <script language="JavaScript"> function newDocument() { document.open(); document.write("<p>This is a New Document.</p>"); document.close(); } </script> 34 頁面跳轉(zhuǎn) <script language="JavaScript"> window.location = "</script> 35 添加網(wǎng)頁加載進度窗口 <html> <head> <script language='javaScript'> var placeHolder = window.open('holder.html','placeholder','width=200,height=200'); </script> <title>The Main Page</title> </head> <body onLoad='placeHolder.close()'> <p>This is the main page</p> </body> </html> avaScript就這么回事3：圖像 36 讀取圖像屬性 <img src="/"image1.jpg"" name="myImage"> <a href="#" onClick="window.alert(document.myImage.width)">Width</a> 37 動態(tài)加載圖像 <script language="JavaScript"> myImage = new Image; myImage.src = "Tellers1.jpg"; </script> 38 簡單的圖像替換 <script language="JavaScript"> rollImage = new Image; rollImage.src = "rollImage1.jpg"; defaultImage = new Image; defaultImage.src = "image1.jpg"; </script> <a href="/"myUrl"" onMouseOver="document.myImage.src = rollImage.src;" onMouseOut="document.myImage.src = defaultImage.src;"> <img src="/"image1.jpg"" name="myImage" width=100 height=100 border=0> 39 隨機顯示圖像 <script language="JavaScript"> var imageList = new Array; imageList[0] = "image1.jpg"; imageList[1] = "image2.jpg"; imageList[2] = "image3.jpg"; imageList[3] = "image4.jpg"; var imageChoice = Math.floor(Math.random() * imageList.length); document.write(‘<img src="’ + imageList[imageChoice] + ‘">’); </script> 40 函數(shù)實現(xiàn)的圖像替換 <script language="JavaScript"> var source = 0; var replacement = 1; function createRollOver(originalImage,replacementImage) { var imageArray = new Array; imageArray[source] = new Image; imageArray[source].src = originalImage; imageArray[replacement] = new Image; imageArray[replacement].src = replacementImage; return imageArray; } var rollImage1 = createRollOver("image1.jpg","rollImage1.jpg"); </script> <a href="#" onMouseOver="document.myImage1.src = rollImage1[replacement].src;" onMouseOut="document.myImage1.src = rollImage1[source].src;"> <img src="/"image1.jpg"" width=100 name="myImage1" border=0> </a> 41 創(chuàng)建幻燈片 <script language="JavaScript"> var imageList = new Array; imageList[0] = new Image; imageList[0].src = "image1.jpg"; imageList[1] = new Image; imageList[1].src = "image2.jpg"; imageList[2] = new Image; imageList[2].src = "image3.jpg"; imageList[3] = new Image; imageList[3].src = "image4.jpg"; function slideShow(imageNumber) { document.slideShow.src = imageList[imageNumber].src; imageNumber += 1; if (imageNumber < imageList.length) { window.setTimeout("slideShow(" + imageNumber + ")",3000); } } </script> </head> 20: <body onLoad="slideShow(0)"> 2<img src="/"image1.jpg"" width=100 name="slideShow"> 42 隨機廣告圖片 <script language="JavaScript"> var imageList = new Array; imageList[0] = "image1.jpg"; imageList[1] = "image2.jpg"; imageList[2] = "image3.jpg"; imageList[3] = "image4.jpg"; var urlList = new Array; urlList[0] = "urlList[1] = "urlList[2] = "urlList[3] = "var imageChoice = Math.floor(Math.random() * imageList.length); document.write(‘<a href="’ + urlList[imageChoice] + ‘"><img src="’ + imageList[imageChoice] + ‘"></a>’); </script> avaScript就這么回事4：表單 43 表單構(gòu)成 <form method="post" action="target.html" name="thisForm"> <input type="text" name="myText"> <select name="mySelect"> <option value="1">First Choice</option> <option value="2">Second Choice</option> </select> <br> <input type="submit" value="Submit Me"> </form> 44 訪問表單中的文本框內(nèi)容 <form name="myForm"> <input type="text" name="myText"> </form> <a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a> 45 動態(tài)復(fù)制文本框內(nèi)容 <form name="myForm"> Enter some Text: <input type="text" name="myText"><br> Copy Text: <input type="text" name="copyText"> </form> <a href="#" onClick="document.myForm.copyText.value = document.myForm.myText.value;">Copy Text Field</a> 46 偵測文本框的變化 <form name="myForm"> Enter some Text: <input type="text" name="myText" onChange="alert(this.value);"> </form> 47 訪問選中的Select <form name="myForm"> <select name="mySelect"> <option value="First Choice">1</option> <option value="Second Choice">2</option> <option value="Third Choice">3</option> </select> </form> <a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a> 48 動態(tài)增加Select項 <form name="myForm"> <select name="mySelect"> <option value="First Choice">1</option> <option value="Second Choice">2</option> </select> </form> <script language="JavaScript"> document.myForm.mySelect.length++; document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = "3"; document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = "Third Choice"; </script> 49 驗證表單字段 <script language="JavaScript"> function checkField(field) { if (field.value == "") { window.alert("You must enter a value in the field"); field.focus(); } } </script> <form name="myForm" action="target.html"> Text Field: <input type="text" name="myField"onBlur="checkField(this)"> <br><input type="submit"> </form> 50 驗證Select項 function checkList(selection) { if (selection.length == 0) { window.alert("You must make a selection from the list."); return false; } return true; } 51 動態(tài)改變表單的action <form name="myForm" action="login.html"> Username: <input type="text" name="username"><br> Password: <input type="password" name="password"><br> <input type="button" value="Login" onClick="this.form.submit();"> <input type="button" value="Register" onClick="this.form.action = ‘register.html’; this.form.submit();"> <input type="button" value="Retrieve Password" onClick="this.form.action = ‘password.html’; this.form.submit();"> </form> 52 使用圖像按鈕 <form name="myForm" action="login.html"> Username: <input type="text" name="username"><br> Password: <input type="password"name="password"><br> <input type="image" src="/"login.gif"" value="Login"> </form> 53 表單數(shù)據(jù)的加密 <SCRIPT LANGUAGE='JavaScript'> <!-- function encrypt(item) { var newItem = ''; for (i=0; i < item.length; i++) { newItem += item.charCodeAt(i) + '.'; } return newItem; } function encryptForm(myForm) { for (i=0; i < myForm.elements.length; i++) { myForm.elements.value = encrypt(myForm.elements.value); } } //--> </SCRIPT> <form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'> Enter Some Text: <input type=text name=myField><input type=submit> 20: </form> JavaScript就這么回事5：窗口和框架 54 改變?yōu)g覽器狀態(tài)欄文字提示 <script language="JavaScript"> window.status = "A new status message"; </script> 55 彈出確認提示框 <script language="JavaScript"> var userChoice = window.confirm("Click OK or Cancel"); if (userChoice) { document.write("You chose OK"); } else { document.write("You chose Cancel"); } </script> 56 提示輸入 <script language="JavaScript"> var userName = window.prompt("Please Enter Your Name","Enter Your Name Here"); document.write("Your Name is " + userName); </script> 57 打開一個新窗口 58 設(shè)置新窗口的大小 <script language="JavaScript"> window.open("); </script> 59 設(shè)置新窗口的位置 <script language="JavaScript"> window.open("); </script> 60 是否顯示工具欄和滾動欄 <script language="JavaScript"> window.open("http: 61 是否可以縮放新窗口的大小 <script language="JavaScript"> window.open('http://www.liu21st.com/' , 'myNewWindow', 'resizable=yes' );</script> 62 加載一個新的文檔到當(dāng)前窗口 <a href='#' onClick='document.location = '125a.html';' >Open New Document</a> 63 設(shè)置頁面的滾動位置 <script language="JavaScript"> if (document.all) { //如果是IE瀏覽器則使用scrollTop屬性 document.body.scrollTop = 200; } else { //如果是NetScape瀏覽器則使用pageYOffset屬性 window.pageYOffset = 200; }</script> 64 在IE中打開全屏窗口 <a href='#' onClick="window.open('http://www.juxta.com/','newWindow','fullScreen=yes');">Open a full-screen window</a> 65 新窗口和父窗口的操作 <script language="JavaScript"> //定義新窗口 var newWindow = window.open("128a.html","newWindow"); newWindow.close(); //在父窗口中關(guān)閉打開的新窗口 </script> 在新窗口中關(guān)閉父窗口 window.opener.close() 66 往新窗口中寫內(nèi)容 <script language="JavaScript"> var newWindow = window.open("","newWindow"); newWindow.document.open(); newWindow.document.write("This is a new window"); newWIndow.document.close(); </script> 67 加載頁面到框架頁面 <frameset cols="50%,*"> <frame name="frame1" src="/"135a.html""> <frame name="frame2" src="/"about:blank""> </frameset> 在frame1中加載frame2中的頁面 parent.frame2.document.location = "135b.html"; 68 在框架頁面之間共享腳本 如果在frame1中html文件中有個腳本 function doAlert() { window.alert("Frame 1 is loaded"); } 那么在frame2中可以如此調(diào)用該方法 <body onLoad="parent.frame1.doAlert();"> This is frame 2. </body> 69 數(shù)據(jù)公用 可以在框架頁面定義數(shù)據(jù)項，使得該數(shù)據(jù)可以被多個框架中的頁面公用 <script language="JavaScript"> var persistentVariable = "This is a persistent value"; </script> <frameset cols="50%,*"> <frame name="frame1" src="/"138a.html""> <frame name="frame2" src="/"138b.html""> </frameset> 這樣在frame1和frame2中都可以使用變量persistentVariable 70 框架代碼庫 根據(jù)以上的一些思路，我們可以使用一個隱藏的框架頁面來作為整個框架集的代碼庫 <frameset cols="0,50%,*">
<frame name="codeFrame" src="/"140code.html""> <frame name="frame1" src="/"140a.html""> <frame name="frame2" src="/"140b.html""> </frameset> 該文章在 2010/8/18 10:25:50 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
