一、原生JS快捷的尺寸(属性)

clientWidth/clientHeight 　　　　　　=====> 获得元素content+padding的宽/高；
offsetWidth/offsetHeight　　　　　　=====>获得元素content+padding+border的宽/高；
clientLeft/clientTop =====>左/上边框的距离；
offsetLeft/offsetTop =====>获得距离父元素定位左/上的距离 IE浏览器计算边框 // 高级浏览器不计算边框；
offsetParent =====>获得定位的父元素的信息（父元素不一定是parentNode,若没有定位，则往祖 1 <!DOCTYPE html>

1-2的案例

<!DOCTYPE html> 
<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style>
     *{
         padding: 0;
         margin: 0;
     }
     div{
         width: 200px;
         height: 200px;
         border: 10px solid black;
         background-color:orange;
         padding:16px;
         margin:20px;
     }
     </style>
 </head>
 <body>
    <div id="box">i love you</div>
     <script>
     //原生JS 
     //clientWidth/Height===content+padding
     //offsetWidth/Height===content+padding+border
     var div=document.getElementsByTagName("div")[0];
     //获得尺寸
     console.log(div.clientWidth,div.clientHeight);
     console.log(div.offsetWidth,div.offsetHeight);
     </script>
 </body>
 </html>

3的案例:　　　　　　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 200px;
        height: 200px;
        border: 10px solid black;
        position: relative;
        border-left:30px solid blue;
        border-top:40px solid green;
        background-color:orange;
        padding:16px;
        margin:20px;
    }
    </style>
</head>
<body>
    <div id="box">i love you</div>
    <script>
    //原生JS 
    //clientLeft/Top    获得左/上边框的宽度 
    var div=document.getElementsByTagName("div")[0];
    //获得尺寸
    console.log(div.clientLeft,div.clientTop);
    </script>
</body>
</html>

4-5的案例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9     *{
10         padding: 0;
11         margin: 0;
12     }
13     #carousel{
14         position:relative;
15         width:200px;
16         height: 200px;
17         border: 1px solid red;
18         margin: 0 auto;
19     }
20     #box{
21         position:absolute;
22         left:20px;
23         top:30px;
24         width: 50px;
25         height: 50px;
26         background-color:orange;
27     }
28     </style>
29 </head>
30 <body>
31     <div id="carousel">
32         <div id="unit">
33             <div id="box"></div>
34         </div>
35     </div>
36     <script>
37     //获得元素对象
38     var box=document.getElementById("box");
39     // offsetParent() 获得定位的祖先元素(若父元素没有就一直玩上找 直到定位元素body)
40     // offsetLeft/Top 获得距离父元素左/上的位置
41     console.log(box.offsetParent)
42     console.log(box.parentNode);
43     console.log(box.offsetLeft);
44     console.log(box.offsetTop);
45     </script>
46 </body>
47 </html>

二、jquery的快捷尺寸(方法)

offset() 　　　========获得到页面的距离；
position() 　　　========获得元素的定位信息；
width()/height()　　　　　　　　　========获得元素content的宽/高；
innerWidth()/innerHeight() 　　　=============获得元素content+padding的宽/高；
outerWidth()/outerHeight()　　　=====默认(false)获得元素content+padding+border的宽/高；设置(true)获得元素content+padding+border+margin的宽/高；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9     *{
10         padding: 0;
11         margin: 0;
12     }
13     div{
14         width: 200px;
15         height: 200px;
16         border: 10px solid black;
17         position: relative;
18         padding:16px;
19         margin:20px;
20     }
21     </style>
22 </head>
23 <body>
24     <div id="box">i love you</div>
25     <script src="../js/jquery-1.12.3.min.js"></script>
26     <script>
27     //Jquery的快捷尺寸 
28     //width/height()  ===content
29     //innerWidth/Height()===content+padding
30     //outerWidth/Height(false)===content+padding+border//默认false
31     //outerWidth/Height(true)===content+padding+border+margin
32          
33     // 获得元素对象
34     var $div=$("#box");
35     console.log("innerWidth",$div.innerWidth(),"innerHeight",$div.innerHeight());
36     console.log("outerWidth",$div.outerWidth(),"outHeight",$div.outerHeight());//默认false
37     console.log("outerWidth",$div.outerWidth(true),"outHeight",$div.outerHeight(true));
38     </script>
39 </body>
40 </html>

三、滚动条事件

1 onscroll（滚动条滚动的事件，鼠标的滚轮、上下键、空格、PgUp、PgDn）；

2 获得页面滚动条的卷动值

垂直方向：document.documentElement.scrollTop;

水平方向：document.documentElement.scrollLeft;

3 获得视口的宽度和高度：

宽度：document.documentElement.clientWidth；

高度：document.documentElement.clientHeight；

四、鼠标滚轴

1 滚轴事件（注意兼容）

谷歌/IE： mousewheel

火狐：DOMMouseScroll 只支持DOM2事件绑定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <script>
11         //DOM 2级事件兼容绑定
12         function addHandler(e,type,handler){
13             if(e.addEventListener){
14                 //高级浏览器// 火狐与谷歌IE的滚轴事件不同 这里兼容下
15                 ////滚轴事件 火狐 DOMMouseScroll   detail的值为正 则是鼠标向上；为负则是向下。
16                 // 非火狐 mousewheel  wheelDelta的值为正 则是鼠标向上；为负则是向下。
17                 if(type==="DOMmouseScroll"){
18                     e.addEventListener(type,handler,false);
19                 }else{
20                     e.addEventListener(type,handler,false);
21                 }
22             }else if(e.attachEvent){
23                 //IE高级浏览器
24                 e.attachEvent("on"+type,handler);
25             }else{
26                 //IE8及以下低端浏览器
27                 e["on"+type]=handler
28             }
29         }
30          //DOM 2级事件兼容移除
31         function removeHandler(e,type,handler){
32           if(e.removeEventListener){
33               e.removeEventListener(type,handler,false);
34           }else if(e.detachEvent){
35               e.detachEvent(type,handler);
36           }else{
37               e["on"+type]=handler;
38           }
39         }
40         addHandler(document,"mousewheel",function(){
41             console.log(111);
42         })
43     </script>
44 </body>
45 </html>

2 滚轴的方向

谷歌和IE：e.wheelDelta （值向上为正，向下为负）

火狐: e.detail　　　　　　　　（值向上为负,向下为正）

3 键盘三事件

keydown 键盘按下事件

keypress 键盘按下未抬起事件

keyup 键盘抬起事件

执行顺序：

keydown======>keypress=====>keyup

4 tabIndex （属性）定义：当给一些不能获得焦点的元素绑定键盘事件的时候，首先应该设置tabIndex属性

tabIndex属性可以让元素获得焦点

tabIndex的属性值控制获得焦点的顺序

tab:切换从小到大

shift + tab: 反向切换从大到小

来源：https://www.cnblogs.com/lvlisn/p/11671617.html

标签

jquery事件

border

jQuery进阶第三天（2019 10.12）