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()’方法來並綁定處理

補充：

　　事件綁定調用和直接點事件調用的區別，直接點調用的話 代碼執行後再添加的元素 即便觸發了事件 也不會生成事件的結果  而 事件綁定的話 代碼執行後 新加的元素 依舊綁定着事件 能夠獲得觸發事件的結果
 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程