1、offset()获取匹配元素在相对浏览器窗口的偏移量　　返回一个对象，包括两个属性。left:相对浏览器窗口左边的距离。top:相对浏览器顶部的距离。

　  $("#div1").offset().left;　　//返回id为div1相对于浏览器窗口最左边的距离

　  $("#div1").offset().top;　　//返回id为div1相对于浏览器窗口最顶部的距离

　　以下例子展示了，当点击文本框时，在下方显示一个日期div。紧紧贴住上面的文本框。并且不需要调div的css位置，无论上面的文本框位置如果变化，都能够紧紧且住上面的文本框，记得在前几天搞爱的车轮战报名系统的js模拟下拉列表的时候是调CSS贴住上面的文本框的，这样一旦改变了文本框的位置，模拟的下拉列表的div的css也要跟住调，其实这是很SB的。下面这个方法好。

function showDiv(obj) {

　　jQuery("#divShow").css("left", jQuery(obj).offset().left);　　//设置#divShow与浏览器的左距离为文本框距离浏览器左边的距离。

　　jQuery("#divShow").css("top", jQuery(obj).offset().top + jQuery(obj).outerHeight());　　//设置#divShow距离顶部的距离为文本框距离顶部的距离加上自　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　身高度。

　　jQuery("#divShow").show();

}

<input type="text" value="ok" onclick="showDiv(this);" style="margin-left:100px;" />

<div id="divShow" style="display:none;position:absolute;">2010-03-22</div>

2、position()获取匹配元素在相对父元素的偏移量　　返回一个对象，包括两个属性。left:相对父元素最左边的距离。top:相对父元素最右边的距离。只对可见元素有效。

<head>

    <title></title>

    <script src="jquery-1.7.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#btn1").click(function () {

                var left = $("#div2").position().left;  //21.11111

                var top = $("#div2").position().top;    //33.33333

                alert("距离父元素顶部的距离是：" + left + "; 距离父元素左边的距离是:" + top);

            })

        })

    </script>

</head>

<body>

    <div id="div1" style="width:200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px; position:relative;">

        <div id="div2" style="width:100px;height:200px;  position:absolute; left:22px; top:34px;">我是一个div元素</div>

        <input id="btn1" type="button" value="查看" />

    </div>

</body>

　　　　以上代码相当于javascript中的:

        function fun1() {

            var left = document.getElementById("div2").offsetLeft;　　//21

            var top = document.getElementById("div2").offsetTop;　　　//33

            alert("距离父元素顶部的距离是：" + left + "; 距离父元素左边的距离是:" + top);

        }

　　　　javascript比jQuery不同一点的地方就是它输出的是整数21,33，但是跟CSS设置的却差了一个像素，jQuery还能够用Math里的方法来还原，但是javascript就不知道怎么搞了。

3、scrollTop() 　　　获取匹配元素距离滚动条顶部的距离，说白了就是边框的最顶部与当前显示出来的最顶部的距离。

　  scrollTop(val)　　设置匹配元素距离滚动条顶部的距离

　　该属性常常配合scroll()事件一起使用，能够实现元素随滚动条的滚动而滚动，类似于漂浮广告效果。

　　$(this).scroll(function(){

$("#div1").css("top", $(document).scrollTop());　　//注意id为div1的div要设置为绝对定位。如果是底部漂浮，只需要$(document).scrollTop()加上相应的垂直距离就可以了。

　　})

4、scrollLeft()　　   获取匹配元素距离滚动条顶部的距离,说白了就是边框的最左边与当前显示出来的最左边的距离。

　  scrollLeft(val)　 设置匹配元素距离滚动条顶部的距离

<head>

    <title></title>

    <script src="jquery-1.7.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#btn1").click(function () {

                var scrollTop = $("#div1").scrollTop();

                var scrollLeft = $("#div1").scrollLeft();

                alert("显示的最顶部距离真正的顶部的距离是：" + scrollTop + "; 显示的最左边距离真正的左边的距离是:" + scrollLeft);

            })

        })

    </script>

