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

标题: 蒋鹏冲-20221122-jQuery-day03 [打印本页]

作者: 北纬33 时间: 2022-11-22 23:57
标题: 蒋鹏冲-20221122-jQuery-day03
一，今日学习内容：
1.jQuery-day03
1.jq文档加载事件
$(function(){ })

$(document).ready(function(){ })
1.原生文档加载事件
window.onload=function(){ }
window.addEventListener('load',function(){ })
2.jq文档加载事件：让网页中htmlDOM加载完成后，就可以执行js代码
$(document).ready(function(){ })
$().ready(function(){ })
$(function(){ })
3.面试题：原生加载事件与jq加载事件的区别
1.原生的不可以简写，jq可以
2.原生的onload一个网页中只能使用一次，jq可以多次使用
2.jq普通事件绑定---重点
on()---重点
bind()
live()
delegate()
2.1 注册事件的分类
分类：
一对一：一个事件源，一个事件类型，一个事件处理函数
一对多：一个事件源，多个事件类型，一个事件处理函数
多对一：一个事件源，多个事件类型，不同事件处理函数
2.2 事件委派---重点掌握
概念：事件委派，事件委托，事件代理，事件分发
注册事件时，把事件注册到父级，由父级来分配任务给子元素
语法：
父元素.on('不带on的事件类型'，'新添加的后代元素',事件处理函数)
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  pageY:鼠标坐标

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

自定义动画
3.2 内置动画---了解
三组：
1.显示/隐藏
2.滑入/滑出
3.淡入/淡出
3.3 自定义动画---重点
概念：自定义动画表示自己写的动画

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

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

1.参数1：停止当前动画，是否结束后面的动画
2.参数2：停止当前动画，是否把当前动画直接拉到结束状态
4.jq中的尺寸、位置、卷曲
// 获取浏览器窗口显示区域的宽高
      console.log($(window).width());
      console.log($(window).height());

      // 文档流的宽高
      console.log($(document).height());
      console.log($(document).width());

      // 出现滚动条：document宽高发生改变，文档流的实际宽高

      // box-sizing:border-box;不包含border、padding
      console.log('box', $('#box').width(), $('#box').height());

      // content+padding: 不包含border
      console.log('box', $('#box').innerWidth(), $('#box').innerHeight());

      // content+padding+border
      console.log('box', $('#box').outerWidth(), $('#box').outerHeight());
// offset()：偏移,返回值是一个对象
      // top：距离浏览器顶部的距离---搜索栏、书签栏的下面开始算起
      // left：距离浏览器左侧
$(this).scrollTop()

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