主要内容
1 阻止后续事件继续执行
return false: 常用于表单提交
event.preventDefault : 阻止默认事件发生
<body>
<form action=""><input type="text" id="t1"><input type="submit" class="s1" id="s2" value="提交">
</form>
<script>$('#s2').click(function (event) {//点击submit按钮, 先校验input框的内容为不为空,//为空就不提交alert('这是form表单的提交按钮');var value = $('#t1').val();//获取input框的值if(value.length===0){//为空就不提交//不执行后续的默认的提交事件//阻止默认事件发生// event.preventDefault();return false}})
</script>
</body>
</html>
2 . 按住shift批量操作 用到keydown, keyup,
<!DOCTYPE html> <html lang="zh-CN"> <head><meta http-equiv="content-Type" charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><title>Title</title><script src="jquery-3.3.1.min.js"></script> </head> <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><button id="b1">全选</button><button id="b2">反选</button><button id="b3">取消</button><script>//给b1绑定事件, 所有的checked设置为ture$('#b1').click(function () {$(':checkbox').prop('checked',true)});//给b2绑定事件, 反选$('#b2').click(function () {// var checkAll = $(':checkbox');// for(i=0;i<checkAll.length;i++){// // 找到他的每一项// //如果选中checked设置为false, 否则就设置为true// var tmp = checkAll[i];// var chec = $(tmp).prop('checked');// if(chec){// $(tmp).prop('checked',false)// }else{// $(tmp).prop('checked',true)// } //第一种方法// $(tmp).prop('checked',!chec)//第二种方法// }//第三种方法 找到所有选中的checkbox并把它赋值给一个变量// 找到所有没有选中的checkbox并把它赋值给另一个变量var check = $('input:checked');var uchec = $('input:not(:checked)');// 利用prop把选中的checkbox设置为不选中// 利用prop把不选中的checkbox设置为选中check.prop('checked',false);uchec.prop('checked',true);});//给b3绑定事件, 所有的checked设置为false$('#b3').click(function () {$(':checkbox').prop('checked',false)});var flag = false;// 全局事件，监听键盘shift按键是否被按下$(window).on("keydown", function (e) { // alert(e.keyCode);if (e.keyCode === 16){flag = true;}});// 全局事件,shift按键抬起时将全局变量置为false$(window).on("keyup", function (e) {if (e.keyCode === 16){flag = false;}});// select绑定change事件$("table select").on("change", function () {// 是否为批量操作模式if (flag) {var selectValue = $(this).val();// 找到所有被选中的那一行的select，选中指定值$("input:checked").parent().parent().find("select").val(selectValue);}})</script> </body> </html>
3 第2 个内容存在一个漏洞,按住shift所有的选中的批量操作, 如果按住shift的当前行没有选中, 但是当前行也被操作, 所以需要判断当前行是否被选中.
$("table select").on("change", function () {// 是否为批量操作模式//判断一下改行是否被选中var isChecked = $(this).parent().prev().prev().find(':checkbox').prop('checked');if (flag&&isChecked) {var selectValue = $(this).val();// 找到所有被选中的那一行的select，选中指定值$("input:checked").parent().parent().find("select").val(selectValue);}
4 . hover 购物车
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta http-equiv="content-Type" charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><title>购物车</title><script src="jquery-3.3.1.min.js"></script><style>body {margin:0;}.memu1{height:70px;width:100%;background-color: #616161;}.d {float:left;color: white;font-size: 20px;line-height: 70px;margin-left: 15px;position: relative;}.cont {height:70px;width: 140px;background-color: #ff4700;color: white;position:absolute;right: 0;display:none;}.hover>.cont { //加的样式类当刷新页面的时候并没有, 所以当鼠标一上去就加上样式类, 离开就删除.display: block;}</style>
</head>
<body><div class="memu1"><div class="d">登录</div><div class="d">注册</div><div class="d" id="dd">购物车<div class="cont">空空如也</div></div></div><script> // $('#dd').hover( //这种方法没有.hover>.cont这两行// function () {// //当鼠标点进去// $('.cont').css('display','block')// },// //当鼠标离开时// function () {// $('.cont').css('display','none')// }// )// $('#dd').hover(// function () {// $(this).addClass('hover')// },// function () {// $(this).removeClass('hover')// }// );$('.memu1').on('mouseenter','.d',function () {$(this).addClass('hover');});$('.memu1').on('mouseleave','.d',function () {$(this).removeClass('hover');});</script>
</body>
</html>
5 input实时获取值
<body>
<input type="text" class="t1">
<script>//是去焦点时获取的值// $('.t1').blur(function () {// var value = $(this).val();// console.log(value)// })// 实时获取值$('.t1').on('input',function () {var value = $(this).val();console.log(value)})
</script>
</body>
</html>
6 全选 反选取消 用each方法
1) 循环一个列表的三种方法:
li = [11,22,33,44];
for(i=0;i<li.length;i++){
console.log(li[i])}
第二种
li.forEach(function(k,v){
console.log(k,v)})
第三种 语法: $.each(要遍历的对象, function({.....}))
li = [11,22,33,44];
$.each(li,function(k,v){
console.log(k,v)})
跳出本次循环return
li = [11,22,33,44]; $.each(li,function(k,v){ if(v===33){return//跳出本次循环 }else{console.log(v) } })
跳出each循环return false
li = [11,22,33,44];
$.each(li,function(k,v){
if(v===33){return false//跳出本次循环
}else{console.log(v)
}
})
对于jQuery对象的操作 语法: $('').each(function(){ this是进入循环体的当前标签 })
<body> <div>111</div> <div>222</div> <div>333</div> <script>$('div').each(function(){console.log(this)}) </script> </body>
反选的例子
<script>// 反选$("#b2").click(function () {$(":checkbox").each(function () {var value = $(this).prop("checked");if (value) {$(this).prop("checked", false);} else {$(this).prop("checked", true);}});}); </script>
7 动画
<body>
<img src="http://img4.imgtn.bdimg.com/it/u=2907923370,3134497160&fm=26&gp=0.jpg" alt="">
<script>$('img').hide(4000);$('img').show(4000);
</script>
</body>
函数是如何使用呢？)
吗？？?)
