js进阶 11-8 jquery如何获取元素相对于父元素的位置
2024-08-27 19:40:40
js进阶 11-8 jquery如何获取元素相对于父元素的位置
一、总结
一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset()一样。
1、jquery中jquery集合中的匿名函数的两个参数是什么?
$(selector).offset(function(index,oldoffset)),很多jquery集合中的匿名函数都是index和oldvalue两个参数
2、jquery中position()和offset()的区别是什么?
如果当前元素的祖辈元素全部都是默认定位(static),那么该函数返回的偏移位置与offset()函数相同。
与offset()不同的是:position()返回的是相对于被定位的祖辈元素的坐标,offset()返回的是相对于当前文档的坐标。
3、position()可以像jquery中的其它位置函数(offset(),scrollTop(),scrollLeft())一样不仅可以取值,也可以设置值么?
不可以
position()函数无法用于设置操作。只可以返回值。
4、如何设置子元素相对于父元素偏移?
在CSS定位布局中,如果我们对父元素设置position:relative,我们就可以使用position:absolute来设置子元素相对于父元素的定位距离
5、jquery中的window对象怎么表示?
$(window)
114 $(window).scrollTop(500)
二、jquery如何获取元素相对于父元素的位置
1、相关知识
- offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。
- 该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
- 设置偏移坐标:$(selector).offset(value)
- 使用函数来设置所有匹配元素的偏移坐标:$(selector).offset(function(index,oldoffset))
- index - 可选。接受选择器的 index 位置
- oldvalue - 可选。接受选择器的当前坐标
- position() 方法返回匹配元素相对于父元素的位置(偏移)。
在CSS定位布局中,如果我们对父元素设置position:relative,我们就可以使用position:absolute来设置子元素相对于父元素的定位距离
- position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。
- 该函数返回一个坐标对象,该对象有一个left属性和top属性。position()中的坐标参考系是以被定位的祖辈元素的左上角为原点(0,0),向右为正,向下为正。
- 如果当前元素的祖辈元素全部都是默认定位(static),那么该函数返回的偏移位置与offset()函数相同。
- 如果当前jQuery对象匹配多个元素,返回坐标时,position()函数只以其中第一个匹配的元素为准。如果没有匹配的元素,则返回undefined。
- 与offset()不同的是:position()返回的是相对于被定位的祖辈元素的坐标,offset()返回的是相对于当前文档的坐标。
- position()函数无法用于设置操作。
- scrollTop():获取或设置元素相对于垂直滚动条顶部的距离,
- scrollLeft():来获取或设置元素相对于水平滚动条左部的距离。
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
#main{
margin:50px;
padding: 50px;
background: #ccc;
width: 100px;height: 100px;
position: relative;
/* overflow: auto;*/
}
#div1{
position: absolute;
width: 100px;height: 100px;
background: red;
}
</style>
</style>
</head>
<body>
<div id="main">
<div id="div1"></div>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<input id="btn1" type="button" value="获取">
<input id="btn2" type="button" value="设置">
<input id="btn3" type="button" value="设置2">
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
var top = $("#div1").offset().top;
var left = $("#div1").offset().left;
alert(top+'\n'+left) var top2 = $("#div1").position().top;
var left2= $("#div1").position().left;
alert(top2+'\n'+left2)
}) $('#btn2').click(function(){
// $("#div1").offset({
// top:200,
// left:200
// });
$("#div1").position({
top:200,
left:200
}); }) var count=0
$('#btn3').click(function(){
$('#main').scrollTop(count++*100)
alert($('#main').scrollTop())
})
$(window).scrollTop()
})
</script>
</body>
</html>
最新文章
- Python ORM Storm 源码修改
- 【BZOJ1270】1270: [BeijingWc2008]雷涛的小猫 DP
- .Net魔法堂:AssemblyInfo.cs文件详解
- Flex4/Flash开发在线音乐播放器 , 含演示地址
- hdoj 5402 Travelling Salesman Problem
- python - os.path,路径相关操作
- XML操作之Linq to Xml
- idea标注yml资源配置文件
- python 浅谈小数据池和编码
- MVC5+EF6入门教程——实现动态创建数据库与登录验证
- poj-1386(欧拉回路)
- spring cloud zuul 传递 header
- 用xtrabackup2.4备份mysql5.6.30一直显示log scanned up to
- codeforces 980A Links and Pearls
- nginx的gzip压缩功能
- 微信小程序 获取位置、移动选点、逆地址解析
- C++ 保留有效小数 保留有效数字
- 4.update更新和delete删除用法
- bzoj 4464 : [Jsoi2013]旅行时的困惑
- 飞跃平野(sdut1124)
热门文章
- SQLITE数据表主键设置Id自增方法
- J2SE核心开发实战(一)——认识J2SE
- item-设置可见性
- 10. Spring Boot JDBC 连接数据库
- js数组遍历和对象遍历小结
- Node.js笔记 请求方式 GET
- Windows 7 Ultimate with SP1(x64) MSDN 官方简体中文旗舰版原版
- 鲁德http://www.testroad.org/topic/76
- StackExchange.Redis 官方文档
- 【习题 3-8 UVA - 202】Repeating Decimals