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{ 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 <style>
 2 div{ 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>

<style>
div{ 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 删除上移下移

　　移到最顶部则不可再移动

拖拽

拖拽百度

拖拽封装

写一个多级菜单