1.事件的基本使用
jQuery事件方法语法
-
on() off()
-
bind() unbind()
-
快捷绑定click()等
在jQuery中，大多数DOM事件都有一个等效都jQuery方法
页面中指定一个点击事件：
$("p").click();下一步是定义触发事件的内容：
¥$("p").click(function(){
//动作触发后执行都代码！！
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-事件的基本使用.html</title>
</head>
<body>
<button>新增</button>
<button>修改</button>
<div>标题</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(function () {
// 第一个参数 事件类型 第二个参数(可选的) 要传递的参数 第三个参数 事件处理函数
/*
$('button').bind('click', '123', function (event) {
console.log('button点击');
console.log(event);
console.log(event.data);//123
})
*/
// 点击新增或者修改按钮，改变div内部的内容
$('button').bind('click', function (event) {
// 通过event.target(DOM节点，可以拿到内部的内容) 来判断当前是哪个按钮点击
// console.log(event.target);
// console.log(event.target.innerHTML);
if($(event.target).html() === '新增'){
$('div').html('新增学生信息')
}else{
$('div').html('修改学生信息')
}
})
// 解绑 unbind() 无参时 解除绑定的所有事件
// $('button').unbind()
// 解绑 unbind('click') 传递参数->事件类型
// $('button').unbind('click')
// 解绑 unbind() 解绑click对应的事件
function clickEvent() {
console.log('我是click事件');
}
$('button').click(clickEvent)
// 第一个参数 事件类型 第二个参数 事件名称
$('button').unbind('click', clickEvent)
})
</script>
</body>
</html>2.事件代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02-事件代理.html</title>
</head>
<body>
<button>点我啊</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
// 点击body
// 第一个参数 事件类型 第二个参数(可选) 将要代理谁 第三个参数(可选) 传递给事件内部的参数 第四个参数 事件处理程序
// $('body').on('click', function (event) {
// console.log(event);
// })
// button做代理
$('body').on('click','button', [1,2], function (event, a, b) {
console.log(event, a, b);
})
// 事件解绑 移除代理 使用off
// $('body').off('click', 'button')
// 模拟事件执行 trigger 第一个参数 事件类型 第二个参数 数组参数(传递给形参)
$('button').trigger('click', [1, 2])
</script>
</body>
</html>3.事件类型
常用**的jQuery事件快速绑定方法**
1.$(document).ready()
$(document).ready()方法允许我们在文档完全加载完后执行函数
2.click()
click()方法是当按钮点击事件被触发时会调用一个函数
3.dbclick()
当双击元素时，会发生dbclick事件
4.mouseenter()
当鼠标指针穿过元素时，会发生mouseenter事件
5.mouseleave()
当鼠标指针离开元素时，会发生mouseleave事件
6.mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件
7.mouseup()
当元素上松开鼠标按钮时，会发生mouseup事件
8.hover()
hover()方法用于模拟光标悬停事件
当鼠标移动到元素上时，会触发指定当第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定当第二个函数（mouseleave）
9.blur()
当元素失去焦点时，发生blur事件
10.keydown()
键盘事件：按键按下事件
11.keyup()
键盘事件：按键抬起事件
12.表单事件等等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-事件类型方法.html</title>
</head>
<body>
<p>一段文字</p>
<button>点我啊</button><br>
输入一些东西: <input type="text">
<form action="">
name:
<input type="text" value="zhangsan">
<span style="display: none;">请输入你的名字</span>
<br>
<input type="submit" value="提交">
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(function () {
//click() 鼠标单击事件
//当点击事件在某个<p>元素上触发时，隐藏当前当<p>元素
$("p").click(function(){
$(this).hide();
});
// dblclick() 鼠标双击事件
$('button').dblclick(function () {
alert('dblclick')
})
// mouseenter() 鼠标进入事件 不支持子元素
$('button').mouseenter(function () {
console.log('mouseenter：你的鼠标移到了button的元素上！');
$('button').css('background', 'red')
})
// mouseleave() 鼠标离开事件 不支持子元素
$('button').mouseleave(function () {
console.log('mouseleave:再见，你的鼠标离开了该button');
$('button').css('background', 'blue')
})
// mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时
$('button').mousedown(function () {
console.log('mousedown:鼠标在该按钮上按下');
})
// mouseup() 当元素上松开鼠标按钮时，会发生mouseup事件
$('button').mouseup(function () {
console.log('mouseup:鼠标在button上松开');
})
// hover() 鼠标悬停事件
$('button').hover(function () {
console.log('hover');
$(this).css("background-color","#cccccc");
})
//blur() 失去焦点
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
// 键盘事件
// keydown 按键按下事件
$('input').keydown(function () {
$('input').css('background', 'blue')
})
// keyup 按键抬起事件
$('input').keyup(function () {
$('input').css('background', 'yellow')
})
// submit()
$('form').submit(function () {
alert('submit')
return false;
})
// focus
$('input:text').focus(function () {
// 动画
$('span').css('display','inline').fadeOut(3000)
})
})
</script>
</body>
</html>提供几个可供学习JQuery的网站
在线使用：jquery (v3.6.0) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
官网下载：jQuery
中文文档：jQuery API 中文文档 | jQuery 中文网jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm
