JavaScript_DOM编程艺术(一)（dom javascript）-技术教程-四时宝库

语句

可以以分号（；）结束语句，也可以不要

如：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 节点树

元素节点：形成文档的结构如 <body>,<p>,<ul>
文本节点：形成文档的内容如<p>this is text</p> 这个标记中的“this is text”
属性节点：开成文档的属性描述如 <p id="preo" class="cls">this is text</p> 这个标记中的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<item.length;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代码可以返回一个值，这个值被传递给那个事件处理函数。
如：在当前页面显示图片
<a href="images/1.jpg" title="one" onclick="ShowImage(this);return false;">One1</a>
<img id="showImgArea" src="images/defaults.jpg" alt="ImgArea"/>
function ShowImage(items) {
var scrValue = items.getAttribute("href");
var showImgArea = 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:" 伪协议

如 <a herf="javascript:popUp('http://www.example.com/');">Example</a>
<a herf="#" onclick="popUp('http://www.example.com/');">Example</a>
herf="#" 代表创建一个空链接

分离JavaScrip

element.event = action....
如：getElementbyId(id).event = action
function popUp(winURL) {
window.open(winURL, "popup", "width=320,height=480");
}
function pLinks() {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
if (links[i].getAttribute("class")=="popup"){
links[i].onclick = function() {
popUp(this.getAttribute("href"));
return false;
}
}
}
}
window.onload = pLinks;

window.onload=funtionName HTML文档全部加载完毕时将触发这一事件

对象检测: 在使用时，一定要删掉方法名后面的圆括号，如不，将会导致检测结果是方法的结果，无论方法是否存在。

if(method){
statements
}
如：if (!getElementById) return false;

合并，放置，压缩脚本

<script type="text/javascript" src="js/ui.js"></script>
脚本引用传统方式是放置<head>区域，这样有可能会导致无法并行加载其它文件。
建议放在</body>之前，可以让页面变得更快
合并多脚本在一起，可以有效减少加载页面时发送的请求数量，从而达到性能优化
压缩工具：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("<p>This is inserted.</p>")
2.docuument.innerHTML 此属性既可用来读，也可以用来写入
如：var testdiv=document.getElementById("testdiv");
alert(testdiv.innerHTML); --读
testdiv.innerHTML= "<p>I inserted contest.</p>"; --写

现流行方法：

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){
var parent = 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元素并插入
var div = document.getElementById("testdiv");
var div_p = document.createElement("p");
div.appendChild(div_p);
var div_txt = document.createTextNode("this is my");
div_p.appendChild(div_txt);
//在其原先p元素前面插入一个元素
var before_p = document.createElement("p");
var before_txt = document.createTextNode("this is beforeNode");
before_p.appendChild(before_txt);
div.insertBefore(before_p, div_p);
//在其原先p元素后面插入一个元素
var after_p = document.createElement("p");
var after_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;

}

平稳退化：

欢迎关注公众号（hongji8410）和加入QQ群一起交流（522342554）

四时宝库

程序员的知识宝库

JavaScript_DOM编程艺术(一)（dom javascript）