</head>

<body>

    <div id="div1" style="width:200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px; overflow:scroll;">

        <div style="width:400px;height:800px;/*撑出滚动条*/">我是一个div元素</div>

        <input id="btn1" type="button" value="查看" />

    </div>

</body>

5、height()　　　　获取匹配元素的高度值　　//不包括padding,不包括边框 val可以是字符串"300px"、也可以是数字300，还可以是一个函数，返回值作为参数

　  height(val)　　  设置匹配元素的高度值　　

6、 width()　　　　 获取匹配元素的宽度值　　//不包括padding,不包括边框

　　width(val)　　   设置匹配元素的宽度值

<head>

    <title></title>

    <script src="jquery-1.7.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#btn1").click(function () {

                var Width = $("#div1").width();   //200 css的width属性，不包括内边距、边框和外边距

                var Height = $("#div1").height(); //400 css的height属性，不包括内边距、边框和外边距

                alert("div1的宽度是：" + Width + "; div1的高度是：" + Height);

            })

        })

    </script>

</head>

<body>

    <div id="div1" style="width:200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px;">

        我是一个div元素

        <input id="btn1" type="button" value="查看" />

    </div>

</body> 

7、innerHeight()　　　　获取匹配元素的高度值  　//包括padding但不包括border

　  innerHenght(val)　　设置匹配元素的高度值

8、innerWidth() 　　　　获取匹配元素的宽度值　　//包括padding但不包括border

　  innerWidth(val)　　   设置匹配元素的宽度值

<head>

    <title></title>

    <script src="jquery-1.7.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#btn1").click(function () {

                var innerWidth = $("#div1").innerWidth();   //240 包括边框和内边距

                var innerHeight = $("#div1").innerHeight(); //440 包括边框和内边距

                alert("div1的宽度是：" + innerWidth + "; div1的高度是：" + innerHeight);

            })

        })

    </script>

</head>

<body>

    <div id="div1" style="width:200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px;">

        我是一个div元素

        <input id="btn1" type="button" value="查看" />

    </div>

</body>

以上的主jQuery相当于代码(javascript版)：

function fun1() {

　　var innerWidth = document.getElementById("div1").clientWidth;

　　var innerHeight = document.getElementById("div1").clientHeight;

　　alert("div1的宽度是：" + innerWidth + "div1的高度是:" + innerHeight);

}

9、 outerHeight()　　　　获取元素的高度值　　//包括padding和border

　　outerHeight(val)　　　　设置元素的高度值　　

　　还可以接受一个参数，该参数代表是否计算外边距，如果为true则表示计算外边距。

10、outerWidth()　　　　获取匹配元素的宽度值　　//(包括padding和border)

　    outerWidth()　　　  设置匹配元素的宽度值

　　还可以接受一个参数，该参数代表是否计算外边距，如果为true则表示计算外边距。

<head>

    <title></title>

    <script src="jquery-1.7.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#btn1").click(function () {

                var outerWidth = $("#div1").outerWidth();   //260包括边框和内边距

                var outerHeight = $("#div1").outerHeight(); //460 包括边框和内边距

                alert("div1的宽度是：" + outerWidth + "; div1的高度是：" + outerHeight);

                var outerWidth1 = $("#div1").outerWidth(true);   //320 包括边框、外边距和内边距(也就是元素实际占用的大小)

                var outerHeight1 = $("#div1").outerHeight(true); //520 包括边框、外边距和内边距(也就是元素实际占用的大小)

                alert("div1的宽度是：" + outerWidth1 + "; div1的高度是：" + outerHeight1);

            })

        })

    </script>

</head>

<body>

    <div id="div1" style="width:200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px;">

        我是一个div元素

        <input id="btn1" type="button" value="查看" />

    </div>

</body>

　　　　在jQuery的参数不为真的情况下，以上jQuery的主代码相当于：

        function fun1() {

            var outerWidth = document.getElementById("div1").offsetWidth;

            var outerHeight = document.getElementById("div1").offsetHeight;

            alert("div1的宽度是：" + outerWidth + "; div1的高度是：" + outerHeight);

        }

