文档章节

js的DOM编程艺术笔记(三)

哎那个新来的
 哎那个新来的
发布于 2017/03/09 17:41
字数 557
阅读 1
收藏 0

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;
}

© 著作权归作者所有

共有 人打赏支持
哎那个新来的
粉丝 0
博文 92
码字总数 29196
作品 0
闸北
程序员
第一章--JavaScript简介

1. JavaScript的构成 1.1. ECMAScript ECMAScript规定了核心语言的组成部分分别为:语法、类型、语句、关键字、保留字、操作符、对象。 宿主环境:Web浏览器、Node、Adobe Flash。 1.2. DOM...

lovewt
06/05
0
0
DOM对象和js对象以及jQuery对象的区别

DOM对象和js对象以及jQuery对象的区别 一、DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口。 DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修...

奋斗的雲
09/17
0
0
《JavaScript 权威指南》读书笔记 1 - 简介

原文:https://keelii.github.io/2016/06/16/javascript-definitive-guide-note-0/ 第一章 主要介绍 JavaScript 的大概情况、基本语法。之前没有 JavaScript 基础的看不懂也没关系,后续章节...

keelii
2016/06/24
0
0
《JavaScript DOM 编程艺术(第2版)》 推介

因为想学习一下前端的编程,所以搜罗了一些JavaScript的书目,其中就包括了这本,总的来说,并没有让我失望吧,推荐阅读,有人说这本书对于新手来说还是有些困难,但看过后,我认为这本书就是...

幸运的兔脚
2013/05/04
0
0
零基础的网站开发初学者如何系统的学习?

A.学习背景 开始网站开发,起先是从手机网站的UBB语法开始的,也因此有了深入学习的兴趣。为了让学习的热情膨胀,我有意的培养这一爱好 ,定位了自己要成为一名优秀的网站开发员的目标。 作为...

李佳顺
2012/12/25
0
3

没有更多内容

加载失败,请刷新页面

加载更多

20181018 上课截图

![](https://oscimg.oschina.net/oscnet/49f66c08ab8c59a21a3b98889d961672f30.jpg) ![](https://oscimg.oschina.net/oscnet/a61bc2d618b403650dbd4bf68a671fabecb.jpg)......

小丑鱼00
今天
1
0
WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
今天
2
0
OSChina 周五乱弹 —— 想不想把92年的萝莉退货

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @罗马的王:分享松澤由美的单曲《地球ぎ》 很久没看圣斗士星矢了 《地球ぎ》- 松澤由美 手机党少年们想听歌,请使劲儿戳(这里) @开源中国首...

小小编辑
今天
16
2
springBoot条件配置

本篇介绍下,如何通过springboot的条件配置,控制Bean的创建 介绍下开发环境 JDK版本1.8 springboot版本是1.5.2 开发工具为 intellij idea(2018.2) 开发环境为 15款MacBook Pro 前言 很多时候,...

贺小五
今天
1
0
javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部