zoukankan html css js c++ java

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;
            100%;
            background-color: #616161;
        }
        .d {
            float:left;
            color: white;
            font-size: 20px;
            line-height: 70px;
            margin-left: 15px;
            position: relative;
        }
        .cont {
            height:70px;
             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>

查看全文

相关阅读:
应该选取表中哪些字段作为索引？
maven聚合（依赖聚合）
maven（1）
maven打包记录1
tomcat 日志（2）
tomcat日志（1）
存储过程
 EXISTS的用法介绍
 学习笔记-移动设备的处理器指令集 armv6 armv7 armv7s arm64
学习笔记-nil NULL NSNull Nil的区别

原文地址：https://www.cnblogs.com/gyh412724/p/9635579.html

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

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