1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>jquery的位置信息</title>
  4.     <style>
  5.         body{
  6.             height: 2000px;
  7.         }
  8.         .box{
  9.             width: 200px;
  10.             height: 200px;
  11.             position: relative;
  12.             top: 100px;
  13.             left: 200px;
  14.             border: 1px solid red;
  15.             padding: 10px;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div class="box"></div>
  21.     <script type="text/javascript" src="jQuery3.3.1.js"></script>
  22.     <script>
  23.         $(function () {
  24.             //获取.box的宽度,不包含padding与border的宽度
  25.             console.log($('.box').width());
  26.             //设置.box的宽度
  27.             // $('.box').width(300);
  28.             //height()高度。与width()使用方法一样
  30.             //内部的宽和内部的高innerWidth() innerHeight(),内部宽包含padding,不包含border
  31.             // console.log($('.box').innerWidth());
  32.             // console.log($('.box').innerHeight());
  33.             //设置内部的宽和高，只会更改内容区域的宽度，不会改变padding与border的宽高
  34.             // $('.box').innerWidth(300);
  35.             // $('.box').innerHeight(100);
  37.             //外部宽outerWidth() 外部高outerHeight()  包含内部宽高+padding+border
  38.             // console.log($('.box').outerWidth())//222
  39.             //设置宽高时也是设置内容的宽度，不会改变padding与border
  40.             // $('.box').outerWidth(400);
  42.             //offset()他的返回值是一个对象，对象中包含了top和left属性
  43.             //距离是页面顶部与左侧的距离，与绝对定位相对定位没有关系
  44.             //offset()的属性是只读属性，不可以进行设置
  45.             // console.log($('.box').offset().top);
  46.             // console.log($('.box').offset().left)；
  48.             //滚动的偏移距离-->页面卷起的高度和宽度
  49.             //jquery监听文档滚动事件：scroll
  50.             $(document).scroll(function () {
  51.                 console.log($(this).scrollTop());
  53.                 //实现滚动页面到.box补偿高度的时候隐藏.box
  54.                 var scollHeight = $(this).scrollTop();
  55.                 var boxOffset = $('.box').offset().top;
  57.                 if (scollHeight > boxOffset){
  58.                     $('.box').hide(1000);
  59.                 }
  60.             })
  61.         })
  63.     </script>
  64. </body>

jQuery的位置信息的更多相关文章

  1. 前端 -----jQuery的位置信息

    08-jQuery的位置信息   jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的 ...

  2. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  3. 07 jQuery的位置信息

    一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个没有单位 ...

  4. jQuery系列（八）：jQuery的位置信息

    1.宽度和高度 (1):获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个 ...

  5. jQuery基础（4）- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

  6. python全栈开发day49-jquery的位置信息、事件流、事件对象，事件委托，事件绑定和解绑

    一.昨日内容回顾    1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClas ...

  7. jquery获取元素在文档中的位置信息以及滚动条位置（转）

    jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886     原文链接 原创 201 ...

  8. 获取元素位置信息和所占空间大小(via:js&jquery)

    工作中有一个很常见的需求,hover或者click某元素后,在该元素旁边出现弹框,主要就是获取该元素的位置坐标以及元素所占区块的大小.最近工作中就遇到了,发现js和jquery的实现方法有很大的区别, ...

  9. Python全栈开发之路 【第十七篇】：jQuery的位置属性、事件及案例

    位置属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

  1. vijos 清点人数

    背景 NK中学组织同学们去五云山寨参加社会实践活动,按惯例要乘坐火车去.由于NK中学的学生很多,在火车开之前必须清点好人数. 描述 初始时,火车上没有学生:当同学们开始上火车时,年级主任从第一节车厢出 ...

  2. 【转】EF 获取类的属性并排除特定属性（getType().GetProperties()）

    当获取一个类型(class)的所有属性时,想排除指定属性,该如何操作? 比如:EF中一个实体类型UserEntity,通过反射获取这个类的属性时,想排除这个为映射的字段ID 使用以下方法即可! Pro ...

  3. C++解析三

    类的构造函数类的构造函数是类的一种特殊的成员函数,它会在每次创建类的新对象时执行.构造函数的名称与类的名称是完全相同的,并且不会返回任何类型,也不会返回 void.构造函数可用于为某些成员变量设置初始 ...

  4. Python Django 之 直接执行自定义SQL语句（二）

    转载自:https://my.oschina.net/liuyuantao/blog/712189 一般来说,最好用 Django 自带的模型来实现这些操作.这里仅仅只是为了学习使用原始 SQL 而做 ...

  5. Linux系统命令行中vim编辑器取消高亮显示

    由于在使用vim编辑代码的时候不小心忘记首先输入i(insert)模式,导致写的代码出现了棕黄色的阴影显示 摸索了很久终于找到了解决方法: 1.退出vim编译器 2.在在命令行下输入:nohl,回车 ...

  6. [Leetcode 100]判断二叉树相同 Same Tree

    [题目] 判断二叉树是否相同. [思路] check函数. p==null并且q==null,返回true;(两边完全匹配) p==null或q==null,返回false;(p.q其中一方更短) p ...

  7. 页面显示时间js

    //页面显示时间 <span align="left" id="OperatorTime"> </span> <script> ...

  8. ON 子句和 WHERE 子句的不同

    原文: https://www.cnblogs.com/zjfjava/p/6041445.html 即使你认为自己已对 MySQL 的 LEFT JOIN 理解深刻,但我敢打赌,这篇文章肯定能让你学 ...

  9. linux下Mysql多实例实现

    什么是MySQL多实例 MySQL多实例就是在一台机器上开启多个不同的服务端口(如:3306,3307),运行多个MySQL服务进程,通过不同的socket监听不同的服务端口来提供各自的服务:: My ...

  10. html 经验之谈