JavaScript 零散笔记

来源：互联网发布：淘宝2017秋款裙子编辑：程序博客网时间：2024/04/29 20:08

JavaScript 零散笔记
1 创建脚本块
1: <script language=”JavaScript”>
2: JavaScript code goes here
3: </script>

2 隐藏脚本代码
1: <script language=”JavaScript”>
2: 
5: </script>

在不支持JavaScript的浏览器中将不执行相关代码

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 comment
2: document.write(“Hello”); // This is a comment
3: /*
4: All of this
5: is a comment
6: */

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: 
7: </script>

10 字符串替换
1: thisVar.replace(“Monday”,”Friday”);

11 格式化字串
1: <script language=”JavaScript”>
2: 
21: </script>

12 创建数组
1: <script language=”JavaScript”>
2: 
11: </script>

13 数组排序
1: <script language=”JavaScript”>
2: 
11: </script>

14 分割字符串
1: <script language=”JavaScript”>
2: 
10: </script>

15 弹出警告信息
1: <script language=”JavaScript”>
2: 
5: </script>

16 弹出确认框
1: <script language=”JavaScript”>
2: 
5: </script>

17 定义函数
1: <script language=”JavaScript”>
2: 
8: </script>

18 调用JS函数
1: <a href=http://www.webjx.com/htmldata/2006-02-06/”#” onClick=”functionName()”>Link text</a>
2: <a href=”javascript:functionName()”>Link text</a>

19 在页面加载完成后执行函数
1: <body onLoad=”functionName();”>
2: Body of the page
3: </body>

20 条件判断
1: <script>
2: 
7: </script>

21 指定次数循环
1: <script>
2: 
11: </script>

22 设定将来执行
1: <script>
2: 
8: </script>

23 定时执行函数
1: <script>
2: 
9: </script>

24 取消定时执行
1: <script>
2: 
9: </script>

25 在页面卸载时候执行函数
1: <body onUnload=”functionName();”>
2: Body of the page
3: </body>

26 访问document对象
1: <script language=”JavaScript”>
2: var myURL = document.URL;
3: window.alert(myURL);
4: </script>

27 动态输出HTML
1: <script language=”JavaScript”>
2: document.write(“<p>Here’s some information about this document:</p>”);
3: document.write(“<ul>”);
4: document.write(“<li>Referring Document: “ + document.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.writeln(“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.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: </script>

31 设置日期输出格式
1: <script language=”JavaScript”>
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: </script>

32 读取URL参数
1: <script language=”JavaScript”>
2: var urlParts = document.URL.split(“?”);
3: var parameterParts = urlParts[1].split(“&”);
4: for (i = 0; i < parameterParts.length; i++) {
5: var pairParts = parameterParts[i].split(“=”);
6: var pairName = pairParts[0];
7: var pairValue = pairParts[1];
8: document.write(pairName + “ ：“ +pairValue );
9: }
10: </script>
你还以为HTML是无状态的么？

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 页面跳转
1: <script language=”JavaScript”>
2: window.location = “[url]http://www.liu21st.com/[/url]”;
3: </script>

35 添加网页加载进度窗口
1: <html>
2: <head>
3: <script language='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>
10: </body>
11: </html>

36 读取图像属性
1: <img src=http://www.webjx.com/htmldata/2006-02-06/”image1.jpg” name=”myImage”>
2: <a href=http://www.webjx.com/htmldata/2006-02-06/”# ” onClick=”window.alert(document.myImage.width)”>Width</a>
3:

37 动态加载图像
1: <script language=”JavaScript”>
2: myImage = new Image;
3: myImage.src = “Tellers1.jpg”;
4: </script>

38 简单的图像替换
1: <script language=”JavaScript”>
2: rollImage = new Image;
3: rollImage.src = “rollImage1.jpg”;
4: defaultImage = new Image;
5: defaultImage.src = “image1.jpg”;
6: </script>
7: <a href=http://www.webjx.com/htmldata/2006-02-06/”myUrl” onMouseOver=”document.myImage.src = rollImage.src;”
8: onMouseOut=”document.myImage.src = defaultImage.src;”>
9: <img src=http://www.webjx.com/htmldata/2006-02-06/”image1.jpg” name=”myImage” width=100 height=100 border=0>

39 随机显示图像
1: <script language=”JavaScript”>
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(‘<img src=http://www.webjx.com/htmldata/2006-02-06/”’ + imageList[imageChoice] + ‘“>’);
9: </script>

40 函数实现的图像替换
1: <script language=”JavaScript”>
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: </script>
14: <a href=http://www.webjx.com/htmldata/2006-02-06/”#” onMouseOver=”document.myImage1.src = rollImage1[replacement].src;”
15: onMouseOut=”document.myImage1.src = rollImage1[source].src;”>
16: <img src=http://www.webjx.com/htmldata/2006-02-06/”image1.jpg” width=100 name=”myImage1” border=0>
17: </a>

41 创建幻灯片
1: <script language=”JavaScript”>
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 < imageList.length) {
15: window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);
16: }
17: }
18: </script>
19: </head>
20: <body onLoad=”slideShow(0)”>
21: <img src=http://www.webjx.com/htmldata/2006-02-06/”image1.jpg” width=100 name=”slideShow”>

