JavaScript方法和技巧大全.doc

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