-
domReady： html标签需要通过浏览器渲染引擎的解析才会变成dom节点，在刷新url地址的时候就有dom构建的过程。当所有html都转化为节点后，dom树才构建完毕，简称为dom ready。所以，一旦把script放在body前面，dom还没生成，就调用了dom(document.xxxx)明显是不行的（javascript以编写顺序解析---脚本语言）查看全部
-
html中各个元素节点的nodeName和nodeValue的获取以及演示代码查看全部
-
节点的nodeName与nodeValue查看全部
-
nodeType判断节点类型：<br><br> <br><br> 非ie中，可以使用字符串常量判断。divNode.nodeType == Node.ELEMENT_NODE。<br><br> ie中，由于没有Node对象，需使用数值判断。divNode.nodeType == 1(即元素节点的编号)。<br><br> <br><br> 故应该使用数值常量判断，可以兼容所有浏览器！<br> <br> <br> <br> <br> <br> <br> <br> <br> IE浏览器没有内置Node对象 nodeType判断节点类型： 非ie中，可以使用字符串常量判断。divNode.nodeType == Node.ELEMENT_NODE。 ie中，由于没有Node对象，需使用数值判断。divNode.nodeType == 1(即元素节点的编号)。 数值判断是通用的查看全部
-
元素节点， > 拥有子节点和文本，是唯一能拥有属性的节点类型<br> 属性节点， > 元素中的属性，是附属于元素的，是包含他的元素节点的一部分，不属于文档树的一部分<br> 文本节点， > 只包含文本内容(可以只包含空白)的节点，在xml中称为字符数据；<br> > 在文档树中元素的文本内容和属性的文本内容都是由文本节点表示的<br> > 某个节点的空白区域，也是属于文本节点<br> 注释节点： > 表示注释的内容<br> 文档节点： > 文档树的根节点，是其他节点的父节点； > 注意不是html或者xml的根元素。根元素是作为文档节点的子节点出现的<br> > 整个代码之上看做是文档节点<br> 文档类型节点： 例;<!doctype html><br> 文档片段节点： > 文档片段是轻量级的或者是最小的Document 对象，他表示文档的一部分或者是一段，他不属于文档树； > 他的特殊行为：占位符，暂时存放一次插入文档的节点，同时有利于剪贴复制操作查看全部
-
DocumentFragment节点使用示例，DocumentFragment文本片段节点可以作为一个占位符，来保存其他需要一次性插入文档的节点，当将其插入到某个节点内时，只是插入其所有子孙节点，其本身不会被插入！查看全部
-
xml是用来描述数据，重点是什么是数据，如何存放数据；与存放数据息息相关 html是用来显示数据的，重点是显示数据，如何显示数据更好查看全部
-
DOM1级主要定义了HTML和XML文档的底层结构。在DOM1中，DOM由两个模块组成：DOM Core（DOM核心）和DOM HTML。其中，DOM Core规定了基于XML的文档结构标准，通过这个标准简化了对文档中任意部分的访问和操作。DOM HTML则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法，如：JavaScript中的Document对象. DOM2级在原来DOM的基础上又扩充了鼠标、用户界面事件、范围、遍历等细分模块，而且通过对象接口增加了对CSS的支持。DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间。在DOM2中引入了下列模块，在模块包含了众多新类型和新接口： DOM视图（DOM Views）：定义了跟踪不同文档视图的接口 DOM事件（DOM Events）：定义了事件和事件处理的接口 DOM样式（DOM Style）：定义了基于CSS为元素应用样式的接口 DOM遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口 DOM3进一步扩展了DOM，在DOM3中引入了以下模块： DOM加载和保存模块（DOM Load and Save）：引入了以统一方式加载和保存文档的方法 DOM验证模块（DOM Validation）：定义了验证文档的方法 DOM核心的扩展（DOM Style）：支持XML 1.0规范，涉及XML Infoset、XPath和XML Base查看全部
-
DHTML 不是 W3C 标准 DHTML 指动态 HTML(Dynamic HTML)。 DHTML 不是由万维网联盟(W3C)规定的标准。DHTML 是一个营销术语 - 被网景公司(Netscape)和微软公司用来描述 4.x 代浏览器应当支持的新技术。 DHTML 是一种用来创建动态站点的技术组合物。 对大多数人来说，DHTML 意味着 HTML 4.0、样式表以及 JavaScript 的结合物。 W3C 曾讲过:"动态HTML是一个被某些厂商用来描述可使文档动态性更强的HTML、样式表以及脚本的结合物的术语。" DHTML 技术 通过 DHTML，Web 开发者可控制如何在浏览器窗口中显示和定位 HTML 元素。查看全部
-
DOM级别 DOM 1级别目标映射文档结构 DOM Core：规定如何映射基于XML的文档结构，以便简化对文档任何部分的访问和操作 DOM HTML：是在DOM核心的基础上加以扩展，添加了针对HTML的对象的** DOM 2级别 DOM Views 即DOM视图，跟踪不同文档的视图接口 DOM Events 即DOM事件 定义事件和事件的处理接口 DOM Style 定义基于css 为元素应用样式的接口 DOM Traversal and Range 即DOM遍历和范围 定义遍历和操作文档树的接口 DOM 3级别 进一步扩展了DOM DOM Load And Save 定义统一加载和保存的方法 DOM Validation 定义验证文档的方法查看全部
-
slidingdoors.js代码： window.onload=function(){ // div容器对象 var box=document.getElementById('container'); // 图片对象列表集合 var imgs=box.getElementsByTagName('img'); // 单张图片的宽度 var imgWidth=imgs[0].offsetWidth; // 掩藏门体露出的宽度 var exposeWidth=160; // box宽度 var boxWidth=imgWidth+(imgs.length-1)*exposeWidth; // 设置box宽度 box.style.width=boxWidth+'px'; // 设置每道门的初始位置 function setImgsPos(){ for(var i=1,len=imgs.length;i<len;i++){ imgs[i].style.left=imgWidth+(i-1)*exposeWidth+'px'; } } setImgsPos(); // 计算每道门打开时移动的距离 var translate=imgWidth-exposeWidth; // 为每道门绑定事件 for(var i=0,len=imgs.length;i<len;i++){ (function(i){ imgs[i].onmouseover=function(){ setImgsPos(); for(var j=1;j<=i;j++){ imgs[j].style.left=parseInt(imgs[j].style.left,10)-translate+'px'; } } })(i); } }查看全部
-
实现门体的滑动： 2，代码： for(var i=0,len=imgs.length;i<len;i++){ (function(i){ imgs[i].onmouseover=function(){ setImgsPos(); for(var j=1;j<=i;j++){ imgs[j].style.left=parseInt(imgs[j].style.left,10)-translate+'px'; } } })(i); }查看全部
-
实现门体的滑动： 1，思路： 为每道门绑定事件: 本次循环的初始值为0，因为全部图片都需要绑定事件。 为了在循环退出以后，还能保存不同的i值，这里使用了立即调用函数表达式 使用立即调用函数表达式，为了获得不同的i值 接着我们为每一个图片绑定onmouseover事件, 在事件处理函数里边，我们先将每道门复位。然后去定义它们 滑动以后的位置，先将每道门复位，下面来实现开门滑动的效果： 我们回到浏览器，观察一下，当所有图片归位以后，当鼠标 滑到要打开的门的时候，比如说第三张，我们只需要将第二张 和第三张图片向左滑动即可，其他的图片滑动的规律类型。 比如我们放到第4张，我们需要将第2张，第3张，第4张都向 左滑动，这就是图片滑动的规律 先将每道门复位：setImgsPos(); 根据图片滑动的规律，要实现打开门，只需要处理第2张图片到 当前图片的所有图片即可。因此for循环从1开始，到i结束， 由于第二张图片的下标是1，因此j=1 接着让这些图片的定位的left的值等于自身当前的left的值 减去滑动距离translate，最后加上单位px 这里解释一下： 由于style.left返回的是一个字符串，它带有px。 因此如果要和translate进行算术运算的话，就需要 使用后parseInt这个方法，将这个字符串转化成数值， 好，到此这个案例的js代码和DOM操作的代码就编写完毕了。 到浏览器上看一下效果查看全部
-
设置每道门的初始位置：<br> 1，思路：<br> 当前状态是第一张图片打开，<br> 我们来看4张图片的具体位置：<br> 第一张图片的位置距离容器左侧为0，<br> 第二张图片的位置距离容器左侧为1张图片的宽度。<br> 第三张图片的位置距离容器左侧为1张图片的宽度加上一个堆叠的宽度<br> 第四张图片的位置距离容器左侧为1张图片的宽度加上两个堆叠的宽度<br> 以此类推。<br> 返回代码，根据刚才直观的查看。想要设置4个图片的位置，就需要知道：<br> 单张图片的宽度，和需要定义堆叠的宽度<br> 我们回到效果，我们要设置每张图片的位置，我们应该将总盒子的宽度设置<br> 为它应该的值，这样的话我们的盒子才正好将所有的图片包含在内。那么盒子<br> 的宽度应该等于：单张打开图片的宽度加上剩余图片堆叠宽度的和。<br> <br> 设置每道门的初始位置：<br> 我们通过for循环一并为所有图片进行定位。<br> 由于第一道门距离容器左侧为0，我们无需设置它的位置，因此我们<br> 循环的累加变量初始值i为1。我们再来定义一个变量来缓存图片的个数。<br> <br> 在循环体里：<br> 通过调用imgs[i]来获取每个图片对象，调用它的style对象的left属性<br> 来设置图片相对于容器的绝对定位。<br> <br> 2，代码：<br> function setImgsPos(){<br> for(var i=1,len=imgs.length;i<len;i++){<br> imgs[i].style.left=imgWidth+(i-1)*exposeWidth+'px';<br> }<br> } 这个函数是要执行一次的 setImgsPos(); 计算每道门打开时移动的距离 var translate=imgWidth-exposeWidth;查看全部
-
编写slidingdoors.js的思路和步骤：<br> <br> 第一步：得到DOM对象：<br> 思路：<br> 1，第一步先定义 页面加载完毕再进行DOM操作 的方法。<br> window.onload表示等到页面所有的元素都加载完毕，并且所有要请求的资源也<br> 加载完毕，才触发function这个匿名函数里面的内容。<br> 这里的onload就是DOM范畴的其中一个部分内容：事件。<br> 我们要实现和页面进行交互，就要通过js来操作页面元素或者说操作DOM。<br> 而要想操作DOM，就必须找到DOM的元素节点，也就是要找到操作的对象。<br> 2，我们先获得div这个容器对象，通过这个容器对象，我们可以获得这4张图片的<br> 对象集合，我们又管它叫做nodelist对象。<br> 3，var box=document.getElementById('container');<br> var imgs=box.getElementsByTagName('img');<br> 这是非常典型的查找文档对象的方法。<br> <br> 代码：<br> var box=document.getElementById('container');<br> var imgs=box.getElementsByTagName('img'); 单张图片的宽度： var imgWidth=imgs[0].offsetWidth; 设置掩藏门体漏出的宽度 这个值可以按需要自行定义 var exposeWidth=160; 容器的总宽度 var boxWidth=imgWidth+(imgs.length-1)*exposeWidth; 通过js代码设置容器的css样式的宽度：记得后面要加上一个单位px box.style.width=boxWidth+'px';查看全部
举报
0/150
提交
取消