HTML 学习笔记 JQuery(盒子操作)

这边博客详细的讲述一下JQuery中关于盒子模型的一些方法

offset([coordinates])方法

获取匹配元素在当前适口的相对偏移

返回的对象包含两个模型属性:top和left 以像素计。此方法只对可见元素有效。

参数

coordinates{top,left}

示例代码

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
        </style>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <p>hello<p id="offp">world</p></p>
        <script>
            var p = $("#offp");
            var offset = p.offset();
            //获取距左距右的距离
            p.html("left:" + offset.left +  ",top:" + offset.top);
            //设置这个p的距左距右距离
            p.offset({left:100,top:50});
        </script>
    </body>
</html>

结果

HTML 学习笔记 JQuery(盒子操作)


position()方法

获取匹配元素相对父元素的偏移

返回的对象包含两个属性,top和left,为精确计算结果,请在补白,边框和填充属性上使用像素单位,只对可见元素有效

代码:

//获取第一个p元素
var firstP = $("p:first");
//获取第一个元素相对于父元素的位置
var pos = firstP.position();
firstP.text("left:" + pos.left + "top:" + pos.top);    

效果

HTML 学习笔记 JQuery(盒子操作)


scrollTop([val])方法

获取匹配元素相对于滚动条顶部的偏移

此方法对可见和隐藏元素均有效

参数:

val:  string,Number

示例:

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 10px;
            }
        </style>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <p>Hello<p id="scrollP">world</p></p>
        <script>
            var p = $("p:first");
            //设置相对偏移
            p.scrollTop(200);
            $("#scrollP").text("scrollTop  :" + p.scrollTop() + "  scrollLeft: " + p.scrollLeft());
        </script>
    </body>
</html>

height([val|fn])方法

获取匹配元素当前计算的高度值(px) 在JQuery1.2以后 可以用来获取window和document的高

参数

val : String Number Function

设定CSS中 height的值可以是字符串或者数字 还可以是一个函数,返回要设置的数值,第一个参数是元素在原先集合中的索引位置,第二个参数是原来的高度。

示例代码

var p = $("p:first");
//获取p元素当前的高度
$("body").append("<p>" + p.height() + "</p>") //显示18

还可以用这个方法给元素设置高度

var p = $("p:first");
//设置高度
p.height(100);

以10像素的幅度增加p元素的高度

$("#pBtn").click(function() {
    $("p:first").height(function(index,oldValue){
        return oldValue + 10;
    });
});

width([val|fn])方法

取得匹配元素当前计算的宽度值(px)

在JQuery1.2以后可以用来获取window和document的宽度

参数

val:String Number Function

关于参数用法和height()方法一样。

示例:

//获取宽度
$("p:first").width();
//设置匹配元素的宽度
$("p:first").width(100);
//以10元素的幅度增加p元素的宽度
$("#pBtn").click(function() {
$("p:first").width(function(index,oldValue){
    return oldValue +10;
});
});

innerWidth() 和 innerHeight()方法

获取匹配元素的内部区域高度(包括补白(内边距) 不包括边框)

此方法对可见元素和隐藏元素均有效

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p {
                padding: 10px;
            }
        </style>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <p>hello<p id="innerP">world</p></p>
        <script>
            $("#innerP").text("innerWidth :" + $("p:first").innerWidth() + "innerHeight" + $("p:first").innerHeight())
        </script>
    </body>
</html>

outerHeight([options]) 和 outerWidth([options])方法

获取匹配元素的外部高度(默认包括补白和边框)

此方法对可见和隐藏元素均有效

参数

options Boolean(默认值false) 设置为true时  计算边距在内

示例代码

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p {
                /*padding: 10px;*/
            }
        </style>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <p>hello<p id="innerP">world</p></p>
        <div></div>
        <script>
            $("#innerP").text("innerWidth :" + $("p:first").innerWidth() + "innerHeight" + $("p:first").innerHeight())
            $("div").text("outerWidth :" + $("p:first").outerWidth() + "outerHeight" + $("p:first").outerHeight());
        </script>
    </body>
</html>

以上就是JQuery中对于盒子模型的一些操作。