jQuery的offset、position、scroll，元素尺寸、对象过滤、查找、文档处理

jQuery_offset和position
var offset = $('.xxx').offset() console.log(offset.left.,offset.top)xxx相对于页面左上角的位置
var position = $('.xxx').position() console.log(position.left,position.top)xxx相对于父元素左上角的位置
$('.xxx').offset({left:50, top:100})设置位置

jQuery_scroll
1、scrollTop()：读取/设置滚动条的Y坐标
2、$(document.body).scrollTop()+$(document.documentElement).scrollTop()：读取页面滚动条的Y坐标(兼容chrome和IE)
3、$('body,html').scrollTop(60);滚动条到指定位置(兼容chrome和IE)

//平滑滚到顶部
var $page = $('html,body')
var distance = $('html').scrollTop()+$('oody').scrollTop()//总距离
var time = 2000//总时间
//间隔时间
var intervalTime = 50
var itemDistance = distance/(time/intervalTime)
//循环定时器不断滚动
var intervalId = setInterval(function(){
distance -=itemDistance
//到顶部停止
if(distance<=0){
distance =0//修正
clearInterval(intervalId)
}
$page.scrollTop(distance)
},intervalTime)
})

元素尺寸
1、内容尺寸
height():height
width():width
2、内部尺寸
innerHeight():height+padding
innerwidth():width+padding
3、外部尺寸
outerHeight(false/true):height+padding+border如果是true，加上margin
outerWidth(false/true):width+padding+border如果是true，加上margin
jQuery对象的过滤
1、first():第一个
2、last()：最后一个
3、eq(index|-index)
4、filter(selector)：某个标签中title为hello的.fileter('[title=hello]')
5、not(selector)：某个标签中title不为hello的.not('[title=hello]') .filter('[title!=hello]').filter('[title]')
6、has(selector)：标签中有xx子标签的.has('span')
jQuery对象的查找
在已经匹配的元素集合中根据选择器查找孩子/父母/兄弟标签
1、children():子标签中找
2、find():后代标签中找
3、parent():父标签
4、prevAll():前面所有的兄弟标签
5、nextAll():后面所有的兄弟标签
6、siblings():前后所有的兄弟元素
jQuery文档处理
1、添加/替换元素
 append(content):向所有匹配的所有元素内部的最后插入指定的内容
 prepend(content):向当前匹配的所有元素内部的最前面插入指定内容
 brfore(content):将指定内容插入到当前匹配元素的前面
 after(content):将指定内容插入到当前所有匹配元素的后面替换节点
 replaceWidth(content):用指定内容替换所有匹配的标签删除节点
2、删除元素
 empt():删除所有匹配元素的子元素
 remove():删除所有匹配的元素

转载于:https://www.cnblogs.com/Yokemadman/p/10439515.html