|
一．今日学习内容 1.文档加载事件（入口） jq文档加载事件：让htmlDom加载完成后，执行js 原生文档加载事件 window.onload=function(){ }----只执行一次，会被覆盖 window.addEventListener('load',function(){ }) ---可执行多次，不会被覆盖 jq文档加载事件 $(function(){js代码})----推荐，可多次执行 $(document).ready(function(){js代码})---可多次执行 $().ready(function(){})----简写 #面试题：原生加载事件和jq加载事件的区别 原生不可以简写，jq可以 原生的onload一个网页中只可以使用一次，jq可多次 2.事件绑定 live() delegate() 注册事件的分类 一对一：一个事件源，一个事件类型，一个事件处理函数 一对多：一个事件源，多个事件类型，一个事件处理函数 多对一：一个事件源，多个事件类型，多个事件处理函数 3.事件委派 也叫事件委托，事件代理，事件分发 注册事件时，把事件注册到父级，由父级来分配任务给子元素 父元素.on('不带on的事件类型'，‘新添加的后代元素’，事件处理函数) 4.注销事件 on()---绑定 空间命名法---同一个事件多次注册：事件类型.别名 off()----注销 jq对象.off(‘事件1 事件2’)----不传参代表注销所有事件 bind()---绑定 unbind()---注销 5.合成事件 jq.hover(移入事件处理函数，移出事件处理函数) 6.事件对象 event---事件对象：事件处理函数的第一个参数 event.target：事件源，点击的对象 event.type：事件类型 event.pageX pageY：鼠标坐标 阻止浏览器默认行为：event.preventDefault() 阻止冒泡：event.stopPropagation() 7.jq动画分类 内置动画 显示/隐藏--show()/hide()---左上角 滑入/滑出--slideDown()/slideUp()----切换：slideToggle() 淡入/淡出--fadeIn()/fadeOut()----切换：fadeToggle()----透明度 自定义动画 语法：jq对象.animate(parmas，speed，easing，fn) parmas：是一个对象，需要执行动画的属性，不是所有属性都可以实现动画效果 speed：运动时间，单位ms easing：运动曲线 停止动画 jq对象.stop(参数1，参数2) 参数1：停止当前动画，是否结束后面的动画 参数2：停止当前动画，是否直接拉到结束状态 false，false：点击后继续运行，停止当前动画，继续下一动画--默认false true，true：直接结束所有动画，拉满到结束状态 8.尺寸，位置，卷曲 尺寸 $(window).width()/height();获取浏览器窗口显示区域的宽高 $(document).width()/height();文档流的宽高，出现滚动条，高度发生改变 偏移：offset()；返回值是一个对象，相对于文档流 top：距离浏览器顶部的距离--书签栏下面 left：距离浏览器左侧 卷曲：scrollTop()；滚动条距离顶部的距离
| 
