jQuery进阶第三天（2019 10.12）

一、原生JS快捷的尺寸(属性)(注意这些属性的结果 不带PX单位)

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

1-2的案例

 

 
     
     
     
     
     
 
 
    
i love you
     
 
 

3的案例:　　　　　　　　　

    
    
    
    
    


    
i love you
    

4-5的案例：

 1 
 2 
 3 
 4     
 5     
 6     
 7     
 8     
29 
30 
31     

32         

33             

34         
35     
36     
46 
47 

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

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

 1 
 2 
 3 
 4     
 5     
 6     
 7     
 8     
22 
23 
24     
i love you
25     
26     
39 
40 

三、滚动条事件

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

 

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

垂直方向：document.documentElement.scrollTop;

水平方向：document.documentElement.scrollLeft;

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

宽度：document.documentElement.clientWidth；

高度：document.documentElement.clientHeight；

四、 鼠标滚轴

1   滚轴事件（注意兼容）

谷歌/IE： mousewheel

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

 

 1 
 2 
 3 
 4     
 5     
 6     
 7     
 8 
 9 
10     
44 
45 

 

 

2 滚轴的方向

 

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

 

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

3 键盘三事件

keydown 键盘按下事件

keypress 键盘按下未抬起事件

keyup 键盘抬起事件

执行顺序：

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

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

 

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

 

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

 

tab:切换  从小到大

 

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