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

  1. clientWidth/clientHeight  　　　　　　=====> 获得元素content+padding的宽/高；
  2. offsetWidth/offsetHeight　　　　　　=====>获得元素content+padding+border的宽/高；
  3. clientLeft/clientTop                              =====>左/上边框的距离；
  4. offsetLeft/offsetTop                             =====>获得距离父元素定位左/上的距离       IE浏览器计算边框    // 高级浏览器不计算边框；
  5. 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的案例：

 <!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;

     }

     #carousel{

         position:relative;

         width:200px;

         height: 200px;

         border: 1px solid red;

         margin: 0 auto;

     }

     #box{

         position:absolute;

         left:20px;

         top:30px;

         width: 50px;

         height: 50px;

         background-color:orange;

     }

     </style>

 </head>

 <body>

     <div id="carousel">

         <div id="unit">

             <div id="box"></div>

         </div>

     </div>

     <script>

     //获得元素对象

     var box=document.getElementById("box");

     // offsetParent() 获得定位的祖先元素(若父元素没有就一直玩上找 直到定位元素body)

     // offsetLeft/Top 获得距离父元素左/上的位置

     console.log(box.offsetParent)

     console.log(box.parentNode);

     console.log(box.offsetLeft);

     console.log(box.offsetTop);

     </script>

 </body>

 </html>

二 、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的宽/高；
 <!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;

         padding:16px;

         margin:20px;

     }

     </style>

 </head>

 <body>

     <div id="box">i love you</div>

     <script src="../js/jquery-1.12.3.min.js"></script>

     <script>

     //Jquery的快捷尺寸

     //width/height()  ===content

     //innerWidth/Height()===content+padding

     //outerWidth/Height(false)===content+padding+border//默认false

     //outerWidth/Height(true)===content+padding+border+margin

     // 获得元素对象

     var $div=$("#box");

     console.log("innerWidth",$div.innerWidth(),"innerHeight",$div.innerHeight());

     console.log("outerWidth",$div.outerWidth(),"outHeight",$div.outerHeight());//默认false

     console.log("outerWidth",$div.outerWidth(true),"outHeight",$div.outerHeight(true));

     </script>

 </body>

 </html>

三、滚动条事件

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

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

垂直方向：document.documentElement.scrollTop;

水平方向：document.documentElement.scrollLeft;

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

宽度：document.documentElement.clientWidth；

高度：document.documentElement.clientHeight；

四、鼠标滚轴

1   滚轴事件（注意兼容）

谷歌/IE： mousewheel

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

 <!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>

 </head>

 <body>

     <script>

         //DOM 2级事件兼容绑定

         function addHandler(e,type,handler){

             if(e.addEventListener){

                 //高级浏览器// 火狐与谷歌IE的滚轴事件不同 这里兼容下

                 ////滚轴事件 火狐 DOMMouseScroll   detail的值为正 则是鼠标向上；为负则是向下。

                 // 非火狐 mousewheel  wheelDelta的值为正 则是鼠标向上；为负则是向下。

                 if(type==="DOMmouseScroll"){

                     e.addEventListener(type,handler,false);

                 }else{

                     e.addEventListener(type,handler,false);

                 }

             }else if(e.attachEvent){

                 //IE高级浏览器

                 e.attachEvent("on"+type,handler);

             }else{

                 //IE8及以下低端浏览器

                 e["on"+type]=handler

             }

         }

          //DOM 2级事件兼容移除

         function removeHandler(e,type,handler){

           if(e.removeEventListener){

               e.removeEventListener(type,handler,false);

           }else if(e.detachEvent){

               e.detachEvent(type,handler);

           }else{

               e["on"+type]=handler;

           }

         }

         addHandler(document,"mousewheel",function(){

             console.log(111);

         })

     </script>

 </body>

 </html>

2 滚轴的方向

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

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

3 键盘三事件

keydown 键盘按下事件

keypress 键盘按下未抬起事件

keyup 键盘抬起事件

执行顺序：

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

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

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

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

tab:切换  从小到大

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

