位置innerHeight

,e.clientX    元素坐标

原生js中有三大家族: offset scroll  client

      //offset家族中有:offsetLeft  offsetTop  offsetWidth  offsetHeight

      //offsetLeft: 元素左外边框距离他的定位父级(offsetParent)左内边框之间的距离.

      //offsetTop:  元素上外边框距离他的定位父级上内边框之间的距离.

DOM中的方法

scrolltop向上卷曲出去的值

scrollleft向左卷曲出去的值

scrollWith元素内容的宽

scrollHigth元素内容的宽

onscroll  事件

jq中是scroll

jq中

 //1.jQuery中,也有offset()方法. 他代表什么意思,是不是和原生js中的offsetLeft/offsetTop一样的. 不是.

      //offset()方法返回的是一个对象,里面包含top和left的值.

      //offset()方法获取元素距离document的位置

      $('#btn1').on('click', function () {

        //console.log($('#son').offset());

 

        //设置,参数是一个对象.

        $('#son').offset({

          left:200,

          top:200

        });

 

        //注意:

        //如果这个元素没哟定位,设置offset()系统会自动给他添加一个relative的定位.

      });

 

 

      //2.position()方法获取的是元素距离有定位的父元素(offsetParent)的位置

      //position()方法返回的也是一个对象,包含top和left的值.

      $('#btn2').on('click', function () {

        //console.log($('#son').position());

 

        //不能设置.下面代码没有效果

        // $('#son').position({

        //   left:200,

        //   top:200

        // });

 

      });

 

      

$(function () {

      //原生js中的三大家族:scrollTop  scrollLeft.

      //jQuery中也有scrollLeft(); scrollTop();他们代表的意思和原生的一样吗? 是一样

      //都表示滚动出去的距离.

 

      $('#btn').on('click', function () {

        //获取.

        //console.log($('div').scrollLeft() + ":" + $('div').scrollTop());

 

        //设置滚动出去的部分的距离.

        $('div').scrollLeft(100);

        $('div').scrollTop(100);

      });

 

        //2.2 事件对象e里面的 常用的三个坐标

        // console.log("screenX :"+e.screenX + "-" + e.screenY); //屏幕左上角 距离触发事件的那一点的距离

        // console.log("clientX :"+e.clientX + "-" + e.clientY); //页面可视区左上角距离触发事件的那一点之间的距离.

        // console.log("pageX :"+e.pageX + "-" + e.pageY);//页面左上角 距离触发事件那一点之间的距离.

 

outerWidth(true); outerHeight(true); //方法返回元素的宽度/高度(包括内边距和边框和外边距)。

innerWidth(); innerHeight(); //方法返回元素的宽度/高度(包括内边距)。

 

        //7.获取网页的可视区宽高

        // 获取可视区宽度  $(window).width();

        // 获取可视区高度  $(window).height();

        console.log($(window).width());

        console.log($(window).height());

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值