W3Cfuns_JavaScript_DOM编程艺术第二版（中文
1.语句
可以以分号（；）结束语句，也可以不要
如：first statememt; second statememt;
first statememt
second statememt
2.注释
单行 //
多行 /**/
3.变量
变量是严格区分大小写,变量名不允许包含空格与标点符号，允许字母，数字美元符号（$）与下划线
var mood;
var age;
也可
var mood,age;
直接赋值
var mood="happly"
4.数据类型
4.1 字符串 字符串必须包含在引号里，单引号或双引号都可以
转义符：\
4.2 数值
4.3 布尔值 true/false
4.4 数组 声明关键字 Array，数组是从0开始计数
var strArr = Array(4);
var strArr = Array();
填充数组 array[index]=element
strArr[0]="One"
var strArr=Array("one","two","three");
var strArr=["one","two","three"];
var strArr=["one",1980,true]; --不同数据类型
关联数组 为下标设置名称，而不用数字
var strArr = Array();
strArr["name"]="Josn";
strArr["age"]=1980;
4.5 对象 声明关键字 Object 获取元素不使用方括号([])或下标，而是使用点号（.）
var strObj = Object();
strObj.name="objname"
strObj.age="objage"
var strObj={};
strObj.name="objname"
strObj.age="objage"
var strObj={name:"objname",age:1980};
5 操作 = ,+, -, /, *
var year=year+1
year++
加号（+） 即可用于计数之和，也可用于拼接字符串
var msg=1+2
var msg="1"+"2"
alert(msg);
+= 加法并赋值
var year=2000
var msg="this year is";
msg+=year;
alert(msg) --->"this year is2000"
6 条件语句
if (condition){
statement;
} else {
}
6.1 比较操作符 > ,<, >=, <=, == ,!= , 全操作符(===,!==)
6.2 逻辑操作符 && ,||,!
7.循环语句
while (condition){
statement;
}
--循环10次，count最终值为11
var count=1;
while (count <11){
alert(count);
count++;
}
do{
statement;
} while (condition);
var count=1;
do{
alert(count);
count++;
} while (count<11)
for (initial condition; test condition; after condition){
statement;
}
for (var count =1; count<11; count++){
alert(count);
}
8 函数
funtiont name(arguments) {
statement;[--return];
}
9 对象 由一些属性和方法组合在一起而构成的一个数据实体（用户自定义/内建对象/宿主对象）
包含在对象里的数据可以通过两种形式访问，属性和方法 使用“点”语法来访问
Object.property
Object.method()
创建对象实例
var jeremy = new person;
如：
属性访问
person.mood
person.age
方法访问
person.walk();
person.sleep();
10 DOM 节点树
元素节点： 形成文档的结构 如 ,
,
文本节点： 形成文档的内容 如
this is text
这个标记中的“this is text”
属性节点： 开成文档的属性描述 如 this is text 这个标记中的id="preo" class="cls"
获取元素三种方式
getElementById 返回元素节点对应的对象
document.getElementById(id);
如 document.getElementById(“purchases”);
getElementsByTagName 返回一个对象数组，每个对象对应文档里给定标签的一个元素
element.getElementsByTagName(tag);
如 document.getElementsByTagName("li");
getElementsByClassName 返回一个对象数组，每个对象对应文档里给定标签的一个元素
document. getElementsByClassName(class);
如 document. getElementsByClassName("sale");
typeof 返回对象的类型
获取与设置属性
getAttribute 获取属性 此方法不属性document对象，只能通过元素节点对象调用
object.getAttribute(attribute)
如 item=document.getElementsByTagName("li");
for (var i=0;i
alert(item[i].getAttribute("title"));
}
setAttribute 修改属性值
object.setAttribute(attribute,value)
如 item = document.getElementById("purchases");
item.setAttribute("title"," a list of good");
ChildNodes属性：元素下的子元素
nodeType属性：元素类型取值(1为元素节点，2为属性节点，3 文本节点)
firstchild和lastchild属性
nodeValue属性：获取/改变一个文本节点的值 (节点直接调用将得到null，需处理才行)
如 node.childNodes[0].nodeValue == node.firstchild.nodeValue
node.childNodes[node.childNodes.length-1].nodeValue == node.lastchild.nodeValue
事件处理函数
事件处理函数的作用是，在特定事件发生时调用特定的JavaScript代码
语法： event = "JavaScript statement(s)"
如：onclick = "showPic(this)"
JavaScript代码包含在一对引号之间。可以把做任意数量的JavaScript语句放在这对引号之间，只要把各条语句用分号隔开即可
如：onclick = "showPic(this)；return false;"
事件处理函数工作机制：在给某个元素添加了事件处理函数后，一旦事件发生，相应的JavaScript代码就会得到执行。被调用的JavaScript代码可以返回一个值，这个值被传递给那个事件处理函数。
如：在当前页面显示图片
One1
function ShowImage(items) {
varscrValue = items.getAttribute("href");
varshowImgArea = document.getElementById("showImgArea");
showImgArea.setAttribute("src", scrValue);
}
如果没有return false,效果将是新建一个窗口展示图片，而不会在下方显示图片
创建新的浏览窗口
window.open(url,name,features)
url:新窗口里打开的网页URL地址，省略则为空白窗口
name:新窗口名称
features:以逗号分隔的字符串，其内容为新窗口的各种属性（宽度，高度，工具条，菜单条，初始化位置等）
如：window.open(winURL,"popup","width=320,height=480");
"javascript:" 伪协议
如 Example
Example">http://www.example.com/');">Example
herf="#"代表创建一个空链接
分离JavaScrip
element.event = action....
如：getElementbyId(id).event = action
function popUp(winURL) {
window.open(winURL,"popup","width=320,height=480");
}
function pLinks() {
varlinks = document.getElementsByTagName("a");
for(vari = 0; i < links.length; i++) {
if(links[i].getAttribute("class")=="popup"){
links[i].onclick =function() {
popUp(this.getAttribute("href"));
returnfalse;
}
}
}
}
window.onload = pLinks;
window.onload=funtionName HTML文档全部加载完毕时将触发这一事件
对象检测: 在使用时，一定要删掉方法名后面的圆括号，如不，将会导致检测结果是方法的结果，无论方法是否存在。
if(method){
statements
}
如：if (!getElementById) return false;
合并，放置，压缩脚本
脚本引用传统方式是放置区域，这样有可能会导致无法并行加载其它文件。
建议放在之前，可以让页面变得更快
合并多脚本在一起，可以有效减少加载页面时发送的请求数量，从而达到性能优化
压缩工具：JSMin
共享onload事件
如 两个函数需要同时执行
window.onload = firstFuntion
window.onload = secondFuntion
这样的结果将只有最后那个才会被实际执行
解决此问题，转换如下即可 匿名函数
window.onload = function(){
firstFuntion();
secondFuntion();
}
onkeypress事件,建议少使用此事件，容易出问题
如：links[i].onkeypress = function(){
.......
}
也可以：
links[i].onkeypress = links[i].onclick;
改变其文档的结构，把标签文本写入文档 两种传统方法：
1.document.write 不建议使用，有些浏览器不支持
如： document.write("
This is inserted.
")
2.docuument.innerHTML 此属性既可用来读，也可以用来写入
如：var testdiv=document.getElementById("testdiv");
alert(testdiv.innerHTML);--读
testdiv.innerHTML= "
I inserted contest.
";--写
现流行方法：
createElement方法：创建一个新的元素
document. createElement(nodeName)
如：var para = document. createElement("p");
appendChild方法：把新创建的节点插入某文件的节点树，作为一个子节点
parent.appendChild(child)
如：testdiv.appendChild(para);
createTextNode方法： 创建一个文本节点
document.createTextNode(text)
如：txt = document.createTextNode("Hello world");
para.appendChild(txt);
insertBefore()方法：把一个新元素插入到一个现有元素的前面
parentElement.insertBefore(newElement,targetElement);
parentElement目标元素的父元素
targetElement 目标元素
newElement 新元素
如：var = gallery = document.getElementById("imagegallery");
gallery.parentNode.insertBefore(placeholder,gallery);
insertAfter方法：DoM没有提供这个方法，不过可以自己编写一个函数代替
function insertAfter(newElement,targetElement){
varparent = targetElement.parentNode;
if(parent.lastChild == targetElement) {
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
nextSibling 属性：目标元素和目标元素的下一个兄弟元素之间
一般创建顺序如下：
1.创建一个元素节点(createElement)
2.把此元素节点追加到文档中的一个元素节点上(appendChild)
3.创建一个文本节点(createTextNode)
4.把此文本节点追加至刚创建的元素节点上(appendChild)
function creatediv() {
//创建一个p元素 并插入
vardiv = document.getElementById("testdiv");
vardiv_p = document.createElement("p");
div.appendChild(div_p);
vardiv_txt = document.createTextNode("this is my");
div_p.appendChild(div_txt);
//在其原先p元素前面插入一个元素
varbefore_p = document.createElement("p");
varbefore_txt = document.createTextNode("this is beforeNode");
before_p.appendChild(before_txt);
div.insertBefore(before_p, div_p);
//在其原先p元素后面插入一个元素
varafter_p = document.createElement("p");
varafter_txt = document.createTextNode("this is afterNode");
after_p.appendChild(after_txt);
insertAfter(after_p, div_p);
}
window.onload = creatediv;
Ajax :对页面的请求以异步方式发送到服务器,只更新页面中的一小部分
核心对象为XMLHttpRequest
网页构成：
结构层 --html
表示层 --css
行为层 --javascript
style属性
是一个对象
获取样式：element.style.color
当引用一个中间带减号的CSS属性时，Dom要求用驼峰命名法
如：CSS属性font-family变为DOM属性fontFamily
element.style.font-family --> element.style.fontFamily 前者是错误的，需变为后者才行
background-color -->backgroundColor
DOM在表示样式属性时采用的单位并不总是与它们在CSS样式表里的设置相同
如：CSS属性Color的设置值是"grey" 或#999999，但有些某些浏览器就会显示为RGB(红，绿，蓝) rgb(153,153,153)
CSS font-size属性的值单位是em或px DOM的单位也是一样em或px
设置样式
style对象的属性值永远是一个字符串,style对象的属性的值必须放在引号里，单引号与双引号均可,如无引号，Js将会解释为一个变量
element.style.property=value
如：para.style.color='black'
根据元素在节点树里的位置来设置样式
第一种：为标签元素统一地声明样式
如：p {
font-size:1em;
}
第二种：为有特定class属性的所有元素统一声明样式
如： .fineprint {
font-size:8em;
}
第三种：为有独一无二的ID属性的元素单独声明样式
如：#intro {
font-size:8em;
}
CSS提供的:hover，:focus等伪Class属性允许我们根据HTML元素的状态来改变样式
className属性：可以通过动态设置元素的这个属性，从而统一改变样式
element.classname=value
如： elem.classname="intro" (覆盖class属性) （或elem.setAttribut("class","intro")）
elem.className +="intro" （追加class属性）
.intro {
font-weight:bold;
font-size:2em;
}
位置 position
规定元素的定位类型 有五种值
abslute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fiexed 生成绝对定位的元素，相对于浏览器窗口进行定位
relative 生成相对定位的元素，相对于其正常位置进行定位
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
inherit 规定应该从父元素继承 position 属性的值
如 h2
{
position:absolute;
left:100px;
top:150px;
}
时间 setTimeout
让某个函数在经过一段预定的时间之后才开始执行
setTimeout("function",interval)
第一个参数：通常是一个字符串，其内容是将要执行的那个函数的名字
第二个参数：是一个数值，以毫秒为单位，设定了需要经过多长时间后才开始第一个参数所给出的函数
clearTimeout(variable) 取消某个正在排队等待执行的函数 参数为全局变量
如：movement = setTimeout("moveMessage()",5000);
clearTimeout(movement);
overflow属性
处理一个元素的尺寸超出容器尺寸的情况 有三种值
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
如：div
{
width:150px;
height:150px;
overflow:scroll;
}
平稳退化：
