js节点和无缝滚动

来源：互联网发布：ubuntu 删除非空目录编辑：程序博客网时间：2024/05/29 13:06

节点的增删改复制的操作

用到的方法和属性
1、获取某个节点的父节点
parentNode属性
2、获取某个节点的子节点集合
childNodes属性
3、创建一个新的节点
createTextNode（节点文本内容）document对象的方法在某些浏览器上兼容性不是很好
createElemen（对象）document对象的方法例如:document.createElement(“a”);
4、给某个节点对象添加属性和属性值
setAttribute（属性，属性值）；aNode.setAttri（“href”,”http://www.baidu.com“）;
5、替换某个节点下的子节点
replaceChild（新节点，原子节点）；
6、将某个节点添加到一个节点下
appendChild（要添加的节点）
7、克隆某个节点
cloneNode() 不传参数和传入true参数一样，表示克隆该节点包括子节点

<!DOCTYPE html><html><head><title>node_CURD.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--><style type="text/css">div{border: red 1px solid;width: 200px;height: 50px;margin: 20px 30px;padding: 20px;}#div_1{clear:both;background-color:#FF3366;}#div_2{clear:both;background-color:#6699FF;}#div_3{clear:both;background-color:#CCCC99;}#div_4{clear:both;background-color:#00CC33;}</style><script type="text/javascript">// 增加方式一：给第一个div区域添加文本function addText(){//1.获取要添加文本内容的节点var div_1Node = document.getElementById("div_1");//2.创建一个文本节点。document对象的createTextNode(文本内容)方法。某些浏览器不支持。var TextNode = document.createTextNode("这不就显示了吗？");//3.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法div_1Node.appendChild(TextNode);}// 增加方式二：给第一个div区域添加按钮function addButton(){//1.获取要添加文本内容的节点var div_1Node = document.getElementById("div_1");//2.创建一个节点。document对象的createElement()var aNode = document.createElement("input");//3.给指定对象添加属性和属性值//aNode.setAttribute("type","button");//和下面一句代码达到的效果一样aNode.type="button";aNode.setAttribute("value","按钮");aNode.setAttribute("onclick","deleteText('div_1')");//4.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法div_1Node.appendChild(aNode);}// 删除方式一：删除第二个区域的节点的子节点function deleteText(NodeId){//1.获取块节点var divNode = document.getElementById(NodeId);//2.获取子节点，即文本节点var chileNode = divNode.childNodes[0];//3.删除，传入一个参数true会删除其下所有子节点//chileNode.removeNode(); // 此方式在火狐和谷歌下不兼容divNode.removeChild(chileNode);}// 删除方式二：删除元素function deleteElement(){//1.获取块节点var div_2Node = document.getElementById("div_2");//2.获取父节点，var parentNode = div_2Node.parentNode;//3.删除parentNode.removeChild(div_2Node);}// 修改function UpdateText(){//1获取要修改字符的区域的节点var div_3Node = document.getElementById("div_3");//2.获取第一步中的子节点集合，指定到要修改的节点var childNode = div_3Node.childNodes[0];//3.创建一个文本节点var newNode = document.createTextNode("哈哈，我把你替换了.");//4.用3步创建的节点替换2步骤中的节点//childNode.replaceNode(newNode);//此方式在火狐和谷歌下不兼容div_3Node.replaceChild(newNode,childNode);}//克隆function copyNode(){//1.获取第四区域节点var div_1Node = document.getElementById("div_1");//2.获取第一区域节点var div_4Node = document.getElementById("div_4");//3.获得一个新节点通过克隆第四节点var newNode = div_4Node.cloneNode();//传入参数true表示克隆整个节点，包括子节点.默认是true参数的结果//4.将步骤3的新节点替换掉原来的第一节点div_1Node.parentNode.replaceChild(newNode,div_1Node);}</script></head><body><div id="div_1"></div><div id="div_2">这里是第二个区域</div><div id="div_3">这里是第三个区域</div><div id="div_4">这里是第四个区域</div><hr /><font size="12px">增：</font><input type="button" value="给第一个区域增加文本" onclick="addText()" /><input type="button" value="给第一个区域增加一个按钮" onclick="addButton()" /><hr /><font size="12px">删：</font><input type="button" value="删除第二区域的文本内容" onclick="deleteText('div_2')" /><input type="button" value="删除第二个区域" onclick="deleteElement()" /><hr /><font size="12px">改：</font><input type="button" value="修改第三个区域中的内容" onclick="UpdateText()" /><hr /><font size="12px">克隆：</font><input type="button" value="将第四区域克隆到第一区域" onclick="copyNode()" /></body></html>

