<head>

    <meta charset="UTF-8">

    <title>jquery的位置信息</title>

    <style>

        body{

            height: 2000px;

        }

        .box{

            width: 200px;

            height: 200px;

            position: relative;

            top: 100px;

            left: 200px;

            border: 1px solid red;

            padding: 10px;

        }

    </style>

</head>

<body>

    <div class="box"></div>

    <script type="text/javascript" src="jQuery3.3.1.js"></script>

    <script>

        $(function () {

            //获取.box的宽度,不包含padding与border的宽度

            console.log($('.box').width());

            //设置.box的宽度

            // $('.box').width(300);

            //height()高度。与width()使用方法一样

            //内部的宽和内部的高innerWidth() innerHeight(),内部宽包含padding,不包含border

            // console.log($('.box').innerWidth());

            // console.log($('.box').innerHeight());

            //设置内部的宽和高，只会更改内容区域的宽度，不会改变padding与border的宽高

            // $('.box').innerWidth(300);

            // $('.box').innerHeight(100);

            //外部宽outerWidth() 外部高outerHeight()  包含内部宽高+padding+border

            // console.log($('.box').outerWidth())//222

            //设置宽高时也是设置内容的宽度，不会改变padding与border

            // $('.box').outerWidth(400);

            //offset()他的返回值是一个对象，对象中包含了top和left属性

            //距离是页面顶部与左侧的距离，与绝对定位相对定位没有关系

            //offset()的属性是只读属性，不可以进行设置

            // console.log($('.box').offset().top);

            // console.log($('.box').offset().left)；

            //滚动的偏移距离-->页面卷起的高度和宽度

            //jquery监听文档滚动事件：scroll

            $(document).scroll(function () {

                console.log($(this).scrollTop());

                //实现滚动页面到.box补偿高度的时候隐藏.box

                var scollHeight = $(this).scrollTop();

                var boxOffset = $('.box').offset().top;

                if (scollHeight > boxOffset){

                    $('.box').hide(1000);

                }

            })

        })

    </script>

</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. zzw原创_expdp及impdp中的exclude及include参数的那点事

    zzw原创:转载请注明出处 在oracle的expdp 及imdpd命令中,exclude及include参数还是有一些要注意的地方,特别是涉及选择性条件时. 一.通用 1.exclude及inclu ...

  2. sqlmap sql注入工具

    下载地址: https://github.com/sqlmapproject/sqlmap 参数可以在sqlmap.conf里指定 url = http://localhost:55556/crm/u ...

  3. py requests.post2

    # -*- coding: utf-8 -*-import jsonimport requestsheaders = {'User-Agent': 'Mozilla/5.0 (Windows NT 6 ...

  4. Redis在windows下的安装下载

    1买个mac和台式电脑安装个Linux系统 2教程见:https://jingyan.baidu.com/article/0f5fb099045b056d8334ea97.html    powerS ...

  5. 逆袭之旅DAY15.东软实训.Oracle.约束、序列、视图、索引、用户管理、角色

    2018-07-11  08:26:00 有某个学生运动会比赛信息的数据库,保存了如下的表: 运动员sporter表:(运动员编号sporterid,运动员姓名name,运动员性别sex,所属系dep ...

  6. Win10系列：JavaScript动画2

    "重新定位"动画也是Windows动画库中的动画效果."重新定位"动画的动画效果是指一个或一组元素移动到新的位置时,这些元素不是突然出现在新的位置,而是从一个位 ...

  7. unity中手机触摸代码

    #elif UNITY_IOS || UNITY_ANDROID         if(Input.touchCount <= 0)         {             return;/ ...

  8. day03 字符串

    今日学习 1.python的基本数据回顾 2.int--数字类型 3.bool值 取值只有True False bool值没有操作 4.字符串 1.python的基本数据回顾 1)int =>整 ...

  9. 每天CSS学习之line-height

    line-height是CSS的一个属性,其作用是设置行高.其有以下几种值: 1.normal:自动设置合理的行间距.该值是默认值.如下示例: p{ line-height:normal; } 结果: ...

  10. java接口和抽象类的区别和作用（功能、用途、好处）

    Java接口: 总结了4点关于JAVA中接口存在的意义: 1.重要性:在Java语言中, abstract class 和interface 是支持抽象类定义的两种机制.正是由于这两种机制的存在,才赋 ...