菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 巨朝阳-20221122-jQuery03 [打印本页]

作者: 云云 时间: 2022-11-23 00:25
标题: 巨朝阳-20221122-jQuery03
本帖最后由云云于 2022-11-24 00:21 编辑

一、今日学习
jQuery-DAY3
1.jq事件注册

2.jq动画

1.jq文档加载事件
$(function(){       })

$(document).reday(function(){       })

1.原生文档加载事件
windown.onload=function(){       }
windown.addEventListener('load',function(){       })

2.jq文档加载事件：让网页中htmlDOM加载完成之后，就执行js代码
$(function(){       })

$(document).reday(function(){       })

$().ready(function(){       })
面试题：原生加载事件与jq加载事件的区别
1.原生文档加载事件
windown.onload=function(){       }---只能使用一次，只执行一次，后面会覆盖之前的
windown.addEventListener('load',function(){       })---事件监听不会导致只执行一个事件处理函数

2.jq文档加载事件：让网页中htmlDOM加载完成之后，就执行js代码
$(function(){       })---可以多次使用

$(document).reday(function(){       })---可以多次使用

$().ready(function(){       })---可以多次使用

区别：
1.原生的不可以简写，jq可以简写
2.原生的onload一个网页中只能使用一次，jq可以多次使用
2.jq普通事件绑定---重点
on()---重点
bind()
live()
delegate()
1.1注册事件的分类
分类：
一对一：一个事件源，一个事件类型，一个事件处理函数
一对多：一个事件源，多个事件类型，一个事件处理函数
多对一：一个事件源，多个事件类型，多个不同的事件处理函数
1.2事件委派---重点掌握
概念：事件委派、事件委托、事件代理、事件分发
注册时，把事件注册到父级，由父级来分配任务给子元素

语法：

父元素.on('不带on的事件类型','新添加的后代元素',事件处理函数)
简写：
父元素.带on的事件类型('新添加的后代元素',事件处理函数)
1.3注销事件---理解
on()---off()
bind()---unbind()

jq对象.off():注销所有事件
jq对象.off('事件1 事件2')：注销指定事件
空间命名法：针对相同的事件，需要多次注册事件类型.别名

1.4合成事件---了解
jq对象.hover(移入事件处理函数,移出事件处理函数)
只传一个的话移入移出都是这个处理函数
1.5事件对象
event---事件对象：事件处理函数的第一个参数
event.target：事件源
event.type:事件类型
event.pageX             event.pageY：鼠标坐标

阻止浏览器默认行为：event.preventDefault()
阻止冒泡：event.stopPropagtion()
2.jq动画
2.1分类
内置动画

自定义动画

2.2内置动画---了解
1.显示/隐藏--- $('#box').show(3000);/ $('#box').hide(3000);
2.划入/划出---
3.淡入/淡出
2.3自定义动画---重点
概念：自定义动画表示自己写的动画

语法：jq对象.animate(parmas,apeed,easing,fn)

parmas:是一个对象，需要执行动画的属性，不是所有属性都可以实现动画效果
speed：动画时长---毫秒
easing：动画类型
fn：回调函数
2.4停止动画
jq对象.stop(参数1,参数2)

参数1：停止当前动画，是否结束后面的动画
参数2：停止当前动画，是否把当前动画直接拉到结束状态

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)