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>

转载于:https://www.cnblogs.com/gyh412724/p/9635579.html

50 jQuery绑定事件阻止默认事件发生内置动画 each data相关推荐

关于jquery的取消阻止默认事件
最近帮朋友做个东西,整个屏幕有一个遮罩层,但是这个遮罩层能滑动,于是百度了一下,返现,用 $('body').bind("touchmove",function(e){ e.pre ...
echarts中重写图例点击事件,阻止默认事件
1.取消全部图例点击事件 *只需添加一个属性即可 legend: {selectedMode:false } 2.重写图例点击事件,示例为点哪个图例显示哪条折线 *获取点击图例对应图例数组中的ind ...
事件（阻止事件传播、阻止默认事件、事件源对象、事件委托）
阻止事件传播阻止事件传播e.stopPropagation() 谷歌浏览器阻止事件传播(冒泡阶段) var oBig = document.getElementById('big');var oS ...
简单解析JavaScript的默认事件及如何阻止默认事件
简单解析JavaScript的默认事件及如何阻止默认事件上篇文章就提到,在JavaScript中提到事件冒泡两个必不可少也要提的就是事件捕获和默认事件,现在来聊一聊什么是默认事件,及如何阻止默认事件 ...
React 阻止默认事件和阻止冒泡
给 a 标签添加一个事件阻止默认事件 e.preventDefault(); class view extends Component {onAtag(e) {// 阻止默认事件放置跳转e.pre ...
javascript, jQuery阻止默认事件和冒泡事件
事件冒泡(event bubbling) 事件冒泡是指一个元素上的事件被触发,然后这个事件按嵌套顺序在父级元素上触发,直至document根节点. 例如: <!DOCTYPE html> ...
JS标签中阻止默认事件的发生
若html标签中定义了两个事件(包含一个自定义函数),那么系统会先执行用户自定义的函数,然后执行标签默认函数.如果想要在执行完自定义函数之后阻止系统默认函数的执行,可以进行如下设置: 因为html标签 ...
jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
由href return false 来看阻止默认事件
很多时候我们都想阻止一个a ?link的href跳转. 1 <a onclick="return false;" href="www.360.cn"> ...

50 jQuery绑定事件阻止默认事件发生内置动画 each data

50 jQuery绑定事件阻止默认事件发生内置动画 each data相关推荐

最新文章

热门文章

50 jQuery绑定事件 阻止默认事件发生 内置动画 each data

50 jQuery绑定事件 阻止默认事件发生 内置动画 each data相关推荐

最新文章

热门文章

50 jQuery绑定事件阻止默认事件发生内置动画 each data

50 jQuery绑定事件阻止默认事件发生内置动画 each data相关推荐