iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
自我挑戰組

30天後能否自己做出一個簡單便利的訂便當系統(HTML、CSS、BootStrap、PHP、SQL、JavaScrip、JQuery)系列 第 13

鐵人賽 Day13 -- 一定要知道的JQuery (一) -- Click點擊關閉蓋板廣告

前言

昨天提到遮屏廣告的製作,那至於要怎麼讓我們點選叉叉後,將煩人的遮屏廣告關掉呢?
這時就要用到我們 JQuery 當中的 Click 事件
https://ithelp.ithome.com.tw/upload/images/20210913/20141189YIPxrDc9Q8.jpg
(一樣先附上程式碼

<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .amg1{
            width: 1276px;
            height: 600px;
            position: fixed;
            background-color: rgb(0, 0, 0,0.6);
        }
        .amos{
            width: 500px;
            height: 300px;
            background-color: #aaa;
            position: fixed;
            top: 0;            
            bottom: 0;
            margin: auto;      /*上下左右為0 + margin auto = 置中*/
            left: 0;
            right: 0;
            text-align: center;
        }
        .text{
            width: 20px;
            height: 20px;
            background-color: #fff;
            position: absolute;
            right: -5px;
            top: -5px;
        }
        .text a{
            text-decoration: none;
            font-size: 20px;
        }
        .pic img{
            width: 500px;
            height: 270px;
        }
    </style>
</head>
<body>
    <div class="amg1">
        <div class="amos">
            <strong>討人厭的蓋板廣告製作</strong>
            <div class="pic">
                <img srcset="NIKE.jpg ">
            </div>
            <div class="text">
                <a href="#" class="text1">X</a>
            </div>
        </div>  
    </div>

    //JQuery寫在這
    <script src="js/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.text1').click(function(){
                $('.amos1').hide();
            })
        })
    </script>
</body>
</html>

#載入JQuery 元件庫

有兩種方法

方法一

直接複製以下程式碼,並貼在body的最後面

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>

方法二

點選以下網址後,會看到一大堆程式碼,接著只需要把她另群新檔,附檔名為.js
然後再將檔案路徑寫上去即可
https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js

<script src="js/jquery.min.js"></script>

基本作業都做好之後就可以來使用我們的JQuery啦

JQuery 基本語法

JQuery起手式

$(document).ready(function(){
    //程式碼
})

Click 方法

我覺得講再多還不如直接貼程式碼最快,畢竟Click應該還算簡單的啦

$(document).ready(function(){
    $('.text1').click(function(){
        
    }
})

所以當今天text1被點擊之後,我們就要來看看要讓誰被隱藏起來,
那這時候的程式就必須寫在Click事件裡面
這樣當text1被點擊時,我們要被隱藏的才會被隱藏起來

hide 隱藏

$(document).ready(function(){
    $('.text1').click(function(){
        $('.amg1').hide();
    }
})

這樣當我們text1 被點擊時,我們的amg1就會被隱藏起來,這樣就可以順利關閉我們煩人的蓋板廣告啦

$('CSS選取器').方法(function(){}

如果今天是 :

加入 結果為
Class . $('#CSS選取器')
id # $('#CSS選取器')
標籤 標籤 $('寫標籤就好')

JQuery 是不是比想像中簡單多了呢
那明天我們再來看看還有哪些方法吧!!
我們鐵人賽Day14見囉!!


上一篇
鐵人賽 Day12 -- 一定要知道的 CSS (九) -- Position 定位 & opacity 透明度
下一篇
鐵人賽 Day14 -- hover效果 之 網頁快給我動起來啦
系列文
30天後能否自己做出一個簡單便利的訂便當系統(HTML、CSS、BootStrap、PHP、SQL、JavaScrip、JQuery)30

1 則留言

0
WenYeh
iT邦新手 4 級 ‧ 2021-09-13 14:52:49

讚啦

我要留言

立即登入留言