陈紫怡-20221122-jQuery-3

一、今日学习内容：

• jq事件注册
  
  • jq文档加载事件
    
    • $(function(){   })
      
    • $(document).ready(function(){    })
      
    • 原生文档加载事件
      
      • window.onload=function() {  }
        
      • window.addEventListener('load',function(){   })
        
    • jq文档加载事件：让网页中htmlDOM加载完成后，就可以执行js代码
      
      • $(document).ready(function(){  })
        
      • $(function(){   })
        
      • $().ready(function( ){  })
        
    • 面试题：原生加载事件与jq加载事件的区别
      
      • 原生的不可以简写，jq可以
        
      • 原生的onload一个网页中只能使用一次，jq可以多次使用
        
  • jq普通事件绑定
    
    • 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动画
  
  • 内置动画
    
    • 显示、隐藏（show、hide）
      
      • 从左上角显示、隐藏到左上角
        
    • 滑入、滑出（slideDown、slideUp）
      
      • 从上到下显示、从下到上隐藏
        
    • 淡入、淡出（fadeIn、fadeOut）
      
      • 修改透明度，直至完全透明，display：none；
        
  • 自定义动画
    
    • 语法
      
      • jq对象.animate( parmas , speed , easing , fn )
        
        • paemas：是一个对象，需要执行动画的属性，不是所有属性都可以实现动画效果
          
        • speed：动画时长----毫秒
          
        • easing：动画类型----linear
          
        • fn：回调函数
          
  • 停止动画
    
    • jq对象.stop(参数1，参数2)
      
      • 参数1：停止当前动画，是否结束后面的动画
        
      • 参数2：停止当前动画，是否把当前动画直接拉到结束状态
        
  • jq中的尺寸、位置、卷曲
    
    • 尺寸
      
      • 获取浏览器窗口显示区域的宽高
        
        • $(window).width()
          
      • 文档流的宽高
        
        • $(document).width()
          
      • 节点内部滚动条的宽高
        
        • content
          
        • $('选择器').width()
          
        • 
          
        • content+padding
          
        • $('选择器').innerWidth()
          
        • 
          
        • content+padding+border
          
        • $('选择器').outWidth()
          
    • 位置
      
      • 偏移
        
        • offset():偏移，返回值是一个对象，相当于文档流
          
        • top:距离浏览器顶部的距离----搜索栏、书签栏下面开始算起
          
        • left：与浏览器左边的距离
          
    • 卷曲
      
      • 卷曲
        
      • 整个document
        
        • 原生
          
          • document.addEventListener('scroll', function () {
            
          •              console.log($(this).scrollTop());
            
          • });
            
        • jq
          
          • $(document).scroll(function () {
            
          •             console.log($(this).scrollTop());
            
        • })
          
        • 节点
          
          • $('选择器'）.srcoll(function( ) {
            
          •          console.log($(this).scrollTop());
            
          • })