JS方法与技巧
2010年08月03日
JavaScript就这么回事1：基础知识
1 创建脚本块
1:
2: JavaScript code goes here
3:
2 隐藏脚本代码
1:
2:
5:
在不支持JavaScript的浏览器中将不执行相关代码
3 浏览器不支持的时候显示
1:
2: Hello to the non-JavaScript browser.
3:
4 链接外部脚本文件
1:
5 注释脚本
1: // This is a comment
2: document.write("Hello"); // This is a comment
3: /*
4: All of this
5: is a comment
6: */
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: ");
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 text
2: Link text
19 在页面加载完成后执行函数
1:
2: Body of the page
3:
20 条件判断
1:
2:
7:
21 指定次数循环
1:
2: ");
9: }
10: // -->
11:
22 设定将来执行
1:
2:
8:
23 定时执行函数
1:
2:
9:
24 取消定时执行
1:
2:
9:
25 在页面卸载时候执行函数
1:
2: Body of the page
3:
JavaScript就这么回事2：浏览器输出
26 访问document对象
1:
2: var myURL = document.URL;
3: window.alert(myURL);
4:
27 动态输出HTML
1:
2: document.write("Here's 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 = urlParts[1].split("&");
4: for (i = 0; i
你还以为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 = "http://www.liu21st.com/";
3:
35 添加网页加载进度窗口
1:
2:
3:
4: var placeHolder = window.open('holder.html','placeholder','width=200 ,height=200');
5:
6: The Main Page
7:
8:
9: This is the main page
10:
11:
JavaScript就这么回事3：图像
36 读取图像属性
1:
2: Widt h
3:
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: imageList[0] = "image1.jpg";
4: imageList[1] = "image2.jpg";
5: imageList[2] = "image3.jpg";
6: imageList[3] = "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: imageArray[source] = new Image;
7: imageArray[source].src = originalImage;
8: imageArray[replacement] = new Image;
9: imageArray[replacement].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: imageList[0] = new Image;
4: imageList[0].src = "image1.jpg";
5: imageList[1] = new Image;
6: imageList[1].src = "image2.jpg";
7: imageList[2] = new Image;
8: imageList[2].src = "image3.jpg";
9: imageList[3] = new Image;
10: imageList[3].src = "image4.jpg";
11: function slideShow(imageNumber) {
12: document.slideShow.src = imageList[imageNumber].src;
13: imageNumber += 1;
14: if (imageNumber
19:
20:
21:
42 随机广告图片
1:
2: var imageList = new Array;
3: imageList[0] = "image1.jpg";
4: imageList[1] = "image2.jpg";
5: imageList[2] = "image3.jpg";
6: imageList[3] = "image4.jpg";
7: var urlList = new Array;
8: urlList[0] = "http://some.host/";
9: urlList[1] = "http://another.host/";
10: urlList[2] = "http://somewhere.else/";
11: urlList[3] = "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 Choice
5: Second Choice
6:
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 访问选中的Select
1:
2:
3: 1
4: 2
5: 3
6:
7:
8: Ch eck Selection List
48 动态增加Select项
1:
2:
3: 1
4: 2
5:
6:
7:
8: document.myForm.mySelect.length++;
9: document.myForm.mySelect.options[document.myForm.m ySelect.length - 1].text = "3";
10: document.myForm.mySelect.options[document.myForm.m ySelect.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 动态改变表单的action
1:
2: Username:
3: Password:
4:
5:
6:
7:
52 使用图像按钮
1:
2: Username:
3: Password:
4:
5:
6:
53 表单数据的加密
1:
2:
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 = window.prompt("Please Enter Your Name","Enter Your Name Here");
3: document.write("Your Name is " + userName);
4:
57 打开一个新窗口
1: //打开一个名称为myNewWindow的浏览器新窗口
2:
3: window.open("http://www.liu21st.com/","myNewWindow ");
4:
58 设置新窗口的大小 1:
2: window.open("http://www.liu21st.com/","myNewWindow ",'height=300,width=300');
3: 59 设置新窗口的位置
1:
2: window.open("http://www.liu21st.com/","myNewWindow ",'height=300,width=300,left=200,screenX=200,top=10 0,screenY=100');
3:
60 是否显示工具栏和滚动栏
1:
2: window.open("http:
61 是否可以缩放新窗口的大小
1:
2: window.open('http://www.liu21st.com/' , 'myNewWindow', 'resizable=yes' );
62 加载一个新的文档到当前窗口
1: Open New Document
63 设置页面的滚动位置
1:
2: if (document.all) { //如果是IE浏览器则使用scrollTop属性
3: document.body.scrollTop = 200;
4: } else { //如果是NetScape浏览器则使用pageYOffset属性
5: window.pageYOffset = 200;
6: }
64 在IE中打开全屏窗口
1: Open a full-screen window
65 新窗口和父窗口的操作
1:
2: //定义新窗口
3: var newWindow = window.open("128a.html","newWindow");
4: newWindow.close(); //在父窗口中关闭打开的新窗口
5:
6: 在新窗口中关闭父窗口
7: window.opener.close()
66 往新窗口中写内容
1:
2: var newWindow = window.open("","newWindow");
3: newWindow.document.open();
4: newWindow.document.write("This is a new window");
5: newWIndow.document.close();
6:
67 加载页面到框架页面
1:
2:
3:
4:
5: 在frame1中加载frame2中的页面
6: parent.frame2.document.location = "135b.html";
68 在框架页面之间共享脚本
如果在frame1中html文件中有个脚本
1: function doAlert() {
2: window.alert("Frame 1 is loaded");
3: }
那么在frame2中可以如此调用该方法
1:
2: This is frame 2.
3:
69 数据公用
可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用
1:
2: var persistentVariable = "This is a persistent value";
3:
4:
5:
6:
7:
这样在frame1和frame2中都可以使用变量persistentVariable
70 框架代码库
根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库
1:
2:
3:
4:
5:
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/fantian830211/archive/2009/05 /16/4192047.aspx