JavaScript方法和技巧大全

上传人：7*** IP属地：湖北上传时间：2022-03-05 格式：DOC 页数：17 大小：34KB 积分：20 举报 版权申诉

已阅读5页，还剩12页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、JavaScript方法和技巧大全来源：适合阅读范围：对JavaScript一无所知离精通只差一步之遥的人基础知识：HTMLJavaScript就这么回事1：基础知识 1 创建脚本块1: <script language=”JavaScript”>2: JavaScript code goes here3: </script> 2 隐藏脚本代码1: <script language=”JavaScript”>2: <!-3: document.write(“Hello”);4: / ->5: </script> 在不支持J

2、avaScript的浏览器中将不执行相关代码3 浏览器不支持的时候显示1: <noscript>2: Hello to the non-JavaScript browser.3: </noscript> 4 链接外部脚本文件1: <script language=”JavaScript” src="/”filename.js"”></script> 5 注释脚本1: / This is a comment2: document.write(“Hello”); / This is a comment3: /*4: A

3、ll of this5: is a comment6: */ 6 输出到浏览器1: document.write(“<strong>Hello</strong>”); 7 定义变量1: var myVariable = “some value”; 8 字符串相加1: var myString = “String1” + “String2”; 9 字符串搜索1: <script language=”JavaScript”>2: <!-3: var myVariable = “Hello there”;4:

4、var therePlace = myVariable.search(“there”);5: document.write(therePlace);6: / ->7: </script> 10 字符串替换1: thisVar.replace(“Monday”,”Friday”); 11 格式化字串1: <script language=”JavaScript”>2: <!-3: var myVariable = “Hello there”;4: document.write(myVariable.big() + “<br>”);5:

5、document.write(myVariable.blink() + “<br>”);6: document.write(myVariable.bold() + “<br>”);7: document.write(myVariable.fixed() + “<br>”);8: document.write(myVariable.fontcolor(“red”) + “<br>”);9: document.write(myVariable.fontsize(“18pt”) + “<br>”);10: document.write(my

6、Variable.italics() + “<br>”);11: document.write(myVariable.small() + “<br>”);12: document.write(myVariable.strike() + “<br>”);13: document.write(myVariable.sub() + “<br>”);14: document.write(myVariable.sup() + “<br>”);15: document.write(myVariable.toLowerCase() + “<b

7、r>”);16: document.write(myVariable.toUpperCase() + “<br>”);17: 18: var firstString = “My String”;19: var finalString = firstString.bold().toLowerCase().fontcolor(“red”);20: / ->21: </script> 12 创建数组1: <script language=”JavaScript”>2: <!-3: var myArray = new Array(5);

8、4: myArray0 = “First Entry”;5: myArray1 = “Second Entry”;6: myArray2 = “Third Entry”;7: myArray3 = “Fourth Entry”;8: myArray4 = “Fifth Entry”;9: var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);10: / ->11: </script> 13 数组排序1: <sc

