50 jQuery绑定事件 阻止默认事件发生 内置动画 each data
主要内容
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>
