js进阶 11-7 jquery如何获取和改变元素的位置
js进阶 11-7 jquery如何获取和改变元素的位置
一、总结
一句话总结：jquery中匿名函数中的index参数是什么意思。jquery对象多集合，故index为所选元素的下标。
1、jquery中元素的位置有哪三种？
相对文档，offset()，相对父元素，position()，相对垂直滚动条顶部，scrollTop()
offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。
position() 方法返回匹配元素相对于父元素的位置（偏移）。
scrollTop():获取或设置元素相对于垂直滚动条顶部的距离， scrollLeft():来获取或设置元素相对于水平滚动条左部的距离。
2、jquery中匿名函数中的index参数是什么意思？
jquery对象多集合，故index为所选元素的下标
42 $('div').offset(function(index,old){
43 alert(index)
44 return{
45 top:old.top+100*index,
46 left:old.left+100*index
47 }
48 })
3、offset()带匿名函数的时候，匿名函数的两个参数分别是什么，代表什么意思？
使用函数来设置所有匹配元素的偏移坐标:$(selector).offset(function(index,oldoffset))
- index - 可选。接受选择器的 index 位置
- oldvalue - 可选。接受选择器的当前坐标
42 $('div').offset(function(index,old){
43 alert(index)
44 return{
45 top:old.top+100*index,
46 left:old.left+100*index
47 }
48 })
4、offset()的两个属性是什么（知道offset()的意思，两个属性还不好想么）？
距左和距上啊
top 和 left，以像素计
27 $('#btn1').click(function(){
28 //alert(typeof $('#div1').offset())
29 //获取div1距离顶部的距离
30 var top=$('#div1').offset().top
31 var left=$('#div1').offset().left
32 alert(top+'\n'+left)
33 })
二、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>
div{
width: 100px;height: 100px;
background: red;
border: solid 3px green;
}
</style>
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></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(){
//alert(typeof $('#div1').offset())
//获取div1距离顶部的距离
var top=$('#div1').offset().top
var left=$('#div1').offset().left
alert(top+'\n'+left)
})
$('#btn2').click(function(){
// $('#div2').offset({
// top:100,
// left:100
// })
$('#div2').offset($('#btn3').offset())
})
$('#btn3').click(function(){
$('div').offset(function(index,old){
alert(index)
return{
top:old.top+100*index,
left:old.left+100*index
}
})
}) })
</script>
</body>
</html>
js进阶 11-7 jquery如何获取和改变元素的位置的更多相关文章
- js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如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进阶 12-7 如何知道你是从哪个元素移动到当前元素与事件调用时如何添加额外数据
js进阶 12-7 如何知道你是从哪个元素移动到当前元素与事件调用时如何添加额外数据 一.总结 一句话总结:event的relatedTarget属性和data属性. 1.如何知道你是从哪个元素移动到 ...
随机推荐
- django-rest-framework框架 第四篇 认证Authentication
认证Authentication 什么是身份认证 身份验证是将传入请求与一组标识凭据(例如请求来自的用户或与其签名的令牌)关联的机制. 视图的最开始处运行身份验证 在权限和限制检查发生之前,以及在允许 ...
- 洛谷 P3955 图书管理员【民间数据】
P3955 图书管理员[民间数据] 题目背景 数据已再次修正 (既然你们不要前导0我就去掉了) 题目描述 图书馆中每本书都有一个图书编码,可以用于快速检索图书,这个图书编码是一个 正整数. 每位借书的 ...
- ORA-00957: 反复的列名
1.错误描写叙述 ORA-00957: 反复的列名 2.错误原因 SQL> create table info( 2 stu_id varchar2(7) not null, 3 stu_nam ...
- 00090_字节输入流InputStream
1.字节输入流InputStream (1)通过InputStream可以实现把内存中的数据写出到文件: (2)把内存中的数据写出到文件InputStream此抽象类,是表示字节输入流的所有类的超类. ...
- 1.5 Python基础知识 - while循环
在我们生活中有很多反复要做的事情,或者动作,我们称之为循环.在开发程序中也会有循环的事情要去做,就是需要反复的去执行某个代码,或者反复进行某种演算,直到达到某种条件的时候才会停止.在Python中我们 ...
- 硬件——nrf51822第一篇，GPIO的使用
未完,待续...... 本实现是基于一个开发箱,包括:综合应用开发系统主板XT-EDU-AK 1套: 手持终端系统 XT-EDU-HK 1套: GPIO操作 工程: 这是一个关于流水灯的程序: 我 ...
- 为什么我要选择erlang+go进行server架构(2)
原创文章,转载请注明出处:server非业余研究http://blog.csdn.net/erlib 作者Sunface 为什么我要选择Erlang呢? 一.erlang特别适合中小团队创业: erl ...
- 自旋锁spinlock解析
1 基础概念 自旋锁与相互排斥锁有点类似,仅仅是自旋锁不会引起调用者睡眠.假设自旋锁已经被别的运行单元保持.调用者就一直循环在那里看是否该自旋锁的保持者已经释放了锁."自旋"一词就 ...
- php课程 8-30 实现验证码验证的难点是什么
php课程 8-30 实现验证码验证的难点是什么 一.总结 一句话总结:session技术实现验证码传递. 1.生成验证码的那个网页(php文件)中的验证码怎么搁到别的网页中去? 直接在img的src ...
- screenX, clientX, pageX
screenX:鼠标相对屏幕左上角的水平偏移量. clientX:鼠标相对于浏览器左上角的水平偏移量,会随着滚动条的移动而移动. pageX:鼠标相对浏览器左上角的水平偏移量.不会随着滚动条的移动而移 ...