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():删除所有匹配的元素