一、原生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. 【技术分享：python 应用之二】解锁用 VSCode 写 python 的正确姿势

    之前一直用 notepad++ 作为编辑器,偶然发现了 VScode 便被它的颜值吸引.用过之后发现它启动快速,插件丰富,下载安装后几乎不用怎么配置就可以直接使用,而且还支持 markdown.当然, ...

  2. 第三周总结&实验报告一

    第三周总结 在这周对Java进行了更深层次的学习,Java的学习也越来越难了,慢慢的加入了一些新的构造新的方法,还有许许多多简化代码的相关知识,我还是要认真的去吃透这些知识,自己也要慢慢的去研究一些题 ...

  3. Android Studio 安装 Flutter

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

  4. 电脑出现了一块tap window adapter v9 网卡 以及虚拟机桥接模式无法通信原因

    计算机与外界局域网的连接是通过主机箱内插入一块网络接口板(或者是在笔记本电脑中插入一块PCMCIA卡).网络接口板又称为通信适配器或网络适配器(network adapter)或网络接口卡NIC(Ne ...

  5. 用Vue来实现音乐播放器（三十八）：歌词滚动列表的问题

    1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是 ...

  6. kafka 消费者拉取消息

    本文只跟踪消费者拉取消息的流程.对于 java 客户端, kafka 的生产者和消费者复用同一个网络 io 类 NetworkClient. 入口在 KafkaConsumer#pollOnce 中, ...

  7. 7.k8s.调度器scheduler 亲和性、污点

    #k8s. 调度器scheduler 亲和性.污点 默认调度过程:预选 Predicates (过滤节点) --> 优选 Priorities(优先级排序) --> 优先级最高节点 实际使 ...

  8. CentOS6.5 编译安装Nginx

    一.准备编译环境 1. 系统为centos6.5最小安装,关闭selinux,关闭防火墙. 2. 安装编译工具 # yum -y install gcc gcc-c++ autoconf automa ...

  9. python locust 进行压力测试

    最近公司项目周期比较赶, 项目是软硬结合,在缺少硬件的情况下,通过接口模拟设备上下架和购买情况,并进行压力测试, 本次主要使用三个接口 分别是3个场景: 生成商品IP, 对商品进行上架, 消费者购买商 ...

  10. 初学node.js-nodejs中实现用户注册路由

    经过前面几次的学习,已经可以做下小功能,今天要实现的事用户注册路由. 一.users_model.js  功能:定义用户对象模型 var mongoose=require('mongoose'), S ...