（4）jQuery——————jQuery的快速复习之旅（二）-蒲公英云

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就是阻止目标元素的事件冒泡到父级元素
- test
```
//点击.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)
- Tommey周
- Tommey
Tommey01

// 设置事件委托
$(‘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;
  }

 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;
  }

  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)
动画展开案例：
问题：如果有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
  })
}