jQuery:
常用事件：
change:改变事件
focus:光标聚焦事件
//focus事件焦点事件 $('#i1').on('focus',function () { console.log('123'); });
blur:光标移除事件
//blur鼠标离开事件 $('#i1').on('blur',function () { var value = $(this).val(); console.log(value); });
hover光标悬浮事件：
input值发生改变的时候触动input事件
//当input值发生改变的时候 $('#i1').on('input',function () { console.log($(this).val()); });
$('').hover(function(){
//执行的事件
});
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>hover事件示例</title> 6 <style> 7 body { 8 margin: 0; 9 } 10 11 .nav { 12 height: 40px; 13 background-color: #3d3d3d; 14 width: 100%; 15 } 16 17 ul { 18 list-style-type: none; 19 padding: 0; 20 margin: 0; 21 } 22 23 a { 24 text-decoration: none; 25 } 26 27 .nav a { 28 color: #999; 29 } 30 31 .nav a:hover { 32 color: white; 33 } 34 35 .nav li { 36 float: left; 37 height: 40px; 38 line-height: 40px; 39 margin-right: 15px; 40 padding: 0 10px; 41 } 42 43 .nav li:hover { 44 background-color: black; 45 } 46 47 .father { 48 position: relative; 49 } 50 51 .son { 52 height: 100px; 53 width: 200px; 54 background-color: blue; 55 color: white; 56 position: absolute; 57 left: 0; 58 top: 40px; 59 margin: 0; 60 display: none; 61 } 62 63 .show { 64 display: block; 65 } 66 </style> 67 </head> 68 <body> 69 70 <div class="nav"> 71 <ul> 72 <li><a href="">登录</a></li> 73 <li><a href="">注册</a></li> 74 <li class="father"><a href="">购物车</a> 75 <p class="son">空空如也~</p> 76 </li> 77 </ul> 78 </div> 79 80 81 <script src="jquery-3.3.1.min.js"></script> 82 <script> 83 $('.father').hover(function () { 84 $(this).find('.son').addClass('show'); 85 } 86 , 87 function () { 88 $(this).find('.son').removeClass('show'); 89 } 90 ); 91 92 93 </script> 94 </body> 95 </html>
on绑定事件:
$('').on('绑定的事件',function(){});
批量操作：
1.$(window).on(); 绑定窗口事件
2.keyDown； 键盘按定事件
3.keyUp; 键盘抬起事件
4.fuction(e){} e.keyCode 获取按定事件值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>批量操作</title> 6 </head> 7 <body> 8 <table border="1"> 9 <thead> 10 <tr> 11 <th>#</th> 12 <th>姓名</th> 13 <th>操作</th> 14 </tr> 15 </thead> 16 <tbody> 17 <tr> 18 <td><input type="checkbox"></td> 19 <td>Egon</td> 20 <td> 21 <select> 22 <option value="1">上线</option> 23 <option value="2">下线</option> 24 <option value="3">停职</option> 25 </select> 26 </td> 27 </tr> 28 <tr> 29 <td><input type="checkbox"></td> 30 <td>Alex</td> 31 <td> 32 <select> 33 <option value="1">上线</option> 34 <option value="2">下线</option> 35 <option value="3">停职</option> 36 </select> 37 </td> 38 </tr> 39 <tr> 40 <td><input type="checkbox"></td> 41 <td>Yuan</td> 42 <td> 43 <select> 44 <option value="1">上线</option> 45 <option value="2">下线</option> 46 <option value="3">停职</option> 47 </select> 48 </td> 49 </tr> 50 <tr> 51 <td><input type="checkbox"></td> 52 <td>EvaJ</td> 53 <td> 54 <select> 55 <option value="1">上线</option> 56 <option value="2">下线</option> 57 <option value="3">停职</option> 58 </select> 59 </td> 60 </tr> 61 <tr> 62 <td><input type="checkbox"></td> 63 <td>Gold</td> 64 <td> 65 <select> 66 <option value="1">上线</option> 67 <option value="2">下线</option> 68 <option value="3">停职</option> 69 </select> 70 </td> 71 </tr> 72 </tbody> 73 </table> 74 75 <input type="button" id="b1" value="全选"> 76 <input type="button" id="b2" value="取消"> 77 <input type="button" id="b3" value="反选"> 78 79 <script src="jquery-3.3.1.min.js"></script> 80 <script> 81 let flag = false; 82 //获取用户按下去的那个按钮 83 $(window).on('keydown',function (e) { 84 if (e.keyCode === 16){ 85 flag = true; 86 } 87 88 }); 89 90 91 //绑定一个shirt抬起来的事件 92 $(window).on("keyup",function (e) { 93 if (e.keyCode === 16){ 94 flag = false; 95 } 96 }); 97 98 //找到select标签，绑定change事件 99 $('select').on('change',function () { 100 //拿到当前的select标签的值 101 let v = $(this).val(); 102 //判断一下当前行是否被选中 103 let isCheck = $(this).parent().parent().find('input:checkbox').prop('checked'); 104 105 $(flag && isCheck){ 106 //使用each循环 107 let allCheck = $('input:checked'); 108 $(allCheck).each(function () { 109 $(this).parent().parent().find('select').val(v); 110 }) 111 112 } 113 114 }); 115 116 </script> 117 </body> 118 </html>
页面加载完毕方法：
$(document).ready(function(){}); //等待页面加载完毕后再执行；
jQuery的动画效果
hide('可填可不填，填的话表示隐藏的用时'); //往网页开始位置隐藏
show('可填可不填，填的话表示隐藏的用时'); //从网页开始位置开始展示
slideDown('可填可不填，填的话表示隐藏的用时'); //折叠隐藏
slideUp('可填可不填，填的话表示隐藏的用时'); //折叠展示
fadeIn(''可填可不填，填的话表示隐藏的用时''); //淡入
fadeOut('可填可不填，填的话表示隐藏的用时'); //淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> jQuery自带的动画效果</title>
</head>
<body>
<img width="600" height="400" src="http://img2.imgtn.bdimg.com/it/u=2849885429,2037070555&fm=27&gp=0.jpg" alt="" id="gf">
<script src="jquery-3.3.1.min.js"></script>
<script>
$('img').hide();
$('img').show();
$('img').fadeIn();
$('img').fadeOut();
$('img').fadeTo();
$('img').fadeToggle();
$('img').slideDown();
$('img').slideUp();
$('img').fadeTo();
</script>
</body>
</html>
$('循环的标签').each(function(){
});
//each循环 == for (var i=0;i<'循环的标签'.length;i++){
}
data(); //给所有元素添加数据，以key和value的形式；
$('div').data('num',100); //给div里面添加keynum value等于100;
$('div').remove(''num''); //把key给num的数据移除掉;
$('div').remove(); //不加参数就是移除所有的数据;