页面载入事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../jquery-3.3.1.min.js"></script>
  9. </head>
  10. <body>
  11.     <img src="1img.php" alt="">
  12.     <div>
  13.         112233
  14.     </div>
  15.     <script>
  16.         //页面加载事件,等待页面中的所有资源元素全部记载完后,触发事件
  17.         // window.onload=function(){
  18.         //     alert(2);
  19.         // }
  21.         //页面加载事件，等待页面元素全部度取完后触发事件
  22.         $().ready(function(){
  23.             alert(4);
  24.         });
  25.     </script>
  26. </body>
  27. </html>

jq中的事件绑定

原生js事件绑定语法：|
DOM对象.on事件名称=事件的处理程序
jq事件绑定语法：
jg对象.事件名称（事件的处理程序）
image.png

jq中的常用事件

image.png

事件切换

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../jquery-3.3.1.min.js"></script>
  9.     <style>
  10.         div,h2{
  11.             margin: 0;
  12.             padding: 10px;
  13.         }
  14.         #d1{
  15.             width: 300px;
  16.         }
  17.         #h2{
  18.             background-color: #d9ffff;
  19.         }
  20.         #d2{
  21.             border: 1px solid red;
  22.             height: 200px;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.    <div id="d1">
  28.     <h2>折叠效果</h2>
  29.     <div id="d2">
  30.         asdasdfasdfads
  31.     </div>
  32.    </div>
  33.     <script>
  34.         $('#d1').toggle(function(){
  35.             $('#d2').hide(2000);
  36.         },function(){
  37.             $('#d2').show(3000);
  38.         },function(){
  39.             alert(3);
  40.         });
  41.     </script>
  42. </body>
  43. </html>

事件绑定

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../jquery-3.3.1.min.js"></script>
  9. </head>
  10. <body>
  11.     <input type="button" id="btu" value="下载">
  12.     <script>
  13.         $('#btu').one('click',function(){//绑定一次事件
  14.             window.open('http://www.baidu.com');
  15.             $(this).bind('click mouseout',function(){//绑定事件,可以绑定多个
  16.                 alert('下载成功');
  17.                 $(this).unbind('click');//解绑事件
  18.             });
  19.         });
  20.     </script>
  21. </body>
  22. </html>

事件冒泡

image.png
image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../jquery-3.3.1.min.js"></script>
  9.     <style>
  10.         div{padding: 50px;}
  11.         #div3{width: 300px;height: 300px;background-color: red;}
  12.         #div2{width: 200px;height: 200px;background-color: yellow;}
  13.         #div1{width: 100px;height: 100px;background-color: blue;}
  14.     </style>
  15. </head>
  16. <body>
  17.     <div id="div3">
  18.         <div id="div2">
  19.             <div id="div1">
  20.             </div>
  21.         </div>
  22.     </div>
  23.     <script>
  24.         $('#div3').click(function(){
  25.             alert(3);
  26.         });
  27.         $('#div2').click(function(e){
  28.             alert(2);
  29.             e.stopPropagation();
  30.         });
  31.         $('#div1').click(function(){
  32.             alert(1);
  33.         });
  36.     </script>
  37. </body>
  38. </html>

阻止默认行为

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../jquery-3.3.1.min.js"></script>
  9. </head>
  10. <body>
  11.     <a href="http://baidu.com">百度</a>
  12.     <script>
  13.         $('a').click(function(e){
  14.             alert(1);
  15.             e.preventDefault();
  16.         });
  17.     </script>
  18. </body>
  19. </html>