金魚都能懂的網頁設計入門-JQuery事件

發表於 更新於 分類於 閱讀次數：
金魚都能懂的網頁設計入門-第二十六天 - JQuery事件

至官方網站找 ：https://api.jquery.com/

找 API Documentation

事件，有一個時間點的問題，什麼時候要做什麼事情

例如，當我卷動視窗時，某個東西會飛出來

範例程式：box-a 是開關，box-b 會消失及出現

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>金魚都能懂的網頁設計入門-第二十六天 - JQuery事件</title>
  <style type="text/css">
    .box-a{
      width: 200px;
      height: 200px;
      display: inline-block;
      background-color: #aaa;
    }
    .box-b{
      width: 200px;
      height: 200px;
      display: inline-block;
      background-color: #faa;
    }
    .content{
      display: none;
    }
    .product-title{
      background-color: #000;
      color: #fff;
      padding: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 3. 做二個 box 測試程式,box-a是開關 ,box-b 會因box-a 點選之後而消失或出現 -->
  <div class="box-a">box-a</div>
  <div class="box-b">box-b</div>

<!-- 7.做一個手風琴的效果,例如側邊欄有一個選單，底下會展開子選單 -->
<div class="product-title">產品介紹</div>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora accusamus ducimus modi animi aspernatur explicabo repellat odit, libero suscipit nisi reiciendis quia aliquid earum autem ipsam nemo distinctio eaque consequuntur.</div>



  <!-- 1.先把 jquery load 進來 -->
  <script src="./jquery.min.js"></script>
  
  <!-- 2. 先呼叫 ready 方法，準備做事 -->
  <script type="text/JavaScript">
    //ready 是jquery的一個方法
    $(document).ready(
      function(){
        


        //... 做事的位置
        // 4. 當.box-a  click要做事情, 要在裹面寫匿名函式function
        // 6. 試看看 dobule click 
        // $('.box-a').dblclick(
        $('.box-a').click(
          function(){
            // 當選到 box-a ，則 box-b藏起來
            // $('.box-b').hide();
            // box-a  是開關，box-b 會消失及出現
            // $('.box-b').toggle();
            // 5. 可以用開發人員工具，檢查看看 .box-b 發生什麼事, 看到 style display: none 出現及消失
          
            $('.box-b').toggle();
          }
        )


        // 7.手風琴的效果
        $('.product-title').click(
          function(){
            $('.content').toggle();
          }
        )


      })
 
    
  </script>
</body>
</html>

範例程式：手風琴的效果 , 點選產品說明，則content 會出現及關閉，程式同上.

範例程式：蓋版廣告

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>金魚都能懂的網頁設計入門-第二十六天 - JQuery事件</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
      list-style: none
    }
    /* 設定蓋版廣告 */
    .full-screen{
      position: fixed;
      
      top: 0; 
      left: 0;
      width: 100%; 
      height: 100%; 
      z-index: 10;
      background: rgba(0,0,0,.5);
      /* 垂直置中 */
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .full-screen .text{
      width: 90%;
      /* 用 max-width不會破版*/
      max-width: 500px;
      max-height: 80%;
      background: #fff;
      padding: 20px;
      position: relative;
    }
    /* 關閉鈕通常會露出去 */
    .full-screen .btn-close{
      position: absolute;
      /* 下列三行是垂直置中的技巧 */
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color:#000 ;
      color: #fff;
      text-decoration: none;
      top: -15px;
      right: -15px;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <!-- 做一個蓋版廣告 -->
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam itaque tempora aut tenetur! Aliquam rerum aut temporibus exercitationem, provident rem. Libero asperiores laboriosam culpa maiores nostrum magni at eaque officia.</p>
    <p>Sapiente doloribus nisi quam, dicta aliquid cupiditate ex explicabo eius ad. Rerum, accusamus aliquid alias quasi in ratione corporis repellendus minus repudiandae maiores perspiciatis hic consequuntur sint eius recusandae voluptatem?</p>
    <p>Quas commodi, laudantium est illum debitis fugit voluptatem culpa natus explicabo fugiat beatae laboriosam inventore, odit architecto, hic eos enim. Impedit officia ducimus ratione obcaecati. Provident, quod. Autem, nihil. Debitis.</p>
    <p>Maiores illo voluptatem adipisci earum consectetur! Odio, cumque. Veritatis, ea. Totam reiciendis, nam tempore aperiam praesentium, adipisci doloremque possimus deserunt inventore fuga officiis maxime velit nesciunt necessitatibus fugit assumenda cum?</p>
    <p>Nesciunt dignissimos accusantium quos minus cum optio corrupti ex molestiae porro, veniam iure. Illum molestias error eveniet architecto asperiores accusamus in, soluta atque sequi, eos ipsa. Quia molestias explicabo laudantium.</p>
    <p>Delectus, necessitatibus odit. Perspiciatis, iusto accusamus ratione magnam nam ea eius similique nisi commodi, at architecto odio exercitationem! Ipsum quisquam cupiditate consequuntur accusantium dolore quasi voluptas porro consequatur atque commodi!</p>
    <p>Et, repellat beatae. Provident nostrum adipisci obcaecati repellendus id eos expedita, in repellat iusto quos, tempore aperiam non. Ab autem pariatur voluptate tempora quo aperiam neque eos hic! Impedit, dolorum.</p>
    <p>Accusamus sit, laborum aspernatur odio debitis facilis. Hic adipisci ipsam tenetur reprehenderit fugit! Provident dicta minus explicabo deserunt odio exercitationem dolores animi distinctio, sequi ex! Omnis est amet incidunt quaerat.</p>
    <p>At, libero impedit. Dicta dolore minima veniam accusamus saepe quisquam nostrum, esse ex rerum adipisci quia nihil numquam? Deleniti odit quisquam maiores id laudantium repudiandae perspiciatis assumenda explicabo aliquam magnam.</p>
    <p>Expedita doloribus rerum natus, eos consectetur molestias nobis ut quasi. Quis fugiat corporis quod vero sit pariatur optio quae exercitationem non, deleniti atque tempora voluptas nobis esse vitae, quidem hic.</p>
    <p>Aliquid nihil amet ea, suscipit rem esse, deserunt dicta quia ipsa in, dolore placeat unde cupiditate at mollitia? Iure ad deleniti odio recusandae in officia libero saepe nostrum incidunt commodi?</p>
    <p>Ad tempora distinctio accusantium, iste aperiam repellendus temporibus dignissimos inventore quam dolores culpa iure, fugit quasi ducimus sint dicta quibusdam delectus, praesentium debitis omnis provident magni fugiat magnam. Ipsam, odit.</p>
    <p>Aspernatur at est, officiis nam odit, animi sequi minima nisi assumenda officia iusto quisquam similique saepe? Recusandae quisquam cupiditate quas, adipisci earum in dignissimos, omnis, aliquam numquam porro corrupti itaque!</p>
    <p>Fugit beatae voluptas dignissimos itaque, molestias natus eius cupiditate quod, doloremque architecto mollitia eos facere harum qui maiores vitae sunt repudiandae hic velit ipsa, nisi eligendi aspernatur? Distinctio, repudiandae voluptatum.</p>
    <p>Omnis aliquam autem suscipit aperiam labore odit magni harum inventore voluptatum perspiciatis natus dicta nam rerum dolorum eveniet tenetur ad, debitis nulla temporibus quidem pariatur, excepturi assumenda quod. Dolor, doloremque.</p>
    <p>Quod cum iste, praesentium dolore delectus nobis tenetur debitis aliquid architecto quos, dolorem eligendi eum totam voluptatibus id doloribus magnam veritatis a? Quia reiciendis perferendis id placeat eum at velit.</p>
    <p>Odit animi quis blanditiis commodi illum laborum id sapiente dolore sequi in, harum fugit amet culpa laboriosam adipisci ipsa necessitatibus, aliquid, corrupti obcaecati ducimus. Non sunt inventore sit perspiciatis delectus.</p>
    <p>Nam doloremque pariatur illo ducimus, possimus quis quo nesciunt, perferendis expedita iure, adipisci corporis eligendi ipsa fuga aliquid quisquam tempore impedit soluta. Nisi quibusdam ut illo saepe quidem explicabo. Ullam?</p>
    <p>Deleniti iste officiis voluptate? Culpa aspernatur saepe illum, accusantium eligendi ex qui! Soluta amet expedita commodi itaque quibusdam mollitia quia magni provident laboriosam vel. Rerum nam facere perspiciatis iure veniam.</p>
    <p>Laboriosam voluptatum reiciendis cum aut totam inventore animi id quas deleniti aperiam in laudantium sint necessitatibus nulla, quod fuga error pariatur expedita velit ex temporibus, voluptate quos, nam modi? Ipsam.</p>
    <p>Eligendi iusto hic maiores, molestias ex fugit. Recusandae placeat maxime fugiat a. Voluptates tempora consequatur, fugit quae vel aperiam repudiandae quis explicabo laborum veniam, culpa tenetur adipisci ipsum. Corrupti, odio!</p>
    <p>Atque saepe sit dignissimos. Quasi quisquam repudiandae fugit esse. Sit asperiores ratione eos perferendis a neque eius facilis cupiditate, non at optio officia modi sequi voluptatem provident ex fugit ea?</p>
    <p>Tenetur velit reiciendis recusandae est iusto? Quidem laudantium aperiam ad vel in. Minus sequi explicabo ad vero esse, nobis, praesentium hic aut ullam suscipit reprehenderit omnis quis dolore temporibus accusantium?</p>
    <p>Laborum sint nesciunt numquam recusandae nobis neque molestias blanditiis iure. Neque nihil beatae similique magnam omnis, eius alias optio, ducimus iure quis, voluptate sapiente vitae quidem animi facilis minima culpa?</p>
    <p>Et, totam! Temporibus at repellat amet nihil nisi perferendis possimus, voluptates beatae voluptas tempore totam quidem veniam, laborum esse officia voluptatem quisquam ut id voluptate nulla distinctio quaerat? Officiis, ipsa?</p>
    <p>Hic quia, ut beatae facere culpa voluptates illum, quos voluptas facilis ad inventore, recusandae alias aspernatur. Fugiat, corrupti modi. Voluptates alias id ducimus totam reprehenderit laborum minima distinctio natus minus.</p>
    <p>Doloremque atque alias, quasi quae ab fuga ut, minima veritatis blanditiis, mollitia nemo? Nihil nulla ea modi inventore accusantium debitis id laudantium necessitatibus! Blanditiis at ducimus et iure ipsam sunt.</p>
    <p>Quaerat unde ipsam deleniti dolore? Maiores repellat eos esse dolorum nihil, fugiat officia maxime unde nesciunt. Nulla, soluta, ratione eos error optio delectus laboriosam, obcaecati velit itaque mollitia doloribus commodi.</p>
    <p>Ad voluptatum quos quaerat iure ducimus consequuntur? Quaerat tempore fugit deleniti quidem optio expedita ullam et inventore libero eveniet placeat nihil rerum ipsam, dignissimos aut ut repudiandae. Blanditiis, magnam repellat.</p>
    <p>Rerum officiis saepe cupiditate, fugiat accusamus distinctio minima quasi, possimus doloribus porro amet? Consequuntur facilis reiciendis, placeat provident deserunt ipsam aliquam veritatis at. Omnis nihil voluptas numquam dolores ipsa vitae?</p>

    <!-- 蓋版廣告的區塊 -->
    <div class="full-screen">
      <div class="text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus rem deserunt consectetur optio ex, sunt fugit inventore culpa esse vel asperiores cupiditate commodi ullam voluptatum magnam maxime, nobis harum ipsam!
        <!-- 希望有一個關閉的按鈕 -->
        <a href="#" class="btn-close">X</a> 
      </div>
    </div>


  <!-- 先把 jquery load 進來 -->
  <script src="./jquery.min.js"></script>
  
  <!--  先呼叫 ready 方法，準備做事 -->
  <script type="text/JavaScript">
    //ready 是jquery的一個方法
    $(document).ready(
      function(){
        // btn-close點到，full-screen關閉
        $('.btn-close').click(
          function(){
            $('.full-screen').hide();
          }
        )



      })
 
    
  </script>
</body>
</html>

文獻連結:
金魚都能懂的網頁設計入門-第二十六天 - JQuery入門
https://www.youtube.com/watch?v=CDO8AkK2HnE&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=26 by CSScoke Amos

完整版30集 - 金魚都能懂網頁設計入門
https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre by CSScoke Amos