js的DOM编程艺术笔记(三)
2017-03-09 00:00
369 查看
1.JS实现动画效果:【动画就是让元素的位置随着时间不断的发生变化】
2.使用js编写动画效果:使用到setTimeout()方法来使得元素进行方向的移动
【核心:1.setTimeout()方法; 2.编码图片的来回闪动,确保只有一个setTimeout()函数,使用元素的属性作【eleNode.moveFlag:自定义属性】为变量接受 setTimeout的返回值,t同时使用clearTimeout来删除其他的setTimeout();3.函数的封装】
//移动函数
function doMove(eleId, final_x, final_y ,interval){
var eleNode = document.getElementById(eleId);
var px = parseInt(eleNode.style.left);
var py = parseInt(eleNode.style.top);
if(eleNode.moveFlag){
clearTimeout(eleNode.moveFlag);
}
if(px<final_x){
px++;
}
if(px>final_x){
px--;
}
if(py<final_y){
py++;
}
if(py>final_y){
py--;
}
eleNode.style.left = px+"px";
eleNode.style.top = py+"px";
var repeat = "doMove('"+eleId+"',"+final_x+","+final_y+","+interval+")";
eleNode.moveFlag = setTimeout(repeat, interval); //递归执行domove()函数
}
3:【待解决问题】在window.onload = function(){
var lis = document.getElementsByTagName("li");
for(var i = 0; i<lis.length;i++){
lis[i].onclick = function(){
this.style.fontWeight = "bold";//this和lis[i]的区分【js的闭包问题??】
}
}
}
4.js的DOM编程艺术的总结:
1.在DOM中节点就是对象
2.元素节点;文本节点;属性节点三者的关系【见笔记一中的图】
3.有些方法或者属性是针对不同的节点的【使用过程中注意】
4.每一个节点都有 nodeName, nodeType, nodeValue 这三个基本的属性
5.遍历节点: childNodes属性 : 找到给定元素节点的所有元素节点和文本节点【其中空格换行也被当作文本节点; children属性只返回所有的元素节点】;firstChild :第一个子节点 ; lastChild :最后一个子节点 ; nextSibling:给定元素的下一个节点【给定元素必须要和钙元素有共同的父节点,否则返回null】; parentNode : 返回父节点【parentNode只能返回一个元素节点,因为只有元素节点才会有子节点】;
previousSibling:返回给定元素的上一个元素【如果给定元素的前面没有同一个父节点的节点,则会返回null】
6.js写一个 一直返回的是元素节点的函数
function getEleNode(eleId){
var parentNode = document.getElementById(eleId);
var aryNode = parentNode.childNodes;
var aryEle = new Array();
var j =0;
for(var i=0;i<aryNode.length; i++){
if(aryNode[i].nodeType == 1){
aryEle[j] = aryNode[i];
j++;
}
}
return aryEle;
}
2.使用js编写动画效果:使用到setTimeout()方法来使得元素进行方向的移动
【核心:1.setTimeout()方法; 2.编码图片的来回闪动,确保只有一个setTimeout()函数,使用元素的属性作【eleNode.moveFlag:自定义属性】为变量接受 setTimeout的返回值,t同时使用clearTimeout来删除其他的setTimeout();3.函数的封装】
//移动函数
function doMove(eleId, final_x, final_y ,interval){
var eleNode = document.getElementById(eleId);
var px = parseInt(eleNode.style.left);
var py = parseInt(eleNode.style.top);
if(eleNode.moveFlag){
clearTimeout(eleNode.moveFlag);
}
if(px<final_x){
px++;
}
if(px>final_x){
px--;
}
if(py<final_y){
py++;
}
if(py>final_y){
py--;
}
eleNode.style.left = px+"px";
eleNode.style.top = py+"px";
var repeat = "doMove('"+eleId+"',"+final_x+","+final_y+","+interval+")";
eleNode.moveFlag = setTimeout(repeat, interval); //递归执行domove()函数
}
3:【待解决问题】在window.onload = function(){
var lis = document.getElementsByTagName("li");
for(var i = 0; i<lis.length;i++){
lis[i].onclick = function(){
this.style.fontWeight = "bold";//this和lis[i]的区分【js的闭包问题??】
}
}
}
4.js的DOM编程艺术的总结:
1.在DOM中节点就是对象
2.元素节点;文本节点;属性节点三者的关系【见笔记一中的图】
3.有些方法或者属性是针对不同的节点的【使用过程中注意】
4.每一个节点都有 nodeName, nodeType, nodeValue 这三个基本的属性
5.遍历节点: childNodes属性 : 找到给定元素节点的所有元素节点和文本节点【其中空格换行也被当作文本节点; children属性只返回所有的元素节点】;firstChild :第一个子节点 ; lastChild :最后一个子节点 ; nextSibling:给定元素的下一个节点【给定元素必须要和钙元素有共同的父节点,否则返回null】; parentNode : 返回父节点【parentNode只能返回一个元素节点,因为只有元素节点才会有子节点】;
previousSibling:返回给定元素的上一个元素【如果给定元素的前面没有同一个父节点的节点,则会返回null】
6.js写一个 一直返回的是元素节点的函数
function getEleNode(eleId){
var parentNode = document.getElementById(eleId);
var aryNode = parentNode.childNodes;
var aryEle = new Array();
var j =0;
for(var i=0;i<aryNode.length; i++){
if(aryNode[i].nodeType == 1){
aryEle[j] = aryNode[i];
j++;
}
}
return aryEle;
}
相关文章推荐
- JS DOM编程艺术——HTML5—— JS学习笔记2015-7-23(第90天)
- JS DOM编程艺术——重回图片库—— JS学习笔记2015-7-14(第84天)
- JS DOM编程艺术——JS综合实例—— JS学习笔记2015-7-29(第92天)
- JS DOM编程艺术——用JS实现动画效果—— JS学习笔记2015-7-21(第88天)
- JS DOM编程艺术-笔记
- JS DOM编程艺术——显示缩略语列表—— JS学习笔记2015-7-16(第85天)
- 最佳实践(js dom编程艺术第五章笔记)
- JS DOM编程艺术——DOM获取元素—— JS学习笔记2015-7-6(第77天)
- JS DOM编程艺术——显示文献来源链接表—— JS学习笔记2015-7-17(第86天)
- 动态创建标记(js dom编程艺术之第七章笔记)
- js的DOM编程艺术的学习笔记(一)
- JS DOM编程艺术的学习—— JS学习笔记2015-7-5(第76天)
- JS DOM编程艺术——CSS-DOM—— JS学习笔记2015-7-19(第87天)
- JS DOM编程艺术——图片库优化—— JS学习笔记2015-7-11(第82天)
- JS DOM编程艺术——setAttribute—— JS学习笔记2015-7-7(第78天)
- css-dom(js dom编程艺术第九章笔记)
- JS DOM编程艺术学习笔记(一)
- js的DOM编程艺术的笔记(二)
- 案例研究:图片库改进版(js dom编程艺术第六章笔记)
- JavaScript DOM 编程艺术(第二版) 初读学习笔记