jQuery 第二天 元素节点、尺寸位置及动画

1.元素节点

创建节点

​ 直接$('html标签')就可以创建节点

插入节点

父子关系

​ 追加到某一个元素的最后：$('父').appnd('子') 子.appendTo('父') 不会覆盖原先的

​ 追加到某一个元素的最前面：$('父').prepend('子') 子.prependTo('父')

兄弟关系

​ 追加到元素的后面：$('元素').after('元素')

​ 追加到元素的前面：$('元素').before('元素')

删除节点

​ $('元素').remove();

​ remov是连标签都删了，empty只删除内容(包括子节点)，html()是清空内容，也是删除

克隆节点

​ $('元素').clone();

​ 克隆是内容和子节点都克隆

​ 如果需要克隆的元素需要加事件，只会给待克隆的元素添加事件，克隆的没有事件，参数要加true，克隆的才会有事件

2.事件委托

​ 和js中的事件委托一样，就是用jQuery写的

3.位置

​ 获取相对于文档的位置：$('元素').offset()

​ 得到的是一个对象，$('元素').offset().top是获取top值，也可以设置位置

​ 获取相对于定位父元素的位置：$('元素').position()

​ 得到的是一个对象，他也可以获取top和left值，但是不能设置

4.卷起距离

​ $('元素').scrollTop()/scrollLeft() 也可以设置，参数里写

5.尺寸

​ 获取内容：width()、height()

​ 获取内容+padding：innerwidth()、innerheight()

​ 获取内容+padding+border：outerwidth()、outerheight()

​ 获取内容+padding+boder+margin：outerwidth(true)、outerheight(true)

设置尺寸的话是总共的，不是只加内容

6.动画

显示/隐藏

​ show()/hide() 切换动画：toggle() 其实是display：none和block

滑动动画

​ 下滑/上滑：slideDown()/slideUp() 切换动画：slideToggle()

淡入/淡出

​ 淡入动画：fadeIn() opacity只能是1

​ 淡出动画：fadeOut() opacity只能是0

​ 切换动画fadeToggle() 其实是opacity改变和display：none和block 就是淡入和淡出交替

​ 淡出到xxx：fadeTo(时间，opacity的值，匀速/变速，回调函数) 可以设置opacity的值，由于opacity的值必须设置，因此时间也是必填项，如果时间不填，就会把opacity的值当做时间

自定义动画

​ $('元素').animate(对象，时间，匀速/变速，回调函数) 自定义动画对象中的只能改变数字的

​ 动画方法中的三个参数（时间，匀速/变速，回调函数）回调函数在动画执行完之后执行

​ 只有标签才可以做动画，document和window都不能做动画

7.延迟播放动画

​ $('元素').delay(时间) 要想谁延迟，在他前面加delay()，会使delay后面的动画都延迟执行

8.终止动画

​ $('元素').stop()

​ 一个参数true时，是暂停动画，停留在当前位置

​ 两个参数true时，是完成动画，就是动画执行完成的效果

​ 由于动画有排列现象，一般都是在动画前面加stop()，让上一个动画停止