数往知来JavaScript

一、DOM

1、onclick事件

表示点击

一般用在--》跳转

a标签，希望点击的时候不去跳转，而是做别的事情，并在里面返回一个false

--》注册

用法：onclick="js代码";

onclick=方法名;

2、节点中的常用属性

--》nodeType

有12种取值，常用的：元素 1 ，属性 2 ，文本 3 。

--》nodeName

获得节点的名字

--》nodeValue

获得节点的值

--》childNodes

获得某个节点下的所有子节点，返回一个集合

-->firstChild

获得某个节点下的第一个子节点

-->lastChild

获得某节点下的最后一个字节点

注意：在谷歌浏览器与火狐浏览器中对于节点的描述与IE8的描述不同（IE9以上可能与谷歌的类似）

<ul>

</ul>

IE8在解释该结构的时候认为ul节点的子节点为<li>和<li>,所以IE8描述这个ul下面只有两个li元素子节点

而谷歌、火狐浏览器在解释结构的时候会认为ul和li之间还有一个换行（\n）它也会认为是一个空文字子节点，所以在使用firstChild获取第一个字节点的时候

在谷歌、火狐浏览器上面会得到一个空对象会报错使用的时候需要注意

3、常用方法

---》getElementById

获取指定id所对应的节点

var elements= document.getElementById("123");

第二段</p>

<p>

---》getElementsByTagName

获取某个元素的节点名字

var ul=document.getElementsByTagName('ul')[0]; 获取整个html页面里的第一ul元素

---》 getAttribute

获取某个元素的指定的属性,返回属性的值

window.onload=function(){

];

var href=node.getAttribute('href');

alert(href);

}

--->setAttribute

修改某个元素的属性值

function attri(){

];

node.setAttribute('href','http://www.baidu.com');

}

javascriptDom_2

一、常见方法

---》getElementById

根据id获得页面上的元素

--》getElementsByTagName

-->getAttribute

-->setAttribute

2、常见属性、

nodeName 返回节点名，返回的均是大写

nodeValue 只针对文本

childNodes

nodeType 1 -- 元素， 2 -- 属性， 3 -- 文本

firstChild

lastChile

-->父节点.firstChild 等价于父节点.ChildNodes[0]

关于浏览器

IE8对节点与节点的空行和回车，直接忽略，不认为是文本节点

FireFox/Chrome/IE9

将空文本节点也纳入了子节点的范畴

3、验证方法的存在

如果没有这个方法会返回一个null

在js里面null、0、undefiend浏览器在描述的时候都会认为是假（false）

if(!document.getElementsByTagName) return false;当这个方法不存在时返回null，取非就变成true，那么就执行后面的一句话return false回去，就不会再执行后面的，这样遇到一些老的浏览器不认识这个方法也不会报错了，就做到了向后兼容了

//方法体

4、自动创建浏览器中HTML的结构

--》比较老的方法

document.write（）括号内只能写字符串

可以在页面中创建内容

--》<element>.innerHTML

属性，可以用来获得与修改一个标签元素下的所有内容

对于大面积的HTML得生成有很大的优势，因为可以直接处理HTML代码

如何生成一个标签（节点）

--》首先创建一个节点出来

createElement('标签名');

createTextNode('文本内容');

--》设定该节点相关的值与数据

setAttribute('属性'，值)

--》添加到父节点上

父节点.appendChild(节点名)

function createDIV(){

var div=document.createElenment('div');

div.setAttribute(');

];

body.appandChild(div);

}

-->insertBefore

父标签.insertBefore(新标签，存在标签);

--》获得父标签

var ul=document.getElementsByTagName('ul')[0];

var parent=ul.parentNode;

用insertBefore方法自己写一个insertAfter方法

//传进来一个新节点和一个已存在的节点，把这个新节点添加到这个以村子节点的后面