　　　　如果参数为真的情况下，就相当于javascript:

        function fun1() {

            var div1 = document.getElementById("div1");

            var outerWidth1 = div1.offsetWidth + parseInt(div1.style.marginLeft) + parseInt(div1.style.marginRight);

            var outerHeight1 = div1.offsetHeight + parseInt(div1.style.marginTop) + parseInt(div1.style.marginBottom);

            alert("div1的宽度是：" + outerWidth1 + "; div1的高度是：" + outerHeight1);

        }

　　　　此处可能写的不是很好，应该有更好的办法，本人javascript还在初学当中。

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. jQuery的位置信息

    <head> <meta charset="UTF-8"> <title>jquery的位置信息</title> <style ...

  4. Python全栈开发之路 【第十七篇】：jQuery的位置属性、事件及案例

    位置属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  5. jQuery学习- 位置选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 07 jQuery的位置信息

    一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个没有单位 ...

  7. jQuery系列（八）：jQuery的位置信息

    1.宽度和高度 (1):获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个 ...

  8. jquery 滚动条位置的

    $('#fixedHead').width()//div的宽度 $('#fixedHead')[0].scrollWidth//滚动条的宽度 两者的差为滚动条的宽度 var b1=$("#d ...

  9. jquery固定位置浮动

    示例: <!DOCTYPE html> <html> <head> <title>test page</title> <script ...

随机推荐

  1. keil or c51 汇编调用c语言函数 容易忽视的问题

    最近,在用keil 写一个小程序时,想实践一下从汇编调用 C语言函数,我们都知道C语言调用汇编函数讨论得较多,但反过来,从汇编中调用C语言的函数未见深入分析:在开始的时候,还是忽视了一个问题,就是对现 ...

  2. Qt下HBoxLayout里的按钮有重叠

    没想到是一个bug,而且六年了都没有解决: https://bugreports.qt.io/browse/QTBUG-14591 http://stackoverflow.com/questions ...

  3. webapp设计注意事项

    色彩设计 美学相关的知识(色彩构成.平面构成等等)我就不再赘述了,相信从事此类行业的人员无人不知无人不晓了.这里简要说说WebApp设计中,色彩以及构图的特别之处吧. 首先是色彩.从事过广告和印刷业设 ...

  4. 【剑指offer】面试题26：复杂链表的复制

    题目: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点). 思路: 复制自身到下一个结点: 设置新结点的random指针: 分离链表. 注意:判 ...

  5. POJ3261-哈希

    这个题让求至少出现K次的最大长度的子串,属于最大化最小值问题,首先应该想到二分求字串的长度,二分的过程是O(logN)的,注意judge的时候怎样判断是否满足情况以及满足情况后l,r的变化.可以给每一 ...

  6. 04747_Java语言程序设计（一）_第5章_图形界面设计（一）

    例5.1一个用JFrame类创建窗口的Java应用程序. import javax.swing.*; public class Example5_1 { public static void main ...

  7. Linux SD/MMC/SDIO驱动分析

    一.SD/MMC/SDIO概念区分 SD(SecureDigital)与 MMC(MultimediaCard) SD 是一种 flash memory card 的标准,也就是一般常见的 SD 记忆 ...

  8. 平时的笔记02：处理fnmatch模块

    # Copyright 2006 Joe Wreschnig## This program is free software; you can redistribute it and/or modif ...

  9. Apache、Tomcat、JBoss、WebLogic的区别与关系

    Weblogic: 是一个企业级的应用服务器,其中包括j2ee中的各类应用如jsp,servlet,ejb等 Tomcat:   是一个初级的应用服务器,支持sp和servlet,不支持EJB,如需E ...

  10. 调起qq临时通话

    1.在qq推广的网站上的推广工具中将个人或者公司的qq确认为推广qq 2. 选择好显示的图片,将代码拷贝到页面上就可以了