注释
单行 //
多行 /**/
变量
声明 var
如果在局部中不使用var,则使用或者声明在全局中
数据类型
1.字符串
2.数值
3.布尔值 false true
4.数组
1 var array = Array(4);
2
3 array[0] = "";
4
5 array[1] = 3;
6
7 var arry = [0,1,false];
8
9 var arry = Array(1,"2");
关联数组
1 var array = Array(4);
2
3 array["0"] = "";
4
5 array["1"] = 3;
内置对象
Date
var myDate=new Date()
注释：Date 对象自动使用当前的日期和时间作为其初始值。
setDate
Math
语句
if, while, Switch，for同c
for in
异常
Try...Catch
1 try
2
3 {
4
5 //在此运行代码
6
7 }
8
9 catch(err)
10
11 {
12
13 //在此处理错误
14
15 }
16
17 throw(exception)
函数
function func(parameters){
}
DOM
Document Object Model
节点
1.元素节点
2.文本节点
3.属性节点
CSS
1. 元素
1 body{
2
3 color:white;
4
5 background-color:black;
6
7 }
8
9 p{
10
11 color:white;
12
13 front-size:1.2em;
14
15 }
16
17
18
19 <p class="special" id="pid">xxxxxx</p>
2. class
1 .special{
2
3 front-style: italic;
4
5 }
6
7 p.special{
8
9 front-style: italic;
10
11 }
3. id
1 #pid{
2
3 front-style: italic;
4
5 }
获取元素
1. document.getElementById(id)
document特有的
2. element.getElementsByTagName(tag)
例如:document.getElementsByTagName("li"); 返回对象数组
getElementsByTagName("*");
3. element.getElementsByClassName(class)
例如:document.getElementsByClassName("special"); 返回对象数组
获取和设置属性
getAttribute(attribute)
setAttribute(attribute, value) //做出的修改不会反映在文档源代码中
只可通过元素节点调用
document.getElementsByTagName("li")[0].getAttribute("title");
parentNode属性
childNodes属性
element.childNodes包括element的所有子元素数组
nextSibling属性
下一个兄弟元素
nodeType属性
1为元素节点
2为属性节点
3为文本节点
nodeValue属性
firstChild
相当于node.childNodes[0]
lastChild
事件处理
onclick onmouseover onmouseout属性
<a href=" " onclick="onclicfunc(this); return false;">xxx</a>
//return false 阻止链接行为触发
平稳退化
是指使用最新的技术面向高级浏览器构建最强的功能及用户体验，然后针对低级浏览器的限制，逐步衰减那些无法被支持的功能及体验
渐进增强
是指从最基本的可用性出发，在保证站点页面在低级浏览器中的可用性和可访问性的基础上，逐步增加功能及提高用户体验
onload事件
网页加载完毕后立即执行
1 window.onload = onloadfunc;
2
3
4
5 function addLoadEvent(func){
6
7 var oldonload = window.onload;
8
9 if(typeof oldonload != 'function'){
10
11 window.onload = func;
12
13 }else{
14
15 window.onload = fun(){
16
17 oldonload ();
18
19 func();
20
21 }
22
23 }
24
25 }
键盘访问
accesskey属性
将元素(如链接)与键盘上的某个特定按键关联在一起
onkeypress
动态创建标记
1.document.write
2.innerHTML
支持写入和读出，但是原先内容会被覆盖
3.DOM方法
1 document.createElement(nodeName);//创建元素节点
2
3 parent.appendChild(child);
4
5
6
7 document.createTextNode(text); //创建文本节点
8
9
10
11 parent.insertBefore(newElement, targetElement);
XMLHttpRequest
XMLHttpRequest 对象用于在后台与服务器交换数据
xmlhttp=new XMLHttpRequest(); //创建 XMLHttpRequest 对象
使用 XMLHttpRequest 对象从服务器取回 XML 信息
1 <html>
2
3 <head>
4
5 <script type="text/javascript">
6
7 var xmlhttp;
8
9 function loadXMLDoc(url)
10
11 {
12
13 xmlhttp=null;
14
15 if (window.XMLHttpRequest)
16
17 {// code for IE7, Firefox, Opera, etc.
18
19 xmlhttp=new XMLHttpRequest();
20
21 }
22
23 else if (window.ActiveXObject)
24
25 {// code for IE6, IE5
26
27 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
28
29 }
30
31 if (xmlhttp!=null)
32
33 {
34
35 xmlhttp.onreadystatechange=state_Change; //onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称，当 XMLHttpRequest 对象的状态发生改变时，会触发此函数
36
37 xmlhttp.open("GET",url,true); //"true"。该参数规定请求是否异步处理。True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。
38
39 xmlhttp.send(null);
40
41 }
42
43 else
44
45 {
46
47 alert("Your browser does not support XMLHTTP.");
48
49 }
50
51 }
52
53
54
55 function state_Change()
56
57 {
58
59 if (xmlhttp.readyState==4) //4表示完成
60
61 {// 4 = "loaded"
62
63 if (xmlhttp.status==200)
64
65 {// 200 = "OK"
66
67 document.getElementById('A1').innerHTML=xmlhttp.status;
68
69 document.getElementById('A2').innerHTML=xmlhttp.statusText;
70
71 document.getElementById('A3').innerHTML=xmlhttp.responseText;
72
73 }
74
75 else
76
77 {
78
79 alert("Problem retrieving XML data:" + xmlhttp.statusText);
80
81 }
82
83 }
84
85 }
86
87 </script>
88
89 </head>
90
91
92
93 <body>
94
95 <h2>Using the HttpRequest Object</h2>
96
97
98
99 <p><b>Status:</b>
100
101 <span id="A1"></span>
102
103 </p>
104
105
106
107 <p><b>Status text:</b>
108
109 <span id="A2"></span>
110
111 </p>
112
113
114
115 <p><b>Response:</b>
116
117 <br /><span id="A3"></span>
118
119 </p>
120
121
122
123 <button onclick="loadXMLDoc('/example/xdom/note.xml')">Get XML</button>
124
125
结构层 HTML
表示层 CSS 元素的style属性
<link rel="stylesheet" href="xx/xxx.css" media="screen"/>
行为层 JS
<script src="scripts/xx.js"></script>
警告框
alert("文本")
确认框
confirm("文本"） //确认返回值为 true,取消么返回值为 false。
提示框
prompt("文本","默认值")
//点击确认返回值为输入的值,取消返回值为 null
动画
函数延迟执行
variable = setTimeout("function", interval);
让函数在interval秒之后执行
在function使用递归，则产生动画效果
clearTimeout(variable)
取消排队等待执行的函数
element.style.position属性有static,fixed,relative,absolute四种，
为absolute时可以放置在任何位置,由element.style.top, element.style.bottom,element.style.left,element.style..right决定