jQuery之位置
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之位置的更多相关文章
- 前端 -----jQuery的位置信息
08-jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的 ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- jQuery的位置信息
<head> <meta charset="UTF-8"> <title>jquery的位置信息</title> <style ...
- Python全栈开发之路 【第十七篇】:jQuery的位置属性、事件及案例
位置属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- jQuery学习- 位置选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 07 jQuery的位置信息
一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个没有单位 ...
- jQuery系列(八):jQuery的位置信息
1.宽度和高度 (1):获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个 ...
- jquery 滚动条位置的
$('#fixedHead').width()//div的宽度 $('#fixedHead')[0].scrollWidth//滚动条的宽度 两者的差为滚动条的宽度 var b1=$("#d ...
- jquery固定位置浮动
示例: <!DOCTYPE html> <html> <head> <title>test page</title> <script ...
随机推荐
- .NET自动字符编码识别程序库 NChardet
什么是NChardet NChardet是mozilla自动字符编码识别程序库chardet的.NET实现,它移植自jchardet,chardet的java版实现,可实现对给定字符流的编码探测. N ...
- Windows PowerShell是啥?看完本文你就懂它了
这篇文章主要介绍了Windows PowerShell是啥?Windows PowerShell是什么?Windows PowerShell有哪些特性?Windows PowerShell有什么用?看 ...
- Linux 使用yum工具
Red Hat 发行版安装后无法使用yum,须注册方可使用,可以通过以下方式处理:cd /etc/yum.repos.d/备份目录下已经存在的repo文件,然后新建文件local.repo,具体脚本如 ...
- 详解JavaScript中的Object对象
Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是 ...
- java保留有效数字
DecimalFormat df=DecimalFormat("######0.0") double d = df.format(xx): 保留一位就是"######0. ...
- Rhythmbox中文乱码解决的方法
转自:http://hi.baidu.com/morgensonne/item/3470aef58747abde6325d2d9 今天在网络上找到了一个比較好的解决Rhythmbox中文乱码的问题的方 ...
- linux 常用 命令 笔记二
wget 下载,得到网络上的内容 grep 文件搜索工具 EveryThing is a file in the linux system 安装 cowsay sudo apt-get install ...
- 纯html网页重定向与跳转
javaScript 跳转 方法一: <script language="javascript"> window.location = "http:// ...
- 1.Asp.net处理请求的流程
.NET平台处理HTTP请求的过程大致如下: 1. IIS得到一个请求: 2.查询脚本映射扩展,然后把请求映射到aspnet_isapi.dll文件 3.代码进入工作者进程(IIS5里是aspnet_ ...
- Adnroid Studio使用技巧
官方第一条提示:所有的使用技巧都可以通过Help→Tips of the Day查看. 下面摘抄一些比较有用的技巧: 1.Esc把活动窗口从工具窗口指向编辑窗口.F12把编辑窗口指向上一次活动的工具窗 ...