js进阶 11-8 jquery如何获取元素相对于父元素的位置
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>
js进阶 11-8 jquery如何获取元素相对于父元素的位置的更多相关文章
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- js进阶 13-11/12 jquery如何实现折叠导航
js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- js进阶 9-11 select选项框如何动态添加和删除元素
js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...
- JS子元素oumouseover触发父元素onmouseout
原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...
随机推荐
- React 和 Vue 对比
React 和 Vue 有许多相似之处,它们都有: * 使用 Virtual DOM * 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件. * 将注意力集中保持 ...
- 【AtCoder Regular Contest 082 F】Sandglass
[链接]点击打开链接 [题意] 你有一个沙漏. 沙漏里面总共有X单位的沙子. 沙漏分A,B上下两个部分. 沙漏从上半部分漏沙子到下半部分. 每个时间单位漏1单位的沙子. 一开始A部分在上面.然后在r1 ...
- Java中接口继承泛型接口
在使用Mybatis做web开发时,每一个模块的数据持久层的接口都会定义:增删改查四个方法.我想为什么不新建一个Base接口来做所有数据持久层的父接口呢? 于是,我试验了一下,建立了一个泛型接口,里面 ...
- ANSI转UTF-8中文无乱码解决方案
近期做的项目需要使用Doxygen生成文档,由于前期代码不是本人完成,他使用的是ANSI格式的文件,后来我用Notepad++写其他文件时,默认保存为UTF-8 无BOM编码格式,因此整个项目文件中既 ...
- COGS——C66. [HAOI2004模拟] 数列问题
http://www.cogs.pro/cogs/problem/problem.php?pid=66 ★☆ 输入文件:dfs3.in 输出文件:dfs3.out 简单对比 时间限制:1 ...
- JS概述
从Asp.NET跨越到JavaScript.这既是一个新的领域也是一个非常熟悉的地方,新是由于不知道什么是JavaScript,首先来了解一下什么是JavaScript. ...
- html doctype作用
简单介绍下html页面中DOCTYPE声明的作用: <!doctype html>告诉浏览器是使用标准模式还是怪异模式渲染页面. 1.为html页面添加了doctype,则浏览器在stan ...
- JQ实现选项卡(jQuery原型插件扩展)
下边分为两个版本,一种是点击切换选项(index.js),一种是滑过切换选项(index1.js) HTML文件: jq使用jquery-1.11.3.js版本 <!DOCTYPE html&g ...
- AJAX有关的请求协议及HTTP报文
URI:统一资源标识符 URI=URL+URNURL:统一资源定位符URN:统一资源名称 上边的图片编号对应下边的编号说明: 1.HTTP(占90%市场)/HTTPS/FTP 传输协议(可以理解为快递 ...
- POJ 1466 Girls and Boys (ZOJ 1137 )最大独立点集
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=137 http://poj.org/problem?id=1466 题目大意: ...