zoukankan      html  css  js  c++  java
  • jQuery的位置信息

    jQuery的位置信息跟JS的client系列、offset系列、scroll系列封装好的一些简便api.

    一、宽度和高度

    获取宽度

    .width()

    描述:为匹配的元素集合中获取第一个元素的当前计算宽度值。这个方法不接受任何参数。.css(width) 和 .width()之间的区别是后者返回一个没有单位的数值(例如,400),前者是返回带有完整单位的字符串(例如,400px)。当一个元素的宽度需要数学计算的时候推荐使用.width() 方法 。

    设置宽度

    .width( value )

    描述:给每个匹配的元素设置CSS宽度。

              console.log($('.box').width());
                console.log($('.box2').width())
                console.log($('.box').css('width'));//这样打印出来的是带有px的 不便于我们进行 操作
                $("<a>年后</a>").insertAfter($('button'));
                $('button').eq(0).click(function(){
                    console.log($(this).next());//获取下一个的对象
                    console.log($(this).height());
                    $(this).height(30); //设置高度
                    console.log($(this).height());

    2、innerHeight()和innerWidth()

    获取内部宽

    .innerWidth()

    描述:为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding,但是不包括border。

    ps:这个方法不适用于window 和 document对象,对于这些对象可以使用.width()代替。

    设置内部宽

    .innerWidth(value);

    描述: 为匹配集合中的每个元素设置CSS内部宽度。如果这个“value”参数提供一个数字,jQuery会自动加上像素单位(px)

    获取内部高

    .innerHeight()

    描述:为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding,但是不包括border。

    ps:这个方法不适用于window 和 document对象,对于这些对象可以使用.height()代替。

    设置内部宽

    .innerHeight(value);

    描述: 为匹配集合中的每个元素设置CSS内部高度。如果这个“value”参数提供一个数字,jQuery会自动加上像素单位(px)

    3.outerWidth和outerHeight()

    获取外部宽

     .outerWidth( [includeMargin ] )

    描述:获取匹配元素集合中第一个元素的当前计算外部宽度(包括padding,border和可选的margin)

    • includeMargin (默认: false)
      类型: Boolean
      一个布尔值,表明是否在计算时包含元素的margin值。
    • 这个方法不适用于window 和 document对象,可以使用.width()代替

    设置外部宽

     .outerWidth( value )

    描述: 为匹配集合中的每个元素设置CSS外部宽度。

    获取外部宽

     .outerHeight( [includeMargin ] )

    描述:获取匹配元素集合中第一个元素的当前计算外部高度(包括padding,border和可选的margin)

    • includeMargin (默认: false)
      类型: Boolean
      一个布尔值,表明是否在计算时包含元素的margin值。
    • 这个方法不适用于window 和 document对象,可以使用.width()代替

    设置外部高

     .outerHeight( value )

    描述: 为匹配集合中的每个元素设置CSS外部高度。

    3、偏移

    获取

    .offset()

    返回值:Object 。.offset()返回一个包含top 和 left属性的对象 。

    描述:在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档。

    注意:jQuery不支持获取隐藏元素的偏移坐标。同样的,也无法取得隐藏元素的 border, margin, 或 padding 信息。若元素的属性设置的是 visibility:hidden,那么我们依然可以取得它的坐标

    设置

     .offset( coordinates )

    描述: 设置匹配的元素集合中每一个元素的坐标, 坐标相对于文档。

    • coordinates
      类型: Object
      一个包含top 和 left属性的对象,用整数指明元素的新顶部和左边坐标。

    例子:

    $("p").offset({ top: 10, left: 30 });
                    $('.son').offset({top:10,left:30}); //把claa是son的盒子移动到距离顶部10  距离左边30的位置

    4.元素坐标

     .position()

    返回值:Object{top,left}

    描述获取匹配元素中第一个元素的当前坐标,相对于offset parent的坐标。(offset parent指离该元素最近的而且被定位过的祖先元素 )

    当把一个新元素放在同一个容器里面另一个元素附近时,用.position()更好用。

    4.元素坐标

     .position()

    返回值:Object{top,left}

    描述获取匹配元素中第一个元素的当前坐标,相对于offset parent的坐标。(offset parent指离该元素最近的而且被定位过的祖先元素 )

    当把一个新元素放在同一个容器里面另一个元素附近时,用.position()更好用。

  • 相关阅读:
    HDU 1394Minimum Inversion Number 数状数组 逆序对数量和
    2016中国大学生程序设计竞赛(长春)-重现赛 1010Ugly Problem 回文数 模拟
    Codeforces 723C. Polycarp at the Radio 模拟
    hihoCode 1078 : 线段树的区间修改
    hihocode 1077 : RMQ问题再临-线段树
    POJ 2352Stars 树状数组
    Codeforces 714C. Sonya and Queries Tire树
    Codeforces 710C. Magic Odd Square n阶幻方
    Codeforces 709C 模拟
    ICM Technex 2017 and Codeforces Round #400 (Div. 1 + Div. 2, combined) D. The Door Problem 2-SAT
  • 原文地址:https://www.cnblogs.com/zhaoyunlong/p/9134735.html
Copyright © 2011-2022 走看看