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、相关知识

元素的位置

  1. offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。
    1. 该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
    2. 设置偏移坐标:$(selector).offset(value)
    3. 使用函数来设置所有匹配元素的偏移坐标:$(selector).offset(function(index,oldoffset))
      • index - 可选。接受选择器的 index 位置
      • oldvalue - 可选。接受选择器的当前坐标
  2. position() 方法返回匹配元素相对于父元素的位置（偏移）。

    在CSS定位布局中，如果我们对父元素设置position:relative，我们就可以使用position:absolute来设置子元素相对于父元素的定位距离

    • position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。
    • 该函数返回一个坐标对象，该对象有一个left属性和top属性。position()中的坐标参考系是以被定位的祖辈元素的左上角为原点(0,0)，向右为正，向下为正。
    • 如果当前元素的祖辈元素全部都是默认定位(static)，那么该函数返回的偏移位置与offset()函数相同。
    • 如果当前jQuery对象匹配多个元素，返回坐标时，position()函数只以其中第一个匹配的元素为准。如果没有匹配的元素，则返回undefined。
    • 与offset()不同的是：position()返回的是相对于被定位的祖辈元素的坐标，offset()返回的是相对于当前文档的坐标。
    • position()函数无法用于设置操作。
  3. 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如何获取和改变元素的位置的更多相关文章

  1. js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）

    js进阶 11-6  jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...

  2. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  3. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  4. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  5. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  6. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  7. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  8. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  9. js进阶 12-7 如何知道你是从哪个元素移动到当前元素与事件调用时如何添加额外数据

    js进阶 12-7 如何知道你是从哪个元素移动到当前元素与事件调用时如何添加额外数据 一.总结 一句话总结:event的relatedTarget属性和data属性. 1.如何知道你是从哪个元素移动到 ...

随机推荐

  1. Spring异步执行(@Async)2点注意事项

    Spring中可以异步执行代码,注解方式是使用@Async注解. 原理.怎么使用,就不说了. 写2点自己遇到过的问题. 1.方法是公有的 // 通知归属人 @Async public void not ...

  2. 【Codeforces Round #451 (Div. 2) D】Alarm Clock

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 尺取法+二分. 类似滑动窗口. 即左端点为l,右端点为r. 维护a[r]-a[l]+1总是小于等于m的就好. (大于m就右移左端点) ...

  3. elasticsearch cluster 详解

    上一篇通过clusterservice对cluster做了一个简单的概述, 应该能够给大家一个初步认识.本篇将对cluster的代码组成进行详细分析,力求能够对cluster做一个更清晰的描述.clu ...

  4. 分析器错误消息: 此实现不是 Windows 平台 FIPS 验证的加密算法的一部分

    关于错误提示:此实现不是 Windows 平台 FIPS 验证的加密算法的一部分的解决方案 不知怎么的,每次Win10升级后相应的注册器都恢复默认了,当我运行08版的asp项目时会报这个错. vs上的 ...

  5. JavaScript---call()使用的一些疑问

    疑问:在使用.call()时,调用对象到底是否可以直接拥有了被调用者的方法和属性? 这里输出结果为:ReferenceError: o is not defined function Person(n ...

  6. （JavaScript基础向）sort()方法里的排序函数的理解

    比较常见的解释可以看这里:js的sort()方法,这篇博客写得挺好的,一般的应用的理解已经足够了. 但是如果要活用sort()方法里面的参数——也就是排序函数的话,可能就比较难理解了. 然后我就总结出 ...

  7. jni和C++通信中文乱码的问题

    转自 http://www.cnblogs.com/bluesky4485/archive/2011/12/13/2285802.html 首先,需要明确几个关于编码的基本概念: java内部是使用的 ...

  8. 管理aix的密码策略

    aix 中 /etc/security/user 存放用户的概要 常用参数参数如下 1.account_locked      defines whether the account is locke ...

  9. MySql 中的setAutoCommit方法

    引言 setAutoCommit方法用一句话说就是用来保持事务完整性.一个系统的更新操作可能涉及多张表,这个时候,就须要用多个Sql语句来实现,实际上我认为这个东西就是用来实现事务的. 当我们进行多条 ...

  10. 【MongoDB】在Mongodb使用shell实现与javascript的动态交互

    关于利用mongodb的shell运行脚本,这点在曾经的文章中有点遗漏:如今在此篇博客中做个补充: 一.在命令行中传入脚本文件 定义一个javasciprt文件,名称为:script1.js,内容例如 ...