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():来获取或设置元素相对于水平滚动条左部的距离。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwjgsp.html