function insertAfter (newTag,existTag){

//首先获得这个已存在节点的父节点

var parentTag=existTag.parentNode;

//再判断这个父节点的最后一个节点是否是这个已存在节点,如果是就直接把这个新节点追加到这个父节点的后面

if(parentTag.lastChild==existTag){

parentTag.appendChild(newTag);

}else{

//如果这个已存在节点不是这个父节点的最后一个节点，那么就获得这个已存在节点的下一个节点，把这个新节点插入到下一个节点之前

parent.insertBefore(newTag,existTag.nextSibling);

}

javascriptDom_实现动画效果

一、获得元素的style属性

每一个元素有一个style属性，这个属性不是字符串或数字类型，这个属性是dispHTMLStyle它是一个对象

遍历这个对象用for-in

-->可以的到一个结论：

可以通过style属性访问到样式语法为：

样式中的属性名 = 值

样式属性名满足camelCase命名规则

二、两个时间函数

--》setTimeOut

指定多长时间以后，执行一段代码，只执行一次

使用方法：

setTimeOut(js代码段的字符串，时间间隔)

--》setInterVal

指定一段时间，然后没隔这么长时间，执行一次代码

setInterVal(js的代码段的字符串，时间间隔);

--》让计时器停下来

setTimeOut在调用的时候，会返回以后各值

clearTimeOut(刚才返回的值)；

setInterVal也是一样

setInterVal(刚才返回的值)；

-->写一个移动元素坐标的方法，获得一个元素的ID、和要移动的最终目标位置和移动的时间频率，移动这个元素，达到动画的效果，这个元素要脱离文档流

function moveElement(elementId,final_x,final_y,interval){

if(!document.getElementById)return false;

if(!document.getElementById(elementId))return false;

//获得这个元素

var elem=document.getElementById(elementId);

//判断这个元素的left坐标是否初始化了，如果没有初始化值为空，那么就给left坐标赋一个初值

if(!elem.style.left)elem.style.left="0px";

if(!elem.style.top)elem.style.top="0px";

//判断一下上一次方法有没有执行完，如果没有执行完就证明用户的鼠标又指向了另一处了,那么就把上一次的方法触发的方法取消掉

if(elem.stop)clearTimeout(elem.stop);

//获得LEFT的坐标

var x=parseInt(elem.style.left);

//获得top的坐标

var y=parseInt(elem.style.top);

//判断一下如果x  y坐标等于目标坐标了，那么就说明元素已经移动到了目标位置了

if(x==final_x&&y==final_y)return;

//判断一下，如果原本的left坐标比目标坐标小，就给left加一个像素的坐标

if(x<final_x){

);

x+=num;

}

//如果原本的top坐标比目标坐标小，就给top加一个像素的坐标

if(y<final_y){

);

y+=num;

}

//如果原本的坐标比目标坐标大，那么就证明当前坐标在目标坐标的右边，给当前坐标减一个像素

if(x>final_x){

);

x-=num;

}

if(y>final_y){

);

y-=num;

}

//把改变之后的left  top坐标再重新赋值

elem.style.left=x+"px";  //这些坐标都以px（像素）为单位，赋值的时候要给其加上px单位

elem.style.top=y+"px";

//用setTimeout方法递归调用自己，给一个时间频率，达到缓慢移动的动画效果

elem.stop= setTimeout("moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")",interval);//setTimeout的第一个参数需要的是js代码段的字符串，这里的move方法的参数如果不带""就会以字符串的形式传过去，而不是作为一个变量了，而move方法的第一个参数也是需要一个字符串，如果只是加上一个“”，那么这个这里的elementId里面的值传到方法里就变成来了moveElement(aaa,...),没有双引号，那就是一个变量了，所以还得把它再加上一个''

}

-->一个改变img的坐标的方法

function preparaPos(){

var elem=document.getElementById('mylist');

var geta=elem.getElementsByTagName('a');

geta[].onmouseover=function(){

moveElement(,,);

}

geta[].onmouseover=function(){

moveElement(,,);

}

geta[].onmouseover=function(){

moveElement(*,,);

}

geta[].onmouseover=function(){

moveElement(*,,);

}

}

--》用insertBefore自己写一个insertAfter方法

function insertAfter(newTag,exsitTag){

var parent=exsitTag.parentNode;

if(parent.lastChild==exsitTag){

parent.appendChild(newTag);

}else{

parent.insertBefore(newTag, exsitTag.nextSibling);

}

}

--》让window.onload可以累加方法

function addOnloadEvent(func){

var oldonload=window.onload;

if(typeof oldonload!='function'){

window.onload=func;

}else{

window.onload=function(){

oldonload();

func();

}

}

}

--》用css添加样式

#myimage{

border:1px;

width:314px;

height:196px;

overflow:hidden;

}

#m2{

position:relative;

left:-314px;

}

li{

margin:2em;

list-style-type:none;

float:left;

}

img{

border:0px;

}

--》HTML页的主代码，把样式和js代码都引进来

<!DOCTYPE html PUBLIC"-//w3c//DTD XHTML 1.0 Transitional.dtd//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dta">

<html xmlns="www.3c.org/1999/xhtml">

<head>

<title></title>

<script type="text/javascript" src="./scripts/addOnloadEvent.js"></script>

<script type="text/javascript" src="./scripts/moveElement.js"></script>

<script type="text/javascript" src="./scripts/preparaPos.js"></script>

<script type="text/javascript">

<!--

//addOnloadEvent(createElement);

addOnloadEvent(preparaPos);

-->

</script>

<link type="text/css" rel="stylesheet" href="./styles/layout.css" />

</head>

<body>

<ul id="mylist">

<li>

<a title="果果图片1" href="./img/1.jpg">

<img src="./smallphoto/1.jpg" alt="果果图片1" />

</a>

</li>

<li>

<a title="果果图片2" href="./img/2.jpg">

<img src="./smallphoto/2.jpg" alt="果果图片2" />

</a>

</li>

<li>

<a title="果果图片3" href="./img/3.jpg">

<img src="./smallphoto/3.jpg" alt="果果图片3" />

</a>

</li>

<li>

<a title="果果图片4" href="./img/4.jpg">

<img src="./smallphoto/4.jpg" alt="果果图片4" />

</a>

</li>

</ul>

<center><div id="myimage"><img id="m2" src="./img/美术馆.gif" /></div></center>

</body>

</html>