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
