文章目录
jQuery 事件
- jquery中的事件是将事件名作为方法名，传入回调函数即可。
$("div").click(function(){
});
$("div").mouseover(function(){
});
加载事件
- 在原生js中的页面加载事件是window.onload
推荐使用jquery的页面加载事件，jquery的页面加载要比js原生的写法效率高，因为js元素的页面加载事件需要等到页面中的所有资源加载完毕才执行，而jquery的页面加载事件只需要等到页面的标签加载完毕就执行，而不会等待外部文件加载。
- 在jquery中有两种写法：
$(function(){
});
$(document).ready(function(){
});
元素事件
on方法
- 用于绑定事件、委托事件、传入参数
- 语法：
$(元素).on(事件类型,[委托的子元素],[传入的参数],处理的函数);
// 给 button 按钮绑定一个点击事件
$('button').on('click', function () {
console.log('我被点击了')
})
// 给 button 按钮绑定一个点击事件，并且携带参数
$('button').on('click', {
name: 'Jack' }, function (e) {
console.log(e) // 所有的内容都再事件对象里面
console.log(e.data) // { name: 'Jack' }
})
// 事件委托的方式给 button 绑定点击事件
$('div').on('click', 'button', function () {
console.log(this) // button 按钮
})
// 事件委托的方式给 button 绑定点击事件并携带参数
$('div').on('click', 'button', {
name: 'Jack' }, function (e) {
console.log(this) // button 按钮
console.log(e.data)
})
off方法
- 用于解绑事件
- 语法：
$(元素).off(事件类型,处理函数)
// 给 button 按钮绑定一个 点击事件，执行 handler 函数
$('button').on('click', handler)
// 移除事件使用 off
$('button').off('click', handler)
trigger方法
- 用于手动触发事件：
- 语法：
$(元素).trigger(事件类型,处理函数)
// 当代码执行到这里的时候，会自动触发一下 button 的 click 事件
$('button').trigger('click')
one方法
- 只能触发一次的事件：
- 语法：
$(元素).one(事件类型,处理函数);
// 这个事件绑定再 button 按钮身上
// 当执行过一次以后就不会再执行了
$('button').one('click', handler)
常用事件
click事件
- 鼠标点击所触发的事件
- 语法：
$("元素").click(处理函数)
// 直接给 div 绑定一个点击事件
$('div').click(function () {
console.log('我被点击了')
})
// 给 div 绑定一个点击事件并传递参数
$('div').click({
name: 'Jack' }, function (e) {
console.log(e.data)
})
dbclick事件
- 鼠标双击所触发的事件
- 语法：
$("元素").dbclick(处理函数)
// 直接给 div 绑定一个双击事件
$('div').dblclick(function () {
console.log('我被点击了')
})
// 给 div 绑定一个双击事件并传递参数
$('div').dblclick({
name: 'Jack' }, function (e) {
console.log(e.data)
})
scroll事件
- 页面滚动所触发的事件
- 语法：
$("元素").scroll(处理函数)
// 直接给 div 绑定一个滚动事件
$('div').scroll(function () {
console.log('我被点击了')
})
// 给 div 绑定一个滚动事件并传递参数
$('div').scroll({
name: 'Jack' }, function (e) {
console.log(e.data)
})
hover事件
- 鼠标放上去和鼠标离开所触发的事件
- 语法：
$("元素").hover(鼠标放上去的处理函数,鼠标离开的处理函数)
// 这个事件要包含两个事件处理函数
// 一个是移入的时候，一个是移出的时候触发
$('div').hover(function () {
console.log('我会再移入的时候触发')
}, function () {
console.log('我会在移出的时候触发')
})
jQuery 动画
基本动画
1. 显示（show）
- 语法：
元素.show(); - 让元素从隐藏状态变为显示状态（从display:none;变为 display:block;）
- 可选参数1：时间，毫秒数 == 让元素在规定的时间内显示（操作的属性有很多）
- 可选参数2：速度方式，匀速或加速或减速
- 可选参数3：动画结束后执行的回调函数
// 给 div 绑定一个显示的动画
$('div').show() // 如果元素本身是 display none 的状态可以显示出来
// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数')
$('div').show(1000, 'linear', function () {
console.log('我显示完毕')
})
2. 隐藏（hide）
- 语法：
元素.hide(); - 让元素从显示状态切换到隐藏状态
- 可选参数和show一样
// 给 div 绑定一个隐藏的动画
$('div').hide() // 如果元素本身是 display block 的状态可以隐藏起来
// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数')
$('div').hide(1000, 'linear', function () {
console.log('我隐藏完毕')
})
3. 切换显示隐藏（toggle）
- 语法：
元素.toggle(); - 让元素在隐藏和显示状态切换
- 可选参数和show一样
// 给 div 绑定一个切换的动画
$('div').hide() // 元素本身是显示，那么就隐藏，本身是隐藏那么就显示
// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数')
$('div').toggle(1000, 'linear', function () {
console.log('动画执行完毕')
})
4. 元素上下拉到隐藏显示
- 语法：
元素.slideDown() // 让元素向下拉动显示
元素.slideUp() // 让元素向上拉动隐藏
元素.slideToggle() // 让元素切换上下拉动显示隐藏
参数和show一样
5. 元素透明度显示隐藏
- 语法：
元素.fadeIn() // 让元素从透明度0变为1的显示
元素.fadeOut() // 让元素从透明度1变为0的隐藏
元素.slideToggle() // 让元素切换透明度显示隐藏
参数和show一样
6. 让元素切换到指定的透明度
- 语法：
元素.fadeTo(毫秒数,透明度,速度方式,结束的回调函数) // 让元素在指定的时间内切换到指定的透明度
自定义动画
开启动画
元素.animate({
css属性名:属性值,
css属性名:属性值,
。。。
}[,毫秒数][,速度方式][,执行结束的回调函数]);
// 定义一个自定义动画
$('.show').click(function () {
$('div').animate({
width: 500,
height: 300
}, 1000, 'linear', function () {
console.log('动画运动完毕')
})
})
停止动画
元素.stop(); // 将动画停止在当前状态
元素.finish(); // 将动画停止在结束状态
// 立刻定制动画
$('div').stop() // 就停止再当前状态
// 立刻结束动画
$('div').finish() // 停止在动画结束状态
动画的链式操作
通常在一个动画中的所有css属性是同时进行的，想要将所有动画按顺序执行的话，可以将多个动画嵌套在动画结束的回调函数中，但是这样容易造成回调地狱，所以jquery提供了一个动画的链式操作，让所有动画组成一个队列，按顺序执行，例：
<style>
div{
width: 100px;
height:100px;
background-color: red;
position:absolute;
}
</style>
<body>
<button class="start">按钮</button>
<div></div>
</body>
<script src="./js/jquery.js"></script>
<script type="text/javascript">
$(".start").click(function(){
$("div").animate({
left:"300px"
}).animate({
top:"300px"
}).animate({
width:"300px"
}).animate({
height:"50px"
})
});
</script>