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

标题: 李扬敏-20221122-jquery [打印本页]

作者: 王源的李可爱 时间: 2022-11-23 00:29
标题: 李扬敏-20221122-jquery

一．今日学习内容

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()；滚动条距离顶部的距离

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