jQuery offset方法、position方法和scroll相关方法

offset方法和position方法

offset方法
原生js的三大家族 offset家族 scroll家族 client家族
offset家族 :
offsetWidth
offsetHeight
offsetLeft
offsetTop
offsetParent

offset方法获取到的是一个对象 这里的offset方法 和原生的offset家族不一样，里面是left和top的键值对 获取到的是元素距离document的距离

调用offset方法 获取返回值
jquery对象.offset()

console.log($("#son").offset());

可以进行设置 设置的值是一个对象 里面包含left top值

 $("#son").offset({
		left:200,
		 top:200
})

需要注意的是 当我们的子元素没有定位的时候 那么给元素设置offset(调用offset方法) 就会给这个元素添加一个相对定位

jquery对象.offset(设置的属性构成的对象)

position方法

获取到的值还是一个对象 里面也是left和top的键值对
jQuery对象.position()

 console.log($("#son").position());

position不能进行设置

$("#son").position({
				   left:200,
				   top:200
			   })

获取到的是元素相对于定父级的距离

scroll相关方法

jquery对应的scrollLeft() scrollTop()
和原生js里面scrollLeft和scrollTop属性是一样的 都是获取内容滚动出去的距离
jQuery对象.scrollLeft()
jQuery对象.scrollTop()

 console.log($("#one").scrollLeft())
 console.log($("#one").scrollTop())

设置滚动出去的距离
jQuery对象.scrollLeft(属性值)
jQuery对象.scrollTop(属性值)

$("#one").scrollLeft(100);
$("#one").scrollTop(100);