js单击事件：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>helloworld</title>
    6.   <script type="text/javascript">
    7.     window.onload = function ()
    8.     {
    9.       var butObj = document.getElementById("but01");
    10.       butObj.onclick = function ()
    11.       {
    12.         alert("js单击事件");
    13.       }
    14.     };
    15.   </script>
    16. </head>
    17. <body>
    18.     <button id="but01">SayHello</button>
    19. </body>
    20. </html>

    image.png

    用jQuery实现代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Title</title>
    6.   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    7.   <script type="text/javascript">
    8.       $(function (){    //相当于window.onload = function(){};表示页面加载完成
    9.           var $butObj = $("#but01");//表示按id获得了该标签的DOM对象
    10.         $butObj.click(function (){     //表示绑定单击事件
    11.           alert("jQuery单击事件");
    12.         });
    13.       });
    14.   </script>
    15. </head>
    16. <body>
    17.       <button id="but01">SayHello</button>
    18. </body>
    19. </html>

    image.png

    • 要使用jQuery一定要导入jQuery库
    • $是一个函数
    • image.png