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

  移到最顶部则不可再移动

拖拽

拖拽百度

拖拽封装

写一个多级菜单

posted @ 2017-03-16 00:49  萌面君  阅读(199)  评论(0编辑  收藏  举报