无缝滚动的结构
一共两个盒子，第一个大盒子下套第二个大盒子，第二个大盒子下有4张图片，第一个大盒子固定宽度，第二个大盒子宽度是400%；
原理：
第一个盒子相对浮动，第二个盒子绝对浮动，让第二个盒子的left值一直变化。当left值小于等于4张图片的宽度的时候，让left值瞬间归0.

例如：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">        *{padding: 0;margin: 0;}            #box{                width: 740px;                height: 116px;                position: relative;                 margin: 100px;                overflow: hidden;                       }            #box ul{                position: absolute;                left: 0px;                top: 0px;                clear: both;            }            #box ul li{                width: 185px;                height: 116px;                list-style: none;                float: left;            }        </style>        <script type="text/javascript">            window.onload=function(){                var oBox=document.getElementById('box');                var oUl=oBox.getElementsByTagName('ul')[0];                var aLi=oUl.getElementsByTagName('li');                var oBtn1=document.getElementById('btn1');                var oBtn2=document.getElementById('btn2');                var speed=-2;                oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//2个ul                oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';                function move(){                    if(oUl.offsetLeft<-oUl.offsetWidth/2){                        oUl.style.left='0px';                    }                    if(oUl.offsetLeft>0){                        oUl.style.left=-oUl.offsetWidth/2+'px';                    }                    oUl.style.left=oUl.offsetLeft+speek+'px';                }                var timer=setInterval(move,30);                oBtn1.onclick=function(){                    speek=-2;                }                oBtn2.onclick=function(){                    speek=2;                }            }        </script>    </head>    <body>        <input type="button" name="btn1" id="btn1" value="向左" />        <input type="button" name="btn2" id="btn2" value="向右" />        <div id="box">            <ul>                <li><img src="img/a1.jpeg"/></li>                <li><img src="img/a2.jpeg"/></li>                <li><img src="img/a3.jpeg"/></li>                <li><img src="img/a4.jpeg"/></li>            </ul>        </div>    </body></html>

offset家族
1.1 三大家族和一个事件对象
三大家族（offset/scroll/client）
事件对象/event （事件被触动时，鼠标和键盘的状态）（通过属性控
制）

1.2 Offset家族简介
offset这个单词本身是–偏移，补偿，位移的意思。
js中有一套方便的获取元素尺寸的办法就是offset家族；
offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent
共同组成了offset家族。
1.2.1 o f f s e t W i d t h和offsetHight （检测盒子自身宽高+padding+border）
这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个
属性，我们就能够获取元素节点的宽和高。
offset宽/高 = 盒子自身的宽/高 + padding +border；
offsetWidth = width+padding+border；
offsetHeight = Height+padding+border；
1.2.2 o f f s e t L e f t和offsetTop （检测距离父盒子有定位的左/上面的距
离）
返回距离上级盒子（带有定位）左边s的位置
如果父级都没有定位则以body为准
offsetLeft 从父亲的padding 开始算,父亲的border 不算。
在父盒子有定位的情况下，offsetLeft == style.left(去掉px)
1.2.3 o f f s e t P a r e n t （检测父系盒子中带有定位的父盒子节点）
1、返回改对象的父级（带有定位）
如果当前元素的父级元素没有进行CSS定位（position为absolute
或relative，fixed）， offsetParent为body。
2、如果当前元素的父级元素中有CSS定位（position为absolute
或relative，fixed）， offsetParent取最近的那个父级元素。

1.3 offsetLeft和style.left区别
一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。
而 style.top 不可以

二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外
还带有单位：px。

三、offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋
值）

四、如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符
串。

style.left在=的左边和右边还不一样。
（左边的时候是属性，右边的时候是值）

0 0