42 随机广告图片
1: <script language=”JavaScript”>
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(‘<a href=http://www.webjx.com/htmldata/2006-02-06/”’ + urlList[imageChoice] + ‘“><img src=http://www.webjx.com/htmldata/2006-02-06/”’ + imageList[imageChoice] + ‘“></a>’);
14: </script>

43 表单构成
1: <form method=”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=”Submit Me”>
9: </form>

44 访问表单中的文本框内容
1: <form name=”myForm”>
2: <input type=”text” name=”myText”>
3: </form>
4: <a href='http://www.webjx.com/htmldata/2006-02-06/1139212451.html#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a>

45 动态复制文本框内容
1: <form name=”myForm”>
2: Enter some Text: <input type=”text” name=”myText”><br>
3: Copy Text: <input type=”text” name=”copyText”>
4: </form>
5: <a href=http://www.webjx.com/htmldata/2006-02-06/”#” onClick=”document.myForm.copyText.value =
6: document.myForm.myText.value;”>Copy Text Field</a>

46 侦测文本框的变化
1: <form name=”myForm”>
2: Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”>
3: </form>

47 访问选中的Select
1: <form name=”myForm”>
2: <select name=”mySelect”>
3: <option value=”First Choice”>1</option>
4: <option value=”Second Choice”>2</option>
5: <option value=”Third Choice”>3</option>
6: </select>
7: </form>
8: <a href='http://www.webjx.com/htmldata/2006-02-06/1139212451.html#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>

48 动态增加Select项
1: <form name=”myForm”>
2: <select name=”mySelect”>
3: <option value=”First Choice”>1</option>
4: <option value=”Second Choice”>2</option>
5: </select>
6: </form>
7: <script language=”JavaScript”>
8: document.myForm.mySelect.length++;
9: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;
10: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”;
11: </script>

49 验证表单字段
1: <script language=”JavaScript”>
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: </script>
9: <form name=”myForm” action=”target.html”>
10: Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”>
11: <br><input type=”submit”>
12: </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 动态改变表单的action
1: <form name=”myForm” action=”login.html”>
2: Username: <input type=”text” name=”username”><br>
3: Password: <input type=”password” name=”password”><br>
4: <input type=”button” value=”Login” onClick=”this.form.submit();”>
5: <input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”>
6: <input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”>
7: </form>

52 使用图像按钮
1: <form name=”myForm” action=”login.html”>
2: Username: <input type=”text” name=”username”><br>
3: Password: <input type=”password”name=”password”><br>
4: <input type=”image” src=http://www.webjx.com/htmldata/2006-02-06/”login.gif” value=”Login”>
5: </form>
6:

53 表单数据的加密
1: <SCRIPT LANGUAGE='JavaScript'>
2: 
17: </SCRIPT>
18: <form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>
19: Enter Some Text: <input type=text name=myField><input type=submit>
20: </form>

1.禁用鼠标右键 oncontextmenu = "window.event.returnValue = false"
2.禁止复制，粘贴 onselectstart = "return false";
3.文本区域禁止粘贴 onpaste = "return false";
4.防止复制，粘贴 oncopy="return false"; oncut = "return false"

状态栏设置：

window.defaultStatus = "has been loaded";

select multiple 多选
--得到多选的值
function getSelMutilValue(){
var n = document.formname.selname.length; //多选列表长度
var value = '';
for(var i=0; i<n; i++){
      if(document.formname.selname.options[i].selected){ //多选列表选择项
           value += document.formname.selname.options[i].value //获取值
      }
}
document.dinner.summery.value = value; //给其他赋值
}

--可以指定事件处理器的处理函数
   function event1(){
      document.test.result.value = 'set by event1 '; //设置值
   document.test.btn.onclick = event2; // 将btn的onclick处理函数交给event2
   }

--仿真事件
仿真事件用来引导别人执行某个动作也不想因为这个动作带来的反应
如下只是想模仿单击事件而任何程序不带来任何反应

function fun_click(){
document.test.watch.click();
}

Navigate 对象：
window
访问浏览器窗口或者窗口里面的帧，window 对象默认存在，所以无需调用window前缀

Link object
用于访问超链接文本或者图像的位置点，Links数组用于访问文档中所有的链接的对象

anchors array

image object | image array
用于访问前如到hTML文档中图象， images数组用于访问文档中所有的图像对象

area
用于访问客户机图形映射中的区域

applet object | applets array
用于访问java小程序，applets数组用于访问文档中的所有小程序

layer object | layer array
访问HTML层

text
访问窗体中的文本字段

textare
访问窗体中的文档区域

radio
访问窗体中单选钮集合

checkbox
访问窗体中复选框

button
访问窗体中按钮（except reset and submit)

