一、jQuery绑定事件
方法：on()、 one()、 hover() 、常用事件函数
1. on() 方法绑定事件
1-1. 基础绑定事件
语法：元素集合.on('事件类型', 事件处理函数)
$('div').on('click', function () {
console.log('我是 div 的点击事件')
})
1-2. 事件委托绑定事件
语法： 元素集合.on('事件类型'，选择器，事件处理函数)
把事件绑定给div 元素，当你在 div 内的 p 元素触发事件的时候，执行事件处理函数
事件委托，把 p 元素的事件委托给了 div 元素来绑定
$('div').on('click', 'p', function () {
console.log('我是事件委托形式的事件')
})
1-3. 批量绑定事件
语法：元素集合.on({ 事件类型1：处理函数， 事件类型2：处理函数 })
注意：不能进行事件委托了
$('div').on({
click: function () { console.log('点击事件') },
mouseover: function () { console.log('鼠标移入事件') },
mouseout: function () { console.log('鼠标移出事件') }
})
2. one()绑定事件
用来绑定事件，和 on 方法绑定事件的方式是一样的
区别： one 方法绑定的事件，只能执行一次
2-1. 基础绑定事件
$('div').one('click', function () {
console.log('基础绑定事件')
})
2-2. 事件委托
$('div').one('click', 'p', function () {
console.log('事件委托绑定事件')
})
2-3. 批量绑定事件
$('div').one({
click: function () { console.log('点击事件')},
mouseover: function () { console.log('鼠标移入事件') },
mouseout: function () { console.log('鼠标移出事件') }
})
3. hover()
注意：jQuery 中的一个特殊的事件
语法：元素集合.hover(移入时触发的函数，移出时触发的函数)
当你只传递一个函数的时候，会在移入移出都触发
$('div').hover(
function () { console.log('函数1')},
function () { console.log('函数2')}
)
4. 常用事件函数
jQuery 把我们最常用到的一些事件，单独做成了事件函数，我们通过调用这些事件函数，来达到绑定事件的效果。
比如：click()、mouseover()、mouseout()、change()，...
$('div').click(function () { console.log('点击事件') })
二、jQuery 事件的解绑和触发
1. off() 事件解绑
1-1. 解绑全部事件处理函数
语法：元素集合.off(事件类型)
$('div').off('click') //会把 div 的 click 事件对应的所有事件处理函数全部移除
1-2. 解绑指定的时间处理函数
语法：元素集合.off(事件类型, 要解绑的事件处理函数)
$('div').off('click', h1) //会把 div 的click 事件对应的 h1 事件处理函数移除
2. trigger() 事件触发
使用代码的方式，来触发事件。
语法： 元素集合.trigger(事件类型)
setInterval(function () {
$('div').trigger('click') //表示每隔 1000ms 触发一次 div 的 click 事件
}, 1000)
三、jQuery 的基本动画函数
1. show()：表示显示
2. hide(): 表示隐藏
3. toggle(): 表示切换，即本身如果是显示的，就隐藏；本身使隐藏的，就显示。
对于以上三个运动函数，有共同的参数：第一个表示运动时间，第二个表示运动曲线，第三个表示运动结束的回调函数
<button>show</button>
<button>hide</button>
<button>toggle</button>
<div></div>
<script>
$('button:nth-child(1)').click(function () {
//执行 show 动画函数
$('div').show(1000, 'linear', function () { console.log('show 结束了')})
})
$('button:nth-child(2)').click(function () {
//执行 hide 动画函数
$('div').hide(1000, 'linear', function () { console.log('hide 结束了')})
})
$('button:nth-child(3)').click(function () {
//执行 toggle 动画函数
$('div').toggle(1000, 'linear', function () { console.log('toggle 结束了')})
})
</script>
四、 jQuery 的折叠动画函数
1. slideDown()：表示显示
2. slideUp(): 表示隐藏
3. slideToggle(): 表示切换，即本身如果是显示的，就隐藏；本身使隐藏的，就显示。
同理，他们也有有共同的参数。
<button>slideDown</button>
<button>slideUp</button>
<button>slideToggle</button>
<div></div>
<script>
$('button:nth-child(1)').click(function () {
//执行 show 动画函数
$('div').slideDown(1000, 'linear', function () { console.log('slideDown结束了')})
})
$('button:nth-child(2)').click(function () {
//执行 hide 动画函数
$('div').slideUp(1000, 'linear', function () { console.log('slideUp结束了')})
})
$('button:nth-child(3)').click(function () {
//执行 toggle 动画函数
$('div').slideToggle(1000, 'linear', function () { console.log('slideToggle结束了')})
})
</script>
五、jQuery 渐隐渐现动画函数
1. fadeIn()：表示显示
2. fadeOut(): 表示隐藏
3. fadeToggle(): 表示切换，即本身如果是显示的，就隐藏；本身使隐藏的，就显示。
同理，他们也有有共同的参数。
4. fadeTo(运动时间， 指定的透明度， 运动曲线， 运动结束的回调函数)
<button>fadeIn</button>
<button>fadeOut</button>
<button>fadeToggle</button>
<button>fadeTo</button>
<div></div>
<script>
$('button:nth-child(1)').click(function () {
//执行 show 动画函数
$('div').fadeIn(1000, 'linear', function () { console.log('fadeIn 结束了')})
})
$('button:nth-child(2)').click(function () {
//执行 hide 动画函数
$('div').fadeOut(1000, 'linear', function () { console.log('fadeOut 结束了')})
})
$('button:nth-child(3)').click(function () {
//执行 toggle 动画函数
$('div').fadeToggle(1000, 'linear', function () { console.log('fadeToggle 结束了')})
})
$('button:nth-child(4)').click(function () {
//执行 toggle 动画函数
$('div').fadeTo(1000, 0.68, 'linear', function () { console.log('运动到指定的透明度')})
})
</script>
六、jQuery 的综合动画函数
animate()：第一个参数：要运动的样式，以一个对象数据类型传递；
第二个参数：运动时间； 第三个参数：运动曲线； 第四个参数：运动结束的回调函数
注意：关于颜色 相关的样式是不能运动的；关于 transform 相关的样式是不能运动到的
<button>开始 动画</button>
<div></div>
<script>
$('button').click( function() {
$('div').animate({
width: 400,
height: 400,
'background-color': 'pink', //不能实现
transform: 'rotate(45deg)', //不能实现
left: 200,
top: 200,
'border-radius': '20%'
}, 1000, 'linear', function(){ console.log('运动结束了')} )
})
</script>
七、jquery 结束动画函数
需要用到运动结束的函数。
1. stop()
当任何一个元素，执行了 stop 方法以后，会立即结束当前的所有运动，目前运动到什么位置，就停留在什么位置。一般对于结束动画的时候，都是在运动开始之前。
可以利用结束动画书写动画函数，每一次触发的时候，都会把之前的动画停止下来，只执行本次最新的动画。
<button>开始动画</button>
<button>stop</button>
<button>finish</button>
<div></div>
<script>
$('button:nth-child(1)').click(function () {
//开始动画
//使用一个简单的toggle 动画
// $('div').toggle(2000)
//利用结束动画书写动画函数
$('div').stop().toggle(2000)
})
$('button:nth-child(2)').click(function () {
//停止动画
$('div').stop()
})
</script>
2. finish()
当任何一个元素，执行了finish 方法以后，会立即结束当前的所有运动，直接去到动画的结束位置。
<button>开始动画</button>
<button>finish</button>
<div></div>
<script>
$('button:nth-child(1)').click(function () {
//开始动画
//使用一个简单的toggle 动画
// $('div').toggle(2000)
//利用结束动画书写动画函数
$('div').finish().toggle(2000)
})
$('button:nth-child(3)').click(function () {
//停止动画
$('div').finish()
})
</script>
八、jQuery 的 Ajax 请求
因为发送 ajax 请求，不是操作 DOM ，不需要依赖选择器去获取到元素，他的使用，是直接依赖 jQuery 或者 $ 变量来使用。
语法：$.ajax({本次发送的 ajax 的配置项 })
配置项：1.url：必填，表示请求地址；
2. method：选填，默认是 GET ，表示请求方式；
3. data：选填，默认是 ' '，表示携带给后端的参数；
4. async：选填，默认是 true，表示是否异步；
5. success：选填，表示请求成功的回调函数；
6. error： 选填，表示请求失败的回调函数。
<script>
$.ajax({
url: 'http://localhost:8080/test',
method: 'POST',
async: false,
data: {name: 'xiaozhang', age: 18},
success: function (res) {
//res 接受的就是后端给回的响应结果
console.log(res)
}
})
</script>
查看更多关于jquery中绑定事件 jquery绑定函数的详细内容...