铁人赛 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见罗!!


<<:  Spring Framework X Kotlin Day 8 REST Clients & OpenAPI

>>:  不只懂 Vue 语法：请说明 Vue CLI 的目录架构？

【图解AWS教学 - IAM - 整体架构】

Youtube连结：https://bit.ly/35dy19t 这次跟大家分享，AWS IAM的...

Day 9 : 案例分享(3.2) 会计模组-日记帐 Odoo的会计核心运用

案例说明及适用场景 如果说一般的传票(日记帐分录)，是通用性的功能，那 日记帐 应算是Odoo特有的...

Day 5 - 透过 RKE 架设第一套 Rancher(下)

本文将於赛後同步刊登於笔者部落格 有兴趣学习更多 Kubernetes/DevOps/Linux 相...

[Day 05] 开发之前，先把需求弄清楚

今天我们终於要开始进入主题了， 但是在我们写程序之前， 我们还需要先搞清楚一个东西， 那就是需求， ...

阴影（下）

大家好，我是西瓜，你现在看到的是 2021 iThome 铁人赛『如何在网页中绘制 3D 场景？从 ...