jQuery 事件

时间 2019-12-04

标签 jquery 事件栏目 JQuery 繁體版

原文原文链接

事件html

经常使用事件jquery

chick鼠标点击的时候触发：函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击事件</title>
    <style>
          #i1 {
              background-color: deeppink;
              padding: 5px;
              color: white;
              margin: 5px;
            }
    </style>
</head>
<body>
    <form action="">
        <input type="button" id="i1" value="删除">
    </form>
    <!--<button id="i1">屠龙宝刀，点击就送</button>-->
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#i1").on("click",function () {
        $(this).clone().insertAfter(this);
    });
</script>
</body>
</html>

hover鼠标放上去后触发的：this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
            color: white;
        }
        .nav {
            width: 100%;
            height: 50px;
            background-color: #3d3d3d;
        }
        .nav li {
            float: left;
            height: 50px;
            line-height: 50px;
         }
        .nav li:hover{
            background-color: black;
        }
        .nav a {
            margin: 15px;
        }
        #i1 {
            position: relative;
        }
        .content {
            width: 200px;
            height: 100px;
            background-color: blue;
            color: white;
            margin: 0;
            position: absolute;
            display: none;
        }
        .con {
            display: block;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div>
            <ul>
                <li><a href="">登陆</a></li>
                <li><a href="">注册</a></li>
                <li id="i1"><a href="">购物车</a>
                    <p class="content">空空如也</p>
                </li>
            </ul>
        </div>
    </div>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $("#i1").hover(function () {
            $(this).find(".content").addClass("con")
        },function () {
            $(this).find(".content").removeClass("con")

                }
        )

    </script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
            color: white;
        }
        .nav {
            width: 100%;
            height: 50px;
            background-color: #3d3d3d;
        }
        .nav li {
            float: left;
            height: 50px;
            line-height: 50px;
         }
        .nav li:hover{
            background-color: black;
        }
        .nav a {
            margin: 15px;
        }
        #i1 {
            position: relative;
        }
        .content {
            width: 200px;
            height: 100px;
            background-color: blue;
            color: white;
            margin: 0;
            position: absolute;
            display: none;
        }
        .con {
            display: block;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div>
            <ul>
                <li><a href="">登陆</a></li>
                <li><a href="">注册</a></li>
                <li id="i1"><a href="">购物车</a>
                    <p class="content">空空如也</p>
                </li>
            </ul>
        </div>
    </div>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $("#i1").hover(function () {
            $(this).find(".content").addClass("con")
        },function () {
            $(this).find(".content").removeClass("con")

                }
        )

    </script>
</body>
</html>

focus获取焦点的时候触发的spa

blur是失去焦点的时候触发的3d

补充：input 是输入框内的内容改变时触发的code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input id="i1" type="text">

<script src="jquery-3.3.1.min.js"></script>
<script>
    $x=$("#i1")
    // 当input框获取焦点时触发
    $x.on("focus", function () {
        console.log(123);
    });
    // 当input框失去焦点时触发
    $x.on("blur", function () {
        console.log($(this).val());
    });
    // 当input框的值发生变化时触发
    $x.on("input", function () {
        console.log($(this).val());
    })
</script>

</body>
</html>

change值改变的时候触发的orm

keyup 哪一个键位松开时触发的htm

keydown哪一个键位按下的时候出发的blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>批量操做</title>
</head>
<body>
    <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>

<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选">

<script src="jquery-3.3.1.min.js"></script>

<script>
    var flag=false;
    //监控shift是否被按下
    $(window).on("keydown",function (e) {
//        alert(e.keyCode)
        if (e.keyCode===16);{
            flag=true
        }
    });
    $(window).on("keyup",function (e) {
        if (e.keyCode===16);{
            flag=false
        }
    });
    $("select").on("change",function () {
        var v=$(this).val();
        var z=$(this).parent().parent().find("input:checkbox").prop("checked");
        if (flag && z) {
            var $x = $("input:checkbox");
            for (var i = 0; i < $x.length; i++){
            $($x[i]).parent().parent().find("select").val(v)}
        }
    })
</script>


</body>
</body>
</html>

事件绑定

　　.on(事件 [, 选择器（可选的）],function（事件处理函数） () {})

移除事件

　　.off(事件 [, 选择器（可选的）],function（事件处理函数）() {})

阻止后续事件执行

　　return false （常见阻止表单提交等）

注意：

　　像click，keydown等DOM中定义的事件，咱们均可以使用‘.on()’方法来绑定事件，可是‘hover’这种jQuery中定义的事件就不能用‘.on()’方法来并绑定处理

补充：

　　事件绑定调用和直接点事件调用的区别，直接点调用的话代码执行后再添加的元素即便触发了事件也不会生成事件的结果而事件绑定的话代码执行后新加的元素依旧绑定着事件能够获得触发事件的结果