jQuery事件
一，常用事件：
点击事件：语法：click （function（）{}）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入cdn--> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <form action=""> <p><label for="i1">username: <input type="text" id="i1" name="username"> <span class="errors"></span> </label></p> <p><label for="i2">password: <input type="password" id="i2" name="password"> <span class="errors"></span> </label></p> <input type="submit" value="注册" id="d1"> </form> <script> // 获取按钮标签 var $b1Ele = $('#d1'); // 给按钮标签绑定点击事件 // 原生js b1ELe.onclick = function(){} $b1Ele.click(function () { // 获取到用户输入的内容 var $userName = $('#i1'); var $passWord = $('#i2'); // 判断上面标签的value是否为空 if ($userName.val().length == 0){ // 找到username对于的span标签添加提示信息 $('.errors').first().text('用户名不能为空') } // 判断上面标签的value是否为空 if ($passWord.val().length == 0){ // 找到username对于的span标签添加提示信息 $('.errors').last().text('密码不能为空') } // 阻止表单的提交 return false; }) </script> </body> </html>
悬浮事件：语法：hover（function（）{}）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>啊啊啊啊啊啊啊啊</p> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"> </script> <script> $('p').hover( // 鼠标移在标签上面时依次触发两个function function () { alert('come on') }, function () { alert('see you') } ) </script> </body> </html>
input事件：语法： $('').on('事件'，function(){})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>实时监听input输入值变化</title> </head> <body> <input type="text" id="i1"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> /* * oninput是HTML5的标准事件 * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化， * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发 * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代 * 使用jQuery库的话直接使用on同时绑定这两个事件即可。 * */ $("#i1").on("input propertychange", function () { // this指的是原生的JS对象，因此要使用jQuery的方法需要用$转换 alert($(this).val()); }) </script> </body> </html>
克隆事件：.clone()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> button { background-color: pink; } </style> </head> <body> <button>屠龙宝刀，点击就送！</button> <script> // 第一种绑定事件的方式 // $('button').click(function () { // $(this).clone(true).insertAfter(this); // }) // 第二种绑定事件的方式 $('button').on('click',function () { // this就是：button标签的原生JS对象 // clone（无参数）表示不克隆事件，clone（true）表示克隆事件 // insertAfter表示克隆的对象放在原对象之后 $(this).clone(true).insertAfter(this); }) </script> </body> </html>
阻止后续事件执行的两种方式：return false 和 e.preventDefault();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <body> <form action=""> <input id="b1" type="submit"> </form> <script> // 阻止submit按钮提交操作的两种方式 $("#b1").click(function (e) { alert(123); //return false; e.preventDefault(); }); </script> </body> </html>
事件冒泡：
本质：一个标签的事件被触发之后，系统会触发其父标签的相同事件。
解决方法:e.stopPropagation()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <body> <div> <p> <span>点我</span> </p> </div> <script> $("span").click(function (e) { alert("span"); e.stopPropagation(); }); $("p").click(function () { alert("p"); }); $("div").click(function () { alert("div"); }) </script> </body> </html>
事件委托：基于事件冒泡的原理，利用父标签去捕获子标签的事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <button>welcome!</button> <script> // $('button').click(function () { // alert(123) // }) // 事件委托：body将click事件委托给button $('body').on('click','button',function () { alert(123) }) </script> </body> </html>
ps：由于DOM加载需要时间，因此为了让每个标签都获得被绑定的事件，提供三种方式写入js代码：
第一种：
$(document).ready(function(){ // 在这里写你的JS代码... })
第二种：
$(function(){ // 你在这里写你的代码 })
第三种：在body标签的末尾写入script标签和js代码（主要的使用方式）
