一、原生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. cmake尝试检测GCC版本报错

    本人尝试编译指定commit版本的MRPT库,报错如下, CMake Error at cmakemodules/script_detect_gcc.cmake: (LIST): list GET g ...

  2. Linux安装部署FTP服务器

    Linux安装部署FTP服务器   本文章会将安装FTP服务器的步骤以及一些遇到的问题来记录下 因为项目中要与第三方对接数据,需要用到FTP服务器以提供他们每天上传数据,因为之前在本地的VMware虚 ...

  3. centos-系统删除多余网卡的方法

    一.删除系统中中多余的ifcfg-eth0.bak Centos系统更改网卡或网卡MAC地址后会出现个eth0.bak配置备份文件解决方法:/etc/sysconfig/networking/devi ...

  4. 【Python】学习笔记十四：循环进阶

    range() 在Python中,for循环后的in跟随一个序列的话,循环每次使用的序列元素,而不是序列的下标. 我们继续开发range的功能,以实现下标对循环的控制: s = 'abcdefghj' ...

  5. JS中集合对象(Array、Map、Set)及类数组对象的使用与对比（转载）

    在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型,Array ...

  6. kubernetes配置dashborad，web界面

    一,将kubernetes-dashboard.yaml-1.10和admin-rbac.yaml和token.sh的上传到k8s的计算机上 .如图 二,切入到这三个文件所在的目录下,执行命令:kub ...

  7. MIME 类型，ContentType

    MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准. MIME 消息能包含文本.图像.音频.视频以及其他应用程序专用的数据. 官方 ...

  8. Android Studio 安装 Flutter

    1 下载sdk https://flutter.dev/docs/get-started/install/windows   2 解压到自定义文件夹,并配置bin路径到环境变量path中 path添加 ...

  9. MySQL知识集合

    1.Mysql体系架构     2.MySQL文件结构 (1)参数文件:启动MySQL实例的时候,指定一些初始化参数,比如缓冲池大小.数据库文件路径.用户名密码等         -my.cnf读取优 ...

  10. Cocos2d-X网络编程(4) Cocos2d中的网络通信协议——Socket通信

    Socket,俗称网络套接字,本身并不是协议,而是一个调用接口,是对TCP/IP协议的封装和应用,.提供了一系列方法方便开发者进行网络通讯. TCP/IP协议是使用最早的通讯协议,它是传输层协议,主要 ...