reset
访问窗体中的复位钮

submit
访问窗体中的提交钮

select option
访问窗体中的选项清单，option 用于访问选项清单中的元素

password
用于访问口令字段

hidden
访问窗体中的隐藏字段

FileUpload
访问窗体中的文件上传元素

navigator
访问执行脚本中的浏览器信息

mineType object 访问浏览器支持的特定的MIME类型信息

String 操作方法：

1、anchor(anchorName) 使字符串显示为具有指定位置点名称
2 big()
3 blink()
4 bold()
5 charAt(index) 返回指定索引的字符
6 fixed（）带有teletype 表示的字符串
7 fontsize(size) 用指定的字号显示字符串
8 indexOf(pattern) 返回字符串中包含pattern所代表参数第一次出现的位置值，返回值为-1时候表示
查找不到
9 indexOf(pattern, startIndex) 同上，不过从指定字符串startIndex出开始查找
10 italics(href) 用HTML显示italics的字符串
11 lastIndexOf(pattern) 显示pattern模式匹配的字符串最后一次出现的位置
12 lastIndexOf(parrern, startIndex) 同上，从指定startIndex开始
13 link(href) 显示href参数指定的URL超链接
14 small()
15 split(separater) 用separator分割符将字符串划分并存入数组
16 strike() sub() sup()
17 substring(tartIndex, endIndex) 返回从startIndex 到endIndex的字符串
18 toLowerCase(), toUpperCase()
19 int search(string) replace(查找，特换文本)

Math 对象属性
E 欧拉常熟
LN2 2的自然对谁
LN10 10的自然对数
LOG2E 以2为底e的对象
LOG10E 以10为底e的对数
PI 圆周率
SQRT1_2 1/2的平方根
SQRT2 2的平方根

1 abs(x) acos(x) asin(x) atan2(x,y)
2 ceil(x)

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/toyouheart/archive/2009/03/14/3990737.aspx

全部文字全部图文