一、原生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. 自定义springmvc参数解析器

    实现spring HandlerMethodArgumentResolver接口 通过使用@JsonArg自定义注解来解析json数据(通过fastjson的jsonPath),支持多个参数(@Req ...

  2. csc.exeCPU100%

    可以通过nuget把Microsoft.CodeDom.Providers.DotNetCompilerPlatform和Microsoft.Net.Compilers这两个包卸载

  3. localstorage sessionstorage cookie的区别

    一.基本概念 Cookie cookie比较小,大小限制在4kb左右,是网景公司的前雇员 LouMontulli 在1993年3月的发明.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记 ...

  4. 关于判断StringBuffer是否为空

    对于String和StringBuffer来说,都是通过创建新的char value[]数组来达到字符串改变的操作的,只不过String是通过新创建String对象来达到目的, 而StringBuff ...

  5. javascript注

    1.浮点数: e表示法(科学计数法-10的指数次幂): let floatNum = 3.12e2; //等于312 浮点数的最高精度是17位小数. 浮点数计算精度远不如整数,0.15加0.15的和是 ...

  6. 无法加载模块 TP3.2

    报错 3.2的路由功能是针对模块设置的,所以URL中的模块名不能被路由,路由定义也通常是放在模块配置文件中. 'MODULE_DENY_LIST' => array('Common','User ...

  7. Oracle Mysql MSSql 三种数据库 随机查询 条 语句

    1. Oracle,随机查询查询语句-20条 select * from (  select  *  from 表名 order by dbms_random.value ) where rownum ...

  8. open jdk卸载

    //查找:open jdk # rpm -qa | grep java //卸载open jdk # rpm -e --nodeps 包 # source /etc/profile # java -v ...

  9. Python深度学习读书笔记-1.什么是深度学习

    人工智能 什么是人工智能.机器学习与深度学习(见图1-1)?这三者之间有什么关系?

  10. JavaScript判断 Radio 单选按钮是否为选中状态 并弹出 值信息

    今天在百度前端任务中遇到了一个以前没怎么注意的知识点,所以就准备记下来 <script type="text/javascript"> //判断个函数 以上 5 个Ra ...