9、ript language=”JavaScript”>2: <!-3: var myArray = new Array(5);4: myArray0 = “z”;5: myArray1 = “c”;6: myArray2 = “d”;7: myArray3 = “a”;8: myArray4 = “q”;9: document.write(myArray.sort();10: / ->11: </script> 14 分割字符串1: <script language=”JavaScript”>2: <!-3: var myVariab

10、le = “a,b,c,d”;4: var stringArray = myVariable.split(“,”);5: document.write(stringArray0);6: document.write(stringArray1);7: document.write(stringArray2);8: document.write(stringArray3);9: / ->10: </script> 15 弹出警告信息1: <script language=”JavaScript”>2: <!-3: window.alert(“Hell

11、o”);4: / ->5: </script> 16 弹出确认框1: <script language=”JavaScript”>2: <!-3: var result = window.confirm(“Click OK to continue”);4: / ->5: </script> 17 定义函数1: <script language=”JavaScript”>2: <!-3: function multiple(number1,number2) 4: var result = number

12、1 * number2;5: return result;6: 7: / ->8: </script> 18 调用JS函数1: <a href=”#” onClick=”functionName()”>Link text</a>2: <a href="/”javascript:functionName"()”>Link text</a> 19 在页面加载完成后执行函数1: <body onLoad=”functionName();”>2: Body of the page3

13、: </body> 20 条件判断1: <script>2: <!-3: var userChoice = window.confirm(“Choose OK or Cancel”);4: var result = (userChoice = true) ? “OK” : “Cancel”;5: document.write(result);6: / ->7: </script> 21 指定次数循环1: <script>2: <!-3: var myArray = new Array(3);4: myArray0 =

14、 “Item 0”;5: myArray1 = “Item 1”;6: myArray2 = “Item 2”;7: for (i = 0; i < myArray.length; i+) 8: document.write(myArrayi + “<br>”);9: 10: / ->11: </script> 22 设定将来执行1: <script>2: <!-3: function hello() 4: window.alert(“Hello”);5: 6: window.setTimeout(“hello()”,5000)

15、;7: / ->8: </script> 23 定时执行函数1: <script>2: <!-3: function hello() 4: window.alert(“Hello”);5: window.setTimeout(“hello()”,5000);6: 7: window.setTimeout(“hello()”,5000);8: / ->9: </script> 24 取消定时执行1: <script>2: <!-3: function hello() 4: window.alert(“

16、Hello”);5: 6: var myTimeout = window.setTimeout(“hello()”,5000);7: window.clearTimeout(myTimeout);8: / ->9: </script> 25 在页面卸载时候执行函数1: <body onUnload=”functionName();”>2: Body of the page3: </body> JavaScript就这么回事2：浏览器输出 26 访问document对象1: <script language=”JavaScript”&g

17、t;2: var myURL = document.URL;3: window.alert(myURL);4: </script> 27 动态输出HTML1: <script language=”JavaScript”>2: document.write(“<p>Heres some information about this document:</p>”);3: document.write(“<ul>”);4: document.write(“<li>Referring Document: “ + doc

18、ument.referrer + “</li>”);5: document.write(“<li>Domain: “ + document.domain + “</li>”);6: document.write(“<li>URL: “ + document.URL + “</li>”);7: document.write(“</ul>”);8: </script> 28 输出换行1: document.writeln(“<strong>a</strong>”);2: document.w

19、riteln(“b”); 29 输出日期1: <script language=”JavaScript”>2: var thisDate = new Date();3: document.write(thisDate.toString();4: </script> 30 指定日期的时区1: <script language=”JavaScript”>2: var myOffset = -2;3: var currentDate = new Date();4: var userOffset = currentDate.getTimezo

20、neOffset()/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: </script> 31 设置日期输出格式1: <script language=”JavaScript”>2: var

21、 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: </script> 32 读取URL参数你还以为HTML是无状态

22、的么？33 打开一个新的document对象1: <script language=”JavaScript”>2: function newDocument() 3: document.open();4: document.write(“<p>This is a New Document.</p>”);5: document.close();6: 7: </script> 34 页面跳转 35 添加网页加载进度窗口1: <html>2: <head>3: <script language=

23、9;javaScript'>4: var placeHolder = window.open('holder.html','placeholder','width=200,height=200');5: </script>6: <title>The Main Page</title>7: </head>8: <body onLoad='placeHolder.close()'>9: <p>This is the main page</p&g

24、t;10: </body>11: </html> JavaScript就这么回事3：图像 36 读取图像属性37 动态加载图像1: <script language=”JavaScript”>2: myImage = new Image;3: myImage.src = “Tellers1.jpg”;4: </script> 38 简单的图像替换39 随机显示图像1: <script language=”JavaScript”>2: var imageList = new Array;3: imageList0

25、 = “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(<img src=” + imageListimageChoice + “>);9: </script> 40 函数实现的图像替换41 创建幻灯片42 随机广告图片1: <script langu

26、age=”JavaScript”>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/”;

27、11: urlList3 = “http:/right.here/”;12: var imageChoice = Math.floor(Math.random() * imageList.length);13: document.write(<a href=” + urlListimageChoice + “><img src=” + imageListimageChoice + “></a>);14: </script> JavaScript就这么回事4：表单还是先继续写完JS就这么回事系列吧43 表单构成1: <form method

28、=”post” action=”target.html” name=”thisForm”>2: <input type=”text” name=”myText”>3: <select name=”mySelect”>4: <option value=”1”>First Choice</option>5: <option value=”2”>Second Choice</option>6: </select>7: <br>8: <input type=”submit” value=”Sub

29、mit Me”>9: </form> 44 访问表单中的文本框内容45 动态复制文本框内容46 侦测文本框的变化1: <form name=”myForm”>2: Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”>3: </form> 47 访问选中的Select48 动态增加Select项49 验证表单字段1: <script language=”JavaScript”>2: function checkField(f

30、ield) 3: if (field.value = “”) 4: window.alert(“You must enter a value in the field”);5: field.focus();6: 7: 8: </script>9: <form name=”myForm” action=”target.html”>10: Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”>11: <br><input type=”submit”>1

31、2: </form> 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 动态改变表单的action52 使用图像按钮1: <form name=”myForm” action=”login.html”>2: Username: <input type=”text” nam

32、e=”username”><br>3: Password: <input type=”password”name=”password”><br>4: <input type=”image” src="/”login.gif"” value=”Login”>5: </form>6: 53 表单数据的加密 JavaScript就这么回事5：窗口和框架 54 改变浏览器状态栏文字提示1: <script language=”JavaScript”>2: window.status = “A n

33、ew status message”;3: </script> 55 弹出确认提示框1: <script language=”JavaScript”>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: </script> 56 提示输入1: <script language=”JavaScript”>2: var userName = mpt(“Please Enter Your Name”,”Enter Your Name Here”);3: document.write(“Your Name is

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

JavaScript方法和技巧大全

文档简介

温馨提示

最新文档

评论

JavaScript方法和技巧大全

文档简介

温馨提示

最新文档

评论

相关文档