jQuery 事件
事件
常用事件
chick鼠标点击的时候触发：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击事件</title> <style> #i1 { background-color: deeppink; padding: 5px; color: white; margin: 5px; } </style> </head> <body> <form action=""> <input type="button" id="i1" value="删除"> </form> <!--<button id="i1">屠龙宝刀，点击就送</button>--> <script src="jquery-3.3.1.min.js"></script> <script> $("#i1").on("click",function () { $(this).clone().insertAfter(this); }); </script> </body> </html>
hover鼠标放上去后触发的：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; } ul { list-style-type: none; padding: 0; margin: 0; } a { text-decoration: none; color: white; } .nav { width: 100%; height: 50px; background-color: #3d3d3d; } .nav li { float: left; height: 50px; line-height: 50px; } .nav li:hover{ background-color: black; } .nav a { margin: 15px; } #i1 { position: relative; } .content { width: 200px; height: 100px; background-color: blue; color: white; margin: 0; position: absolute; display: none; } .con { display: block; } </style> </head> <body> <div class="nav"> <div> <ul> <li><a href="">登录</a></li> <li><a href="">注册</a></li> <li id="i1"><a href="">购物车</a> <p class="content">空空如也</p> </li> </ul> </div> </div> <script src="jquery-3.3.1.min.js"></script> <script> $("#i1").hover(function () { $(this).find(".content").addClass("con") },function () { $(this).find(".content").removeClass("con") } ) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; } ul { list-style-type: none; padding: 0; margin: 0; } a { text-decoration: none; color: white; } .nav { width: 100%; height: 50px; background-color: #3d3d3d; } .nav li { float: left; height: 50px; line-height: 50px; } .nav li:hover{ background-color: black; } .nav a { margin: 15px; } #i1 { position: relative; } .content { width: 200px; height: 100px; background-color: blue; color: white; margin: 0; position: absolute; display: none; } .con { display: block; } </style> </head> <body> <div class="nav"> <div> <ul> <li><a href="">登录</a></li> <li><a href="">注册</a></li> <li id="i1"><a href="">购物车</a> <p class="content">空空如也</p> </li> </ul> </div> </div> <script src="jquery-3.3.1.min.js"></script> <script> $("#i1").hover(function () { $(this).find(".content").addClass("con") },function () { $(this).find(".content").removeClass("con") } ) </script> </body> </html>
focus获取焦点的时候触发的
blur是失去焦点的时候触发的
补充：input 是输入框内的内容 改变时触发的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input id="i1" type="text"> <script src="jquery-3.3.1.min.js"></script> <script> $x=$("#i1") // 当input框获取焦点时触发 $x.on("focus", function () { console.log(123); }); // 当input框失去焦点时触发 $x.on("blur", function () { console.log($(this).val()); }); // 当input框的值发生变化时触发 $x.on("input", function () { console.log($(this).val()); }) </script> </body> </html>
change值改变的时候触发的
keyup 哪个键位松开时触发的
keydown哪个键位按下的时候出发的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>批量操作</title> </head> <body> <body> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>Egon</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>Alex</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>Yuan</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>EvaJ</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>Gold</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> </tbody> </table> <input type="button" id="b1" value="全选"> <input type="button" id="b2" value="取消"> <input type="button" id="b3" value="反选"> <script src="jquery-3.3.1.min.js"></script> <script> var flag=false; //监控shift是否被按下 $(window).on("keydown",function (e) { // alert(e.keyCode) if (e.keyCode===16);{ flag=true } }); $(window).on("keyup",function (e) { if (e.keyCode===16);{ flag=false } }); $("select").on("change",function () { var v=$(this).val(); var z=$(this).parent().parent().find("input:checkbox").prop("checked"); if (flag && z) { var $x = $("input:checkbox"); for (var i = 0; i < $x.length; i++){ $($x[i]).parent().parent().find("select").val(v)} } }) </script> </body> </body> </html>
事件绑定
.on(事件 [, 选择器（可选的）],function（事件处理函数） () {})
移除事件
.off(事件 [, 选择器 （可选的）],function（事件处理函数）() {})
阻止后续事件执行
return false （常见阻止表单提交等）
注意：
像click，keydown等DOM中定义的事件，我们都可以使用‘.on()’方法来绑定事件，但是‘hover’这种jQuery中定义的事件就不能用‘.on()’方法来并绑定处理
补充：
事件绑定调用和直接点事件调用的区别，直接点调用的话 代码执行后再添加的元素 即使触发了事件 也不会生成事件的结果 而 事件绑定的话 代码执行后 新加的元素 依旧绑定着事件 可以得到触发事件的结果
