1. 三种用法:
    2.   1. on 和 off
    3.        // 绑定事件
    4.        $().on("事件名",匿名函数)
    6.        // 解绑事件,给指定元素解除事件的绑定
    7.        $().off("事件名")
    9.   2. 直接通过事件名来进行调用
    10.        $().事件名(匿名函数)
    12.   3. 组合事件,模拟事件
    13.        $().ready(匿名函数)   // 入口函数 缩写形式  $(匿名函数) 
    14.        $().hover(mouseover, mouseout)   // 是onmouseover和 onmouseout的组合
    15.        $().trigger(事件名)  // 用于让js自动触发指定元素身上已经绑定的事件
    1. <!-- 案例一 -->
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Title</title>
    8.     <script src="jquery3.6.js"></script>
    9.     <script>
    11.         // $(document).ready(function () {
    12.         //
    13.         // });
    15.           /*缩写形式
    16.         $(function () {
    17.         // });   
    18.         */
    20.         /*
    21.         DOM事件绑定：
    22.         dom.事件 = function () {
    24.         }
    26.         jQuery事件绑定
    27.         $对象.事件(function(){
    29.         })
    30.          */
    32.         $(function () {
    34.             // 绑定事件
    35.             $(".c1").click(function () {
    36.                 console.log(this);  // 事件触发函数中的this代指是触发事件的标签对象（dom对象）
    37.                 // this.style.color = "red";
    38.                 // $(this).css("color", "red");
    39.             });
    41.         });
    43.             /* 语法2(不推荐使用)
    44.              $(".c1").bind("click",function () {
    45.                  alert(123)
    46.              });
    48.                             语法3(on关键字支持事件和委托)
    49.              $(".c1").on("dblclick", function () {
    50.                  alert("dblclick")
    51.              });
    53.                           取消事件
    54.              $(".c1").off("click");
    56.              */
    58.     </script>
    59. </head>
    60. <body>
    62. <div class="c1">DIV</div>
    63. <div class="c2"></div>
    65. </body>
    66. </html>