JavaScript第二周 part1
预解析：
函数和变量有预解析
把声明提到最顶部
作用域：
局部：函数以内的变量
全局：所有函数以外
闭包：子级用父级的变量，任何形式的函数套函数都是闭包
JSON
json就是一个对象，json=Object
var json={ name:value,name:value };
存数据用的
var str=勺子:50元,梳子:50元,镜子:50元,香水:50元
{勺子:50￥}
这个字符串转数组该如何操作？
引用
只有对象（数组和json）有引用
改一个地方两个值都变
两个对象完全互等（会有引用问题：共用一块内存地址）
DOM
A) DOM选取元素
1.obj.children 选取所有子级
2.obj.tagName 选取标签名
3.obj.parentNode 选取父级
4.obj.childNodes 选取所有子级（包括空节点）
5.obj.firstElementChild||obj.firstChild; 获取第一个子级（也就是obj.children[0];）
分割线后面是兼容低版本浏览器的写法
6.obj.lastElementChild||obj.lastChild; 获取最后一个子级（也就是obj.children[obj.children.length-1];）
7.obj.previousElementSibling||obj.previousSibling; 获取上一个兄弟节点
示例：
1 <div id="div1"> 2 <p>p</p> 3 <span>span</span> 4 </div>
<script> window.onload=function (){ var oDiv=document.getElementById('div1'); var oS=oDiv.children[1]; var oP=oS.previousElementSibling||oS.previousSibling; alert(oP.tagName); }; </script>
8.obj.nextElementSibling||obj.nextSibling;获取下一个兄弟节点
B) DOM操作元素：
*1.创建 必须在document下创建
var obj=document.creatElement('li'); 创建一个li
*2.插入 在父级插入
父级. appendChild(obj); 最后添加
父级.insertBefore(obj,在谁前面添加);
创建插入的示例（body为空）：
思路：在body里面创建一个div元素（oDiv）（oDiv是子级），定义oDiv的内容是一个× ，把oDiv添加到body的子级的最后一项
1 <style> 2 div{ width:100px; height:100px; background:#ccc; color:#fff; font-size:30px; } 3 </style>
1 <script> 2 window.onload=function (){ 3 var oBody=document.body; 4 var oDiv=document.createElement('div'); 5 oDiv.innerHTML='×'; 6 oBody.appendChild(oDiv); 7 }; 8 </script>
*3.删除
父级.removechild(obj);
插入删除的案例
一）只隐藏
1 <style> 2 div{ width:100px; height:100px; background:#ccc; color:#fff; font-size:30px; } 3 </style>
4 <script> 5 window.onload=function (){ 6 var oBody=document.body; 7 var oDiv=document.createElement('div'); 8 oDiv.innerHTML='<span>×</span>'; 9 oBody.appendChild(oDiv); 10 11 var oS=oDiv.children[0]; 12 13 oS.onclick=function (){ 14 oDiv.style.display='none'; 15 }; 16 };
</script>
二）彻底删除
1.
1 <style> 2 div{ width:100px; height:100px; background:#ccc; color:#fff; font-size:30px; } 3 </style> 4 <script> 5 window.onload=function (){ 6 var oBody=document.body; 7 var oDiv=document.createElement('div'); 8 oDiv.innerHTML='<span>×</span>'; 9 oBody.appendChild(oDiv); 10 11 var oS=oDiv.children[0]; 12 13 oS.onclick=function (){ 14 oBody.removeChild(oDiv); 15 }; 16 }; 17 </script> 18 </head> 19 20 <body> 21 sfdsafsafas 22 </body>
2.
<style> div{ width:100px; height:100px; background:#ccc; color:#fff; font-size:30px; } </style> <script> window.onload=function (){ var oBody=document.body; var oDiv=document.createElement('div'); oDiv.innerHTML='<span>×</span>'; oBody.insertBefore(oDiv,oBody.children[0]); var oS=oDiv.children[0]; oS.onclick=function (){ oBody.removeChild(oDiv); }; }; </script> </head> <body> <div></div> </body>
三、简易留言板 带删除功能
1 <script> 2 window.onload=function (){ 3 var oTxt=document.getElementById('txt'); 4 var oBtn=document.getElementById('btn'); 5 var oUl=document.getElementById('ul'); 6 7 oBtn.onclick=function (){ 8 var oLi=document.createElement('li'); 9 oLi.innerHTML=oTxt.value+'<a href="javascript:;">删除</a>'; 10 oUl.appendChild(oLi); 11 12 oTxt.value=''; 13 14 var oA=oLi.children[0]; 15 16 oA.onclick=function (){ 17 oUl.removeChild(this.parentNode); 18 }; 19 }; 20 }; 21 </script> 22 </head> 23 24 <body> 25 <input type="text" id="txt" /> 26 <input id="btn" type="button" value="添加" /> 27 <ul id="ul"> </ul> 28 </body>
简易留言板2
<script> window.onload=function (){ var oTxt=document.getElementById('txt'); var oBtn=document.getElementById('btn'); var oUl=document.getElementById('ul'); oBtn.onclick=function (){ var oLi=document.createElement('li'); oLi.innerHTML=oTxt.value+'<a href="javascript:;">删除</a>'; oUl.insertBefore(oLi,oUl.children[0]); oTxt.value=''; var oA=oLi.children[0]; oA.onclick=function (){ oUl.removeChild(this.parentNode); }; }; }; </script> </head> <body> <input type="text" id="txt" /> <input id="btn" type="button" value="添加" /> <ul id="ul"> </ul> </body>
*4、获取物体信息
获取物体高度obj.offsetWidth
获取物体宽度obj.offsetHeight
相对距离：
相对于定位父级，元素距离左边的距离obj.offsetLeft
相对于定位父级，元素距离上边的距离obj.offsetTop
绝对距离：（这个性能高，但是在ie7会多两个像素）
左侧距离窗口的距离 obj. getBoundingClientRect().left
右侧到窗口距离obj. getBoundingClientRect().right
顶部到窗口距离obj. getBoundingClientRect().top
底部到窗口距离obj. getBoundingClientRect().bottom
兼容性的解决方案：自己封装一个方法
这个自己写的方法在ie7不会多两个像素，但是性能赶不上原生的
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6 <meta name="apple-mobile-web-app-capable" content="yes"> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 8 <title></title> 9 10 <style> 11 #div1{ width:500px; height:500px; background:red; position:absolute; margin:100px; } 12 #div2{ width:300px; height:300px; background:yellow; position:absolute; margin:100px; } 13 #div3{ width:100px; height:100px; background:green; position:absolute; margin:100px; } 14 </style> 15 16 <script> 17 function getPos(obj){ 18 var l=0; 19 var t=0; 20 21 while(obj){ //不知道个数（循环次数）用while循环 22 l+=obj.offsetLeft; 23 t+=obj.offsetTop; 24 25 obj=obj.offsetParent; 26 } 27 28 return {left:l,top:t}; //花括号里面是一个json方法 29 } 30 window.onload=function (){ 31 var oDiv=document.getElementById('div3'); 32 33 alert(getPos(oDiv).left); 34 }; 35 </script> 36 37 </head> 38 39 <body> 40 <div id="div1"> 41 <div id="div2"> 42 <div id="div3"></div> 43 </div> 44 </div> 45 </body> 46 </html>
*5、offsetParent 定位父级
----------------DOM end---------------------
---------事件------------------------------------
1.事件
onmouseover
onmouseout
onclick
onfocus
onblur
onload
onmousedown按下
onmousemove鼠标移动（不是拖动）
onmouseup 鼠标放开（不是移出）
2.事件对象
2.1 鼠标距离
function (ev){ ev是形参，可以换成别的
ev.clientX 鼠标距离页面的x
ev.clientY 鼠标距离页面的y
}
1 <script> 2 document.onclick=function (ev){ 3 alert(ev.clientX+','+ev.clientY); 4 }; 5 </script>
3.拖拽
1 <style> 2 div{ width:200px; height:200px; background:red; position:absolute; left:0; top:0; } 3 </style> 4 5 <script> 6 window.onload=function (){ 7 var oDiv=document.getElementById('div1'); 8 9 oDiv.onmousedown=function (ev){ 10 var oldX=ev.clientX-oDiv.offsetLeft; 11 var oldY=ev.clientY-oDiv.offsetTop; 12 document.onmousemove=function (ev){ //按一下事件就结束了 剩下的都发生在document上面 13 var newX=ev.clientX; 14 var newY=ev.clientY; 15 16 oDiv.style.left=newX-oldX+'px'; 17 oDiv.style.top=newY-oldY+'px'; 18 }; 19 document.onmouseup=function (){ //按一下事件就结束了 剩下的都发生在document上面 20 document.onmousemove=null; 21 }; 22 23 //阻止浏览器默认事件,让拖动的时候不会选中其他的元素 24 return false; 25 }; 26 }; 27 </script> 28 29 </head> 30 31 <body> 32 afdsafas 33 <div id="div1"></div> 34 </body>
！！！ return false;
3.1 窗口可视区的宽高
document.documentElement.clientWidth
document.documentElement.clientHeight
3.2 限制边界的拖拽
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6 <meta name="apple-mobile-web-app-capable" content="yes"> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 8 <title></title> 9 <style> 10 div{ width:200px; height:200px; background:red; position:absolute; left:0; top:0; } 11 </style> 12 <script> 13 window.onload=function (){ 14 var oDiv=document.getElementById('div1'); 15 16 oDiv.onmousedown=function (ev){ 17 var oldX=ev.clientX-oDiv.offsetLeft; 18 var oldY=ev.clientY-oDiv.offsetTop; 19 document.onmousemove=function (ev){ 20 var newX=ev.clientX; 21 var newY=ev.clientY; 22 var l=newX-oldX; //在移动的时候判读可视区域的大小 23 var t=newY-oldY; 24 25 if(l<0){ 26 l=0; 27 }else if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){ 28 l=document.documentElement.clientWidth-oDiv.offsetWidth 29 } 30 if(t<0){ 31 t=0; 32 }else if(t>=document.documentElement.clientHeight-oDiv.clientHeight){ 33 t=document.documentElement.clientHeight-oDiv.clientHeight 34 } 35 36 oDiv.style.left=l+'px'; 37 oDiv.style.top=t+'px'; 38 }; 39 document.onmouseup=function (){ 40 document.onmousemove=null; 41 }; 42 43 //阻止浏览器默认事件 44 return false; 45 }; 46 }; 47 </script> 48 </head> 49 50 <body> 51 afdsafas 52 <div id="div1"></div> 53 </body> 54 </html>
3.3 拖拽的磁性吸附
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6 <meta name="apple-mobile-web-app-capable" content="yes"> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 8 <title></title> 9 <style> 10 div{ width:200px; height:200px; background:red; position:absolute; left:0; top:0; } 11 </style> 12 <script> 13 window.onload=function (){ 14 var oDiv=document.getElementById('div1'); 15 16 oDiv.onmousedown=function (ev){ 17 var oldX=ev.clientX-oDiv.offsetLeft; 18 var oldY=ev.clientY-oDiv.offsetTop; 19 document.onmousemove=function (ev){ 20 var newX=ev.clientX; 21 var newY=ev.clientY; 22 var l=newX-oldX; 23 var t=newY-oldY; 24 25 if(l<100){ 26 l=0; 27 }else if(l>=document.documentElement.clientWidth-oDiv.offsetWidth-100){ 28 l=document.documentElement.clientWidth-oDiv.offsetWidth 29 } 30 if(t<100){ 31 t=0; 32 }else if(t>=document.documentElement.clientHeight-oDiv.clientHeight-100){ 33 t=document.documentElement.clientHeight-oDiv.clientHeight 34 } 35 36 oDiv.style.left=l+'px'; 37 oDiv.style.top=t+'px'; 38 }; 39 document.onmouseup=function (){ 40 document.onmousemove=null; 41 }; 42 43 //阻止浏览器默认事件 44 return false; 45 }; 46 }; 47 </script> 48 </head> 49 50 <body> 51 afdsafas 52 <div id="div1"></div> 53 </body> 54 </html>
写百度的拖拽
只有上边的一条可以拖拽
多个div拖拽的封装
浏览板 参考各大网站
内容可以上移下移
123 删除 上移 下移
456 删除 上移 下移
移到最顶部则不可再移动
拖拽
拖拽百度
拖拽封装
写一个多级菜单
