JQuery事件的基本使用

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