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

标题: 康利20221122jQuery03 [打印本页]

作者: 智商不在服务区 时间: 2022-11-22 23:50
标题: 康利20221122jQuery03
一、学习内容： jQuery文档加载事件
1.原生文档加载事件
window.onload=function(){ }---只能使用一次
window.addEventListener('load',function(){ })---可以多次使用
2.jq文档加载事件：让网页中htmlDOM加载完成后，就可以执行js代码---可以多次使用
$(function(){
js代码
})
$(document).ready(function(){
js代码
})
$().ready(function(){
js代码
})
3.面试题：原生加载事件与jq加载事件的区别
原生的不可以简写，jq可以
   原生的onload一个页面中只能使用一次，jq可以多次使用
jQuery普通事件绑定
on()---重点
bind()
live()
delegate()
注册事件的分类
一对一：一个事件源，一个事件类型，一个事件处理函数
一对多：一个事件源，多个事件类型，一个事件处理函数
多对一：一个事件源，多个事件类型，不同事件处理函数
事件委派
概念：事件委托，事件代理，事件分发，事件委派
注册事件时，把事件注册到父级，由父级来分配任务给子元素
语法：父元素.on('不带on的事件类型'，'新添加的后代元素'，事件处理函数)
注销事件
on()----off()
bind()----unbind()
jq对象.off():注销所有的事件
jq对象.off('事件1 事件2'):注销指定事件
合成事件
jq对象.hover(移入事件，移出事件)
一个参数：移入移除用同一个函数
事件对象
event---事件对象：事件处理函数的第一个参数
event.target---事件源
event.type---事件类型
event.pageX  pageY---鼠标坐标
阻止浏览器默认行为：event.preventDefault()
阻止冒泡：event.stopPropagation()
jq动画
分类
内置动画
1.显示/隐藏
2.滑入/滑出
3.淡入/淡出
自定义动画
概念：自定义动画就是自己写的动画
语法：jq对象.animate(parmas,speed,easing,fn)
parmas：是一个对象，需要执行动画的属性，不是所有属性都可以实现的动画效果
speed：动画时长---毫秒
easing：动画类型---linear
fn：回调函数
停止动画
jq对象.stop(参数1，参数2)
1.参数1：停止当前动画，是否结束后面的动画
2.参数2：停止当前动画，是否把当前动画直接拉到结束状态
jq中的尺寸、位置、卷曲
尺寸：width
   获取浏览器窗口显示区域的宽高
console.log($(window).width());
console.log($(window).height());
文档流的宽高
console.log($(document).width());
console.log($(document).height());
   box-sizing:border-box;是不包含padding，border
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：距离浏览器左侧
   console.log($('#box').offset());
   console.log($('#box2').offset());
   console.log($('#box').offset().top);
   console.log($('#box').offset().left);
卷曲
scrollTop()滚动条
document.addEventListener('scroll', function () {
   console.log($(this).scrollTop());
});
$('#box2').scroll(function () {
   console.log($(this).scrollTop());
   console.log($(this).scrollLeft());
})

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