jQuery-day03 1.事件注册 2.对象 1.jq文档加载事件$(function(){ })
$(document).redy(function(){ })
dom树加载完成后再执行
1.原生文档加载时间
window.onload=function(){ }
window.addEventListener('load',function(){ })
所有静态文档加载完成后再加载
2.jq文档加载时间
让网页html中的dom加载完成后,就可以执行js代码
$(function(){ })
$(document).redy(function(){ })
$().reday(function(){ }) //简写
3.面试题:
原生加载事件与jq加载事件的区别
#window.onload:只能使用一次,后面的会覆盖前面的
#window.addEventListener:事件监听不会,只执行一个事件处理函数
#$(function(){}):可以多次使用
#$(document).redy(function(){})
1.原生不可简写
2.原生onload一个网页只能使用一次,jq可以多次使用2.ja普通事件绑定---[重点]on()---[重点]
bind()
live()
dekegate()2.1注册事件的分类分类:
一对一:一个事件源,一个事件类型,一个事件处理函数
一对多:一个事件源,多个事件类型,一个事件处理函数
多对一:一个事件源,多个事件类型,不同的事件处理函数2.2事件委派---[重点]概念事件委派也称:事件委托,事件代理,事件分发 注册事件时,把事件注册到父级,由父级来分配任务给子元素 语法父元素.on('不带on的事件类型','新添加的后代元素',function(){})2.3注销事件on()---off()
bind()---unbind()
jq对象.off()---注销所有的事件
jq对象.off('事件1 事件2...')---注销选中的事件
空间命名法
针对多次相同事件,需要多次注册,事件类型.别名2.4合成事件语法
jq对象.hover(移入事件函数,移出事件函数)
只写一个,移入移出共用一个函数2.5事件对象event
事件对象:事件处理函数的第一个参数
event.target---事件源
event.type---事件类型
event.pageX event.pageY
阻止浏览器默认行为
event.preventDefault()
阻止冒泡
event.stopPropagation()3.jq动画3.1分类内置动画 自定义动画 3.2内置动画三组:
1.显示/隐藏
show()/hide()
2.滑入/滑出
slideDown()/slideUp()
3.淡入/淡出
fadeIn()/fadeOut()3.3自定义动画---[重点]语法jq对象.animate(parmas,speed,easing,fn)
parmas:是一个对象,需要执行动画的属性,不是所有属性都可以实现动画效果
speed:动画时长---毫秒
easing:动画类型---linear
fn:回调函数3.4停止动画jq对象.sotp(参数1,参数2)
1.参数1:停止当前动画,是否结束后面动画
2.参数2:停止当前动画,是否把当前动画拉到结束状态4.尺寸、位置、卷曲4.1尺寸获取浏览器窗口显示区域宽高
$(window).width/height();
文档流的宽高
$(document).width/height();
出现滚动条document的宽高发生改变4.2偏移offset()
偏移,返回值是一个对象
top:距离浏览器顶部的距离
left:距离浏览器左侧的距离
|