JavaScript文档

浏览数：16 / 时间：2015年06月08日

 开始学习javaScript的小伙伴们，或者是正用到javaScipt的小猿们,都可以将它作为资料参考，基本知识还是很全的以及简单应用；黄色标出的是关键的知识点及解说，可以以它为节点快速找到自己想要知识点；
 1 document.write(“<p>dddd</p>”);
 2 <button  type=”button” onclick=”alert(‘dd’)”>dd</button>
 3 x=document.getElementById(“dd”);
 4 x.innerHTML=”dd”;
 5 .src.match(“dd”)   匹配正则表达式  中含有dd
 6 如果有dd则它的值是dd ,否则是 null
 7 
 8 x.style.color=”#ffffff” 给样式赋值
 9 if(x==""||isNaN(x))  验证输入的x是否数字
10 <script src="myScript.js"></script>  引用脚本
11 true false
12 
13 var cars=new Array();
14 cars[0]="Audi";
15 cars[1]="BMW";
16   var cars=new Array("Audi","BMW","Volvo");  数组  
17 var person={firstname:"Bill", lastname:"Gates", id:5566};
18 name=person.lastname;
19 name=person["lastname"];  都可以
20 var x=message.toUpperCase();  把文本转换为大写

函数：

 1   function dd()
 2 {
 3 return ;
 4 }
 5 <button onclick="myFunction(‘Bob‘,‘Builder‘)">点击这里</button>
 6 JavaScript 变量的生命期从它们被声明的时间开始。
 7 局部变量会在函数运行以后被删除。
 8 全局变量会在页面关闭后被删除。
 9 ===    全等（值和类型）  x===5 为 true；x==="5" 为 false
10 
11 var person={fname:"John",lname:"Doe",age:25};
12 
13 for (var x in person)
14   {
15   txt=txt + person[x];
16   }   遍历对象
17 
18 function myFunction()
19 {
20 try
21   {
22   var x=document.getElementById("demo").value;
23   if(x=="")    throw "empty";
24   if(isNaN(x)) throw "not a number";
25   if(x>10)     throw "too high";
26   if(x<5)      throw "too low";
27   }
28 catch(err)
29   {
30   var y=document.getElementById("mess");
31   y.innerHTML="Error: " + err + ".";
32   }
33 }      自定义错误消息
34 
35 function validate_required(field,alerttxt)
36 {
37 with (field)
38   {
39   if (value==null||value=="")
40     {alert(alerttxt);return false}
41   else {return true}
42   }
43 }    验证
44 with (field)
45 {
46 apos=value.indexOf("@")
47 dotpos=value.lastIndexOf(".")
48 if (apos<1||dotpos-apos<2) 
49   {alert(alerttxt);return false}
50 else {return true}
51 }
52 }
53 getElementsByTagName  通过类名
54 
55 onmouseover-onmouseout 鼠标 移到 移出
56 
57 <div id="div1">
58 <p id="p1">这是一个段落。</p>
59 <p id="p2">这是另一个段落。</p>
60 </div>
61 
62 <script>
63 var para=document.createElement("p");
64 var node=document.createTextNode("这是新段落。");
65 para.appendChild(node);
66 
67 var element=document.getElementById("div1");
68 element.appendChild(para);
69 </script>
70 
71 <div id="div1">
72 <p id="p1">这是一个段落。</p>
73 <p id="p2">这是另一个段落。</p>
74 </div>
75 
76 <script>
77 var parent=document.getElementById("div1");
78 var child=document.getElementById("p1");
79 parent.removeChild(child);
80 </script>                   对象增加  移出 内容
81 
82 person=new Object();
83 ?    person.firstname="Bill" 
84 person.lastname="Gates";      创建对象  并赋值
85 
86 function person(firstname,lastname,age,eyecolor)
87 {
88 this.firstname=firstname;
89 this.lastname=lastname;
90 this.age=age;
91 this.eyecolor=eyecolor;
92 }
93 
94 myFather=new person("Bill","Gates",56,"blue");
95 
96 document.write(myFather.firstname + " is " + myFather.age + " years old.");
97 给  person创建对象  。对象有三个属性 ，分别取名

 1 x.toUpperCase(); 大写
 2 continue
 3 
 4 var txt="";
 5 function message()
 6 {
 7 try
 8   {
 9   adddlert("Welcome guest!");
10   }
11 catch(err)
12   {
13   txt="There was an error on this page.\n\n";
14   txt+="Error description: " + err.message + "\n\n";
15   txt+="Click OK to continue.\n\n";
16   alert(txt);
17   }
18 }
19 </script>   抛出错误

