（4）jQuery——————jQuery的快速复习之旅（二）

古城微笑少年丶 2023-03-13 06:05 2阅读 0赞

1，事件模块

*  1.1，绑定事件
 *  1.2， 事件解绑
 *  1.3， 事件的坐标
 *  1.4， 事件相关处理

2，mouseover 与 mouseenter 区别？

3，事件委托

4，动画效果

*  4.1，淡入淡出
 *  4.2， 滑动动画
 *  4.3， 显示隐藏

5，window.onload 与 $(document).ready()的区别

6，jQuery插件

*  6.1，自定义jQuery插件
 *  6.2， jQuery UI
 *  6.3， laydate日期控件

#### 事件模块 ####

1， 绑定事件

*  eventName(function()\{\})：绑定对应事件名的监听

$('#div').click(function(){ });

*  on(eventName, funcion()\{\})：通用的绑定事件监听

$('#div').on('click', function(){ }

*  优缺点：  
    eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持  
    on: 编码不方便, 可以添加多个监听, 且更通用

2， 事件解绑

*  off(eventName)

//点击btn1解除.inner上的所有事件监听
      $('#btn1').click(function () { 
        $('.inner').off()
      })

3， 事件的坐标

*  event.clientX, event.clientY 相对于视口的左上角
 *  event.pageX, event.pageY 相对于页面的左上角
 *  event.offsetX, event.offsetY 相对于事件元素左上角

//5. 点击btn2得到事件坐标
      $('#btn2').click(function (event) {  // event事件对象
        console.log(event.offsetX, event.offsetY) // 原点为事件元素的左上角
        console.log(event.clientX, event.clientY) // 原点为窗口的左上角
        console.log(event.pageX, event.pageY) // 原点为页面的左上角
      })

4， 事件相关处理

*  停止事件冒泡 : event.stopPropagation()，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。
 *  什么是冒泡事件？  
    如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素

<div  onclick='alert("div");'>
    <ul onclick='alert("ul");'>
    <li onclick='alert("li");' class='inner'>test</li>
    </ul>
      
        //点击.inner区域, 外部点击监听不响应
      $('.inner').click(function (event) { 
        console.log('click inner')
        //停止事件冒泡
        event.stopPropagation()
      })

*  阻止事件默认行为 : event.preventDefault()

//点击链接, 如果当前时间是偶数不跳转
      $('#test').click(function (event) { 
        if(Date.now()%2===0) { 
          event.preventDefault()
        }
      })

#### mouseover 与 mouseenter 区别？ ####

*  mouseover： 在移入子元素时也会触发, 对应mouseout
 *  mouseenter： 只在移入当前元素时才触发, 对应mouseleave
 *  hover()使用的就是mouseenter()和mouseleave()

$('.div1')
    	.mouseover(function () { 
    		console.log('mouseover 进入')
    	})
    	.mouseout(function () { 
    		console.log('mouseout 离开')
    	})
    
    $('.div3')
    	.mouseenter(function () { 
    		console.log('mouseenter 进入')
    	})
    	.mouseleave(function () { 
    		console.log('mouseleave 离开')
    	})

*  区别on(‘eventName’, fun)与eventName(fun)
    
     *  on(‘eventName’, fun)：通用，但编码麻烦
     *  eventName(fun)： 编码简单， 但有的事件没有对应的方法

#### 事件委托 ####

*  理解：将子元素的事件委托给父辈元素处理；事件监听绑定在父元素上， 但事件发生在子元素上；事件会冒泡到父元素但最终调用的事件回调函数的是子元素：event.target
 *  好处  
    新增的元素没有事件监听  
    减少监听的数量(n==>1)
 *  设置事件委托： `$(parentSelector).delegate(childrenSelector, eventName, callback)`
 *  移除事件委托： `$(parentSelector).undelegate(eventName)`

<ul>
      <li>Tommey周</li>
      <li>Tommey</li>
    </ul>
    <li>Tommey01</li>
    <br>
    <button id="btn1">添加新的li</button>
    <button id="btn2">删除ul上的事件委托的监听器</button>
    
      // 设置事件委托
      $('ul').delegate('li', 'click', function () { 
        // console.log(this)
        this.style.background = 'red'
      })
    
      $('#btn1').click(function () { 
        $('ul').append('<li>新增的li</li>')
      })
    
      $('#btn2').click(function () { 
        // 移除事件委托
        $('ul').undelegate('click')
      })

#### 动画效果 ####

1， 淡入淡出

*  在一定的时间内, 不断改变元素样式
 *   fadeOut()：带动画隐藏
 *  fadeIn()：带动画的显示
 *  fadeToggle()：带动画切换显示/隐藏

* { 
        margin: 0px;
      }
    
      .div1 { 
        position: absolute;
        width: 200px;
        height: 200px;
        top: 50px;
        left: 10px;
        background: red;
      }
    </style>
    
    <body>
    <button id="btn1">慢慢淡出</button>
    <button id="btn2">慢慢淡入</button>
    <button id="btn3">淡出/淡入切换</button>
    <div class="div1"></div>
    
    
     var $div1 = $('.div1')
    
      $('#btn1').click(function () { 
        $div1.fadeOut(1000, function () { 
          alert('动画完成了!!!')
        })
      })
    
      $('#btn2').click(function () { 
        $div1.fadeIn()
      })
    
      $('#btn3').click(function () { 
        $div1.fadeToggle()
      })

2， 滑动动画

*  不断改变元素的高度实现
 *  slideDown()：带动画的展开
 *  slideUp()： 带动画的收缩
 *  slideToggle()： 带动画的切换展开/收缩

* { 
        margin: 0px;
      }
    
      .div1 { 
        position: absolute;
        width: 200px;
        height: 200px;
        top: 50px;
        left: 10px;
        background: red;
      }
    </style>
    <body>
    <button id="btn1">慢慢收缩</button>
    <button id="btn2">慢慢展开</button>
    <button id="btn3">收缩/展开切换</button>
    
    <div class="div1"></div>
    
    
      var $div1 = $('.div1')
    
      // 1. 点击btn1, 向上滑动
      $('#btn1').click(function () { 
        $div1.slideUp(3000)
      })
      // 2. 点击btn2, 向下滑动
      $('#btn2').click(function () { 
        $div1.slideDown()
      })
      // 3. 点击btn3, 向上/向下切换
      $('#btn3').click(function () { 
        $div1.slideToggle()
      })

3， 显示隐藏

*  默认没有动画, 动画（opacity / height / width）
 *  show()：(不)带动画的显示
 *  hide()：(不)带动画的隐藏
 *  toggle()： (不)带动画的切换显示/隐藏

4， 自定义动画

*  jQuery动画本质 ： 在指定时间内不断改变元素样式值来实现的
 *  animate(): 自定义动画效果的动画
 *  stop(): 停止动画
 *  宽先扩为200px, 高后扩为200px

$div1
      .animate({ 
        width: 200
      }, 1000)
      .animate({ 
        height: 200
      }, 1000)

*  动画展开案例：  
    ![在这里插入图片描述][20200513080408726.png]

*  问题：如果有2个库都有$，就存在冲突
 *  解决：jQuery库可以释放 $ 的使用权，让另一个库可以正常使用， 此时jQuery库只能使用jQuery了
 *  API：`jQuery.noConflict()` \--> 释放$的使用权

#### window.onload 与 $(document).ready()的区别 ####

*  window.onload
    
     *  包括页面的图片加载完后才会回调(晚)
     *  只能有一个监听回调
 *  $(document).ready() 
    
     *  等同于: $(function()\{\})
     *  页面加载完就回调(早)
     *  可以有多个监听回调

#### jQuery插件 ####

1， 自定义jQuery插件

*  自定义jQuery插件实现全选，全不选和反选

//jQuery-plugin.js
    
    (function () { 
    
      // 扩展$的方法
      $.extend({ 
        min: function (a, b) { 
          return a < b ? a : b
        },
        max: function (a, b) { 
          return a > b ? a : b
        },
        leftTrim: function (str) { 
          return str.replace(/^\s+/, '')
        },
        rightTrim: function (str) { 
          return str.replace(/\s+$/, '')
        }
      })
    
      // 扩展jQuery对象的方法
      $.fn.extend({ 
        checkAll: function () { 
          this.prop('checked', true) // this是jQuery对象
        },
        unCheckAll: function () { 
          this.prop('checked', false)
        },
        reverseCheck: function () { 
          // this是jQuery对象
          this.each(function () { 
            // this是dom元素
            this.checked = !this.checked
          })
        }
      })
    
    })()

<input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <br/>
    <input type="button" id="checkedAllBtn" value="全　选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="reverseCheckedBtn" value="反选"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
    <script type="text/javascript" src="js/jQuery-plugin.js"></script>
    <script type="text/javascript">
      var $items = $(':checkbox[name=items]')
      $('#checkedAllBtn').click(function () { 
        $items.checkAll()
      })
      $('#checkedNoBtn').click(function () { 
        $items.unCheckAll()
      })
      $('#reverseCheckedBtn').click(function () { 
        $items.reverseCheck()
      })
    </script>

2， jQuery UI

*  [jQuery的demo和下载，点击此处][jQuery_demo]

3， laydate日期控件

*  [点击此处下载laydate日期控件和demo][laydate_demo]

--------------------

[下一章，（5）XML与XML解析的使用][5_XML_XML]

[20200513080408726.png]: /images/20230312/7b6c9b5fdfec46eab7b441bc13fd5254.png
[jQuery_demo]: https://jqueryui.com/show/
[laydate_demo]: https://www.layui.com/laydate/
[5_XML_XML]: https://blog.csdn.net/qq_41530004/article/details/106156209#3.3