一、DOM
1、onclick事件
表示点击
一般用在--》跳转
a标签,希望点击的时候不去跳转,而是做别的事情,并在里面返回一个false
<a href="http://www..." onclick="return false"></a>
--》注册
用法:onclick="js代码";
onclick=方法名;
2、节点中的常用属性
--》nodeType
有12种取值,常用的: 元素 1 ,属性 2 ,文本 3 。
--》nodeName
获得节点的名字
--》nodeValue
获得节点的值
--》childNodes
获得某个节点下的所有子节点,返回一个集合
-->firstChild
获得某个节点下的第一个子节点
-->lastChild
获得某节点下的最后一个字节点
注意:在谷歌浏览器与火狐浏览器中对于节点的描述与IE8的描述不同(IE9以上可能与谷歌的类似)
<ul>
<li></li>
<li></li>
</ul>
IE8在解释该结构的时候认为ul节点的子节点为<li>和<li>,所以IE8描述这个ul下面只有两个li元素子节点
而谷歌、火狐浏览器在解释结构的时候会认为ul和li之间还有一个换行(\n)它也会认为是一个空文字子节点,所以在使用firstChild获取第一个字节点的时候
在谷歌、火狐浏览器上面会得到一个空对象会报错使用的时候需要注意
3、常用方法
---》getElementById
获取指定id所对应的节点
var elements= document.getElementById("123");
<p id="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>