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

标题: 陈玉-20221122-jQuery.day03 [打印本页]

作者: polaris123 时间: 2022-11-22 23:48
标题: 陈玉-20221122-jQuery.day03
一、今日学习内容
1.事件注册
1.1文档加载事件
原生文档加载事件window.onload = function () {  }
            特点：window.onload:只能使用一次，只执行一次
            window.addEventListener('load', function (){}）
         特点：监听事件不会导致只执行一个事件处理函数
jq对象：
$(function(){})特点：可多次使用
$(document).ready(function(){})
$().ready(function () { })
1.2一对一概念：一个事件源，一个事件类型，一个事件处理函数
$('#box').on('click', function () {})
简写：$('#box').click(function(){})
1.3一对多概念：一个事件源，多个事件类型，一个事件处理函数
$('#box').on('click mouseout', function () {
         console.log(111);
      })
简写： $('#box').click(function () {
         console.log(111);
      }).mouseout(function () {
         console.log(222)
      })
$('#box').click(fn).mouseout(fn);
1.4多对一
概念：一个事件源，多个事件，多个处理函数
$('#box').on({
         'click': function () { console.log(111) },
         'mouseover': function () { console.log(222) }
      })
简写： $('#box').click(function () {
         console.log(111);
      }).mouseout(function () {
         console.log(222)
      })
1.5事件委派
$('ul').on('click', 'li', function (e) { })
1.6注销事件
绑定事件
$('#btn1').on('click', function () {
         $('#box').click(function () {
            console.log(111)
         }).mouseover(function () {
            console.log(222)
         })
      })
空间命名法
针对相同事件，需要多次注册。事件类型.别名
注销事件
$('#box').off();
$('#box').off('click');
$('#box').off('click.one');
1.7合成事件
$('').hover(参数1鼠标移入事件，参数2鼠标移出事件)
$('#box').hover(function () { console.log('mouseover') }, function () { console.log('mouseout') });
      $('#box').hover(function () { console.log('11111') });
1.8事件对象
console.log(event);
         console.log(event.target);
         console.log(event.type);
         console.log(this);
         console.log($(this));
         event.preventDefault();---阻止事件默认行为
   event.stopPropagation();---阻止事件冒泡
2.jq动画
2.1自定义动画
语法：jq对象.animate（parmas（需要执行的属性），sppend，easing，fn）
2.2内置动画
显示/隐藏$('#box').show();
$('#box').hide();
滑入/滑出$('#box').slideDown();
$('#box').slideUp();
淡入/淡出$('#box').fadeIn();
$('#box').fadeOut();
切换$('#box').slideToggle();
$('#box').fadeToggle();
2.3停止动画
jq对象.stop(参数1，参数2);---参数1：停止当前动画，是否结束后面的动画
参数2：停止当前动画，是否把当前动画直接拉到结束状态
3.尺寸
获取浏览器当先显示区域的宽高$(window).width()
$(window).height()
获取文档流的宽高$(document).width()
$(document).height()
content的宽高 jq对象.width()
jq对象.height()
content+padding宽高jq对象.innerWidth()
jq对象.innerHeight()
content+padding+border宽高outerWidth（）
outerHeight()
4.偏移jq对象.offset();
jq对象.offset().top;
jq对象.offset().left;
5.卷曲jq对象.scrollTop()
jq对象.scrollLeft()
二、今日问题
未遇到问题

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