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>

结果

position()方法

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

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

代码:

//获取第一个p元素

var firstP = $("p:first");

//获取第一个元素相对于父元素的位置

var pos = firstP.position();

firstP.text("left:" + pos.left + "top:" + pos.top);

效果

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中对于盒子模型的一些操作。