jQuery超详细总结笔记

十 获取元素位置
1. offset()
offset: 偏移量
是一个读写的属性
读取
不传递参数就是读取
读到的元素相对于页面的位置关系
返回值是一个对象 { left: xxx, top: xxx }
书写
传递一个对象就是写入 { left: xxx, top: xxx }
注意: 绝对写入
不管你本身和页面的尺寸是什么样，写多少就是多少

2. position()
postition: 定位
只读的方法
读取:
元素相对于定位父级的位置关系
得到的也是一个对象 { left: xxx, top: xxx }
如果你写的是 right 或者 bottom, 会自动计算成 left 和 top 值给你

十一 获取卷去的尺寸（页面滚动条）
scrollTop()
原生 js 里面 document.documentElement.scrollTop
读写的方法
不传递参数的时候就是获取卷去的高度
传递一个参数就是设置卷去的高度

scrollLeft()
原生 js 里面 document.documentElement.scrollLeft
读写的方法
不传递参数的时候就是获取卷去的宽度
传递一个参数的时候就是设置卷去的宽度

十二 jQuery中的函数
ready() 事件
类似于 window.onload 事件,但是有所不同
window.onload 会在页面所有资源加载行
ready() 会在页面 html 结构加载完毕后执行
也叫做 jQuery 的入口函数
有一个简写的形式 $(function () {})

each() 方法
类似于 forEach(), 遍历数组的
jQuery 的元素集合, 是一个 jQuery 数组, 不是一个数组, 不能使用 forEach()
forEach语法：
forEach(function (item, index) {})
each语法：
each(function (index, item) {})
比较少用到, 因为 jQuery 隐式迭代 自动遍历

十三 jQuery中的动画
让元素出现不同的移动, 改变
transition -> 过渡动画
animation -> 帧动画

标准动画
show() 显示元素
语法: show(时间, 运动曲线, 运动结束的函数)

hide() 隐藏元素
语法: hide(时间, 运动曲线, 运动结束的函数)

toggle() 改变元素显示或隐藏（如果显示就隐藏，如果隐藏就显示）
语法: toggle(时间, 运动曲线, 运动结束的函数)
三个方法的参数都可以选填，不需要每个都填写

折叠动画
slideDown() 下滑显示
语法: slideDown(时间, 运动曲线, 运动结束的函数)


slideUp() 上滑隐藏
语法: slideUp(时间, 运动曲线, 运动结束的函数)


slideToggle() 切换滑动和隐藏
语法: slideToggle(时间, 运动曲线, 运动结束的函数)


渐隐渐显动画
实质是透明的opacity的变化
fadeIn() 逐渐显示
fadeIn(时间, 运动曲线, 运动结束的函数)


fadeOut() 逐渐消失
fadeOut(时间, 运动曲线, 运动结束的函数)


fadeToggle() 切换显示和消失
fadeToggle(时间, 运动曲线, 运动结束的函数)


以上三个方法的参数，均有默认值
fadeTo() 设置元素透明度变为你指定的数字
fadeTo(时间, 你指定的透明度, 运动曲线, 运动结束的函数)


综合动画
animate()
基本上大部分的 css 样式都可以动画
transform 不行, 颜色不行
语法: animate({}, 时间, 运动曲线, 运动结束的函数)
{ }里面就写你要运动的 css 属性,默认单位为px

停止动画
让当前的动画结束
因为 jQuery 的动画你一直点击，就会一直触发。即使不再点击让事件发生，还是会把没执行完的动画执行完毕。
你点击 10 次, 他就会触发 10 次, 直到 10 次全都完毕才结束
stop()
当这个函数触发的时候, 就会让运动立刻停下来
你运动到哪一个位置了就停止在哪一个位置
finish()
当这个函数触发的时候, 就会让运动立刻停下来
不管你运动到了哪一个位置, 瞬间到达运动完成位置