字符串样式

 1 var str="Hello world!"
 2 document.write(str.indexOf("Hello")  定位  0
 3 
 4 var txt="Hello World!"
 5 
 6 document.write("<p>Big: " + txt.big() + "</p>")
 7 document.write("<p>Small: " + txt.small() + "</p>")
 8 
 9 document.write("<p>Bold: " + txt.bold() + "</p>")
10 document.write("<p>Italic: " + txt.italics() + "</p>")
11 
12 document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
13 document.write("<p>Fixed: " + txt.fixed() + "</p>")
14 document.write("<p>Strike: " + txt.strike() + "</p>")
15 
16 document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
17 document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")
18 
19 document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")
20 document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")
21 
22 document.write("<p>Subscript: " + txt.sub() + "</p>")
23 document.write("<p>Superscript: " + txt.sup() + "</p>")
24 
25 document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")      字符串样式

JavaScript方法；

  1 var str="Visit Microsoft!"
  2 document.write(str.replace(/Microsoft/,"W3School"))
  3 结果：Visit W3School!
  4 
  5 document.write(Date())
  6 var d=new Date();
  7 document.write("从 1970/01/01 至今已过去 " + d.getTime() + " 毫秒");
  8 
  9 var d = new Date()
 10 d.setFullYear(1992,10,3)
 11 document.write(d)   设置时间
 12 
 13 var d = new Date()
 14 document.write (d.toUTCString())   将当日的日期（根据 UTC）转换为字符串。
 15 
 16 var d=new Date()
 17 var weekday=new Array(7)
 18 weekday[0]="星期日"
 19 weekday[1]="星期一"
 20 weekday[2]="星期二"
 21 weekday[3]="星期三"
 22 weekday[4]="星期四"
 23 weekday[5]="星期五"
 24 weekday[6]="星期六"
 25 
 26 document.write("今天是" + weekday[d.getDay()])
 27 
 28 function startTime()
 29 {
 30 var today=new Date()
 31 var h=today.getHours()
 32 var m=today.getMinutes()
 33 var s=today.getSeconds()
 34 // add a zero in front of numbers<10
 35 m=checkTime(m)
 36 s=checkTime(s)
 37 document.getElementById(‘txt‘).innerHTML=h+":"+m+":"+s
 38 t=setTimeout(‘startTime()‘,500)
 39 }
 40 
 41 function checkTime(i)
 42 {
 43 if (i<10) 
 44   {i="0" + i}
 45   return i
 46 }
 47 </script>
 48 </head>
 49 
 50 <body onload="startTime()">
 51 <div id="txt"></div>    网页上显示钟
 52 
 53 var mycars = new Array()
 54 mycars[0] = "Saab"
 55 mycars[1] = "Volvo"
 56 mycars[2] = "BMW"
 57 
 58 for (i=0;i<mycars.length;i++)// for (i in Array)
 59 {
 60 document.write(mycars[i] + "<br />")
 61 }         数组遍历
 62 
 63 var arr = new Array(3)
 64 arr[0] = "George"
 65 arr[1] = "John"
 66 arr[2] = "Thomas"
 67 
 68 var arr2 = new Array(3)
 69 arr2[0] = "James"
 70 arr2[1] = "Adrew"
 71 arr2[2] = "Martin"
 72 
 73 document.write(arr.concat(arr2))   合并输出各项值
 74 
 75 var arr = new Array(3);
 76 arr[0] = "George"
 77 arr[1] = "John"
 78 arr[2] = "Thomas"
 79 
 80 document.write(arr.join());
 81 
 82 document.write("<br />");
 83 
 84 document.write(arr.join(".")); 
 85 
 86 结果：
 87 George,John,Thomas
 88 George.John.Thomas
 89 
 90 var arr = new Array(6)
 91 arr[0] = "George"
 92 arr[1] = "John"
 93 arr[2] = "Thomas"
 94 document.write(arr + "<br />")
 95 document.write(arr.sort())
 96 结果：
 97 George,John,Thomas,James,Adrew,Martin
 98 Adrew,George,James,John,Martin,Thomas
 99 排序  按A.B.C
100 
101 function sortNumber(a, b)
102 {
103 return a - b
104 }
105 
106 var arr = new Array(6)
107 arr[0] = "10"
108 arr[1] = "5"
109 arr[2] = "40"
110 arr[3] = "25"
111 arr[4] = "1000"
112 arr[5] = "1"
113 
114 document.write(arr + "<br />")
115 document.write(arr.sort(sortNumber))   排序  按值
116 Math.min(7.25,7.30)  返回较大 或较小的数  .max(2,4)
117 document.write(Math.random()) 返回随机数

常数

 1 圆周率
 2 2 的平方根
 3 1/2 的平方根
 4 2 的自然对数
 5 10 的自然对数
 6 以 2 为底的 e 的对数
 7 以 10 为底的 e 的对数
 8 这是在 Javascript 中使用这些值的方法：（与上面的算数值一一对应）
 9 Math.E
10 Math.PI
11 Math.SQRT2
12 Math.SQRT1_2
13 Math.LN2
14 Math.LN10
15 Math.LOG2E
16 Math.LOG10E        值

常数值

RegExp是正则表达式的缩写

 1 test() 方法检索字符串中的指定值。返回值是 true 或 false。
 2 例子：
 3 var patt1=new RegExp("e");
 4 
 5 document.write(patt1.test("The best things in life are free"));
 6 
 7 exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
 8  
 9 
10 var patt1=new RegExp("e");
11 
12 document.write(patt1.exec("The best things in life are free"));
13 
14 var patt1=new RegExp("e");
15 
16 document.write(patt1.test("The best things in life are free"));
17 
18 patt1.compile("d");
19 
20 document.write(patt1.test("The best things in life are free"));
21 由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：
22 truefalse

正则表达式

BOM Window操作

 1 window.innerHeight - 浏览器窗口的内部高度
 2 window.innerWidth - 浏览器窗口的内部宽度
 3 
 4 window.open() - 打开新窗口
 5 window.close() - 关闭当前窗口
 6 window.moveTo() - 移动当前窗口
 7 window.resizeTo() - 调整当前窗口的尺寸
 8 
 9 screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏
10 screen.availHeight
11 
12 location.hostname 返回 web 主机的域名
13 location.pathname 返回当前页面的路径和文件名
14 location.port 返回 web 主机的端口 （80 或 443）
15 location.protocol 返回所使用的 web 协议（http:// 或 https://）
16 location.href 属性返回当前页面的 URL。
17 
18 <script>
19 function newDoc()
20   {
21   window.location.assign("http://www.w3school.com.cn")
22   }
23 </script>
24 </head>
25 <body>
26 
27 <input type="button" value="加载新文档" onclick="newDoc()">
28 
29 history.back() - 与在浏览器点击后退按钮相同
30 history.forward() - 与在浏览器中点击按钮向前相同

对window的操作

confirm在弹出内输入内容，并控制时间弹出setTimeout

 1 function show_confirm()
 2 {
 3 var r=confirm("Press a button!");
 4 if (r==true)
 5   {
 6   alert("You pressed OK!");
 7   }
 8 else
 9   {
10   alert("You pressed Cancel!");
11   }
12 }
13 </script>
14 </head>
15 <body>
16 
17 <input type="button" onclick="show_confirm()" value="Show a confirm box" />
18 
19 
20 
21 
22 function disp_prompt()
23   {
24   var name=prompt("请输入您的名字","Bill Gates")
25   if (name!=null && name!="")
26     {
27     document.write("你好！" + name + " 今天过得怎么样？")
28     }
29   }
30 </script>
31 </head>
32 <body>
33 
34 <input type="button" onclick="disp_prompt()" value="显示提示框" />  输入
35 
36 function timedMsg()
37 {
38 var t=setTimeout("alert(‘5 秒！‘)",5000)
39 }    5秒后显示
40 
41 
42 var c=0
43 var t
44 function timedCount()
45 {
46 document.getElementById(‘txt‘).value=c
47 c=c+1
48 t=setTimeout("timedCount()",1000)
49 }
50 </script>
51 </head>
52 
53 <body>
54 
55 <form>
56 <input type="button" value="开始计时！" onClick="timedCount()">
57 <input type="text" id="txt">
58 </form>
59 
60 <p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
61 
62 clearTimeout(t);

confirm and setTimeout

基本jQuery与JavaScript区别；

 1 JavaScript 方式：
 2 function myFunction()
 3 {
 4 var obj=document.getElementById("h01");
 5 obj.innerHTML="Hello jQuery";
 6 }
 7 onload=myFunction;
 8 等价的 jQuery 是不同的：
 9 jQuery 方式：
10 function myFunction()
11 {
12 $("#h01").html("Hello jQuery");
13 }
14 $(document).ready(myFunction);