jQuery进阶第三天（2019 10.12）的更多相关文章

  1. jQuery进阶第二天（2019 10.10）

    一.事件流程 1.事件的三要素: 事件源:发生事件的对象 事件类型:类型比如单击.双击.鼠标的移入.移除 事件处理程序: 触发事件之后做些什么,事件处理的函数 <body> <but ...

  2. Problem A. 最近公共祖先 ———2019.10.12

    我亲爱的学姐冒险跑去为我们送正解 但是,,,, 阿龙粗现了! cao,, 考场期望得分:20   实际得分:20 Problem A. 最近公共祖先 (commonants.c/cpp/pas) 最近 ...

  3. Problem C. 欧皇 ————2019.10.12

    题目: 再次感激土蛋 #include <bits/stdc++.h> using namespace std; typedef long long ll; ; ll C[][]; voi ...

  4. Problem B. 即时战略 ———2019.10.12

    题目:   代码~:感谢土蛋 #include <iostream> #include <cstring> #include <cmath> #include &l ...

  5. 22.Express框架——2019年12月19日

    2019年12月19日14:16:36 1. express简介 1.1 介绍 Express框架是后台的Node框架,所以和jQuery.zepto.yui.bootstrap都不一个东西. Exp ...

  6. 日常Git使用——2019年12月11日16:19:03

    1.git介绍 1.1 什么是git? 什么是Git? 比如一个项目,两个人同时参与开发,那么就把这个项目放在一个公共的地方,需要的时候都可以去获取,有什么改动,都可以进行提交. 为了做到这一点,就需 ...

  7. 【转帖】Intel AMD 龙芯2019年12月份最新产品线

    Intel未来三代U集体曝光:14nm退回去了! https://news.cnblogs.com/n/651244/ 不过没搞懂 为啥中芯国际已经开始量产14nm了 龙芯为什么不用.. 3A4000 ...

  8. 【2019.10.17】十天Web前端程序员体验（软件工程实践第五次作业）

    结对信息.具体分工 Github地址:https://github.com/MokouTyan/131700101-031702425 学号 昵称 主要负责内容 博客地址 131700101 莫多 代 ...

  9. 7.搭建hyperledger fabric环境及启动——2019年12月12日

    2019年12月12日13:05:16 声明:从网络中学习整理实践而来. 1.介绍fabric Fabric 是一个面向企业应用的区块链框架,基于 Fabric 的开发可以粗略分为几个层面: 1. 参 ...

随机推荐

  1. HDU2294--Pendant（DP，矩阵优化）

    Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...

  2. Spring Data JPA(一)简介

    Spring Data JPA介绍 可以理解为JPA规范的再次封装抽象,底层还是使用了Hibernate的JPA技术实现,引用JPQL(Java Persistence Query Language) ...

  3. hibernate一对一单项关联映射

    一.主键关联 1.两个实体对象的主键一样,以表明它们之间的一一对应关系: 2.不需要多余的外键字段来维护关系,仅通过主键来关联,即Person的主键要依赖IdCard的主键,他们共用一个主键值. Pe ...

  4. Array Stack Implement using C

  5. leetcode-mid-sorting and searching -347. Top K Frequent Elements

    mycode   71.43% class Solution(object): def topKFrequent(self, nums, k): """ :type nu ...

  6. Linux高级调试与优化——信号量机制与应用程序崩溃

    背景介绍 Linux分为内核态和用户态,用户态通过系统调用(syscall)进入内核态执行. 用户空间的glibc库将Linux内核系统调用封装成GNU C Library库文件(兼容ANSI &am ...

  7. docker中 devicemapper驱动挂载容器镜像文件

    详解docker中容器devicemapper设备的挂载流程

  8. The file is inaccessible to Server.

    ArcGIS Unable to Start serviceserver安装后,启动服务失败,报错信息如下:Unable to Start service. Error (Server object  ...

  9. 用ajax提交请求，预期Json返回 406错误的解决办法！

    正常情况下在Controller端已经配置好了 @ResponseBody    @RequestMapping  返回Json格式数据 发生406错误 ,应该检查提交的请求路径是否含有 .html ...

  10. 阶段3 1.Mybatis_09.Mybatis的多表操作_7 mybatis多对多准备角色表的实体类和映射配置

    创建Role表和user_role表 DROP TABLE IF EXISTS `role`; CREATE TABLE `role` ( `ID` int(11) NOT NULL COMMENT ...