<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. 基于TcpListerer的web服务器 和 基于HttpListerer的web服务器

    摘自<Asp.Net 本质论>作者:郝冠军 /* 为了简化基于TCP协议的监听程序,.NET在System.Net.Sockets命名空间中提供了TcpListerer类,使用它,在构造函 ...

  2. qml 设置tooltip，Customizing ToolTip

    Button {            id: btn            text: "Tip"            anchors.horizontalCenter: pa ...

  3. Oracle多个字段如何合并成一个字段显示

    今天记录一下在oracle中多个字段如何和合并成一个字段,使用到符号“||” 1.组合查询的数据 1)组合前查询的语句 -- 组合前数据的字段 -- select A.MID CATE_ID,A.Co ...

  4. python---多线程与多进程

    一. 单进程多线程 1. 使用的模块是Threading.使用join()函数进行阻塞. from pdf2txt import pdfTotxt1, pdfTotxt2 import xlrd im ...

  5. MAVEN 创建项目

    使用archetype生成项目骨架 MAVEN 创建项目JAR 和 MAVEN创建项目WAR中是使用特定的acrchetype来进行创建项目,如果使用其他的archetype来创建项目或是使用 mvn ...

  6. linux：scp从入门到刚入门

    [温馨提示] 此文和ssh配合食用更佳. 首先请小伙伴们连上你要传文件的那台机,用ssh可以免密登录. [传送文件] 我们一般发文件的话可以scp来发一发,比如说我现在要向多个扔很多tomcat包,我 ...

  7. 执行这些代码, Edit1只能输入数字,小数点和负号,负号和小数点只能输入一个,负号必须在最前,粘贴的数字必须完全正确.

    执行这些代码, Edit1只能输入数字,小数点和负号,负号和小数点只能输入一个,负号必须在最前,粘贴的数字必须完全正确. type TForm1 = class(TForm) Edit1: TEdit ...

  8. Mac 无需网线创建ipv6环境

    首先需要准备Mac一台 iPhone 2部(其中一部用于测试你的项目,请装上你的应用) 连接线一根 第一步:通过数据线连接iphone和mac 第二步:打开iphone的个人热点并选择仅USB 如果没 ...

  9. [Linux]Linux下开启snmp支持IPV4和IPV6

    SNMP简介 简单网络管理协议(SNMP),由一组网络管理的标准组成,包含一个应用层协议(application layer protocol).数据库模型(database schema)和一组资源 ...

  10. 深入理解java虚拟机---垃圾回收(十一)

    1.垃圾回收要解决的问题 可以通过配置虚拟机参数来打印出内存日志: -verbose:gc -XX:+PrintGCDetails 垃圾收集(Garbage Collection,GC),要设计一个G ...