Bài 1: Giới thiệu về Trình quản lý quảng cáo

Bài trước Bài tiếp theo

BÀI GIẢNG: JavaScript & jQuery CSS

1. Giới thiệu về JavaScript và jQuery CSS

JavaScript (JS)

JavaScript là ngôn ngữ lập trình phổ biến dùng để tạo các hiệu ứng động trên trang web. JS có thể:

  • Thao tác với HTML và CSS.
  • Xử lý sự kiện.
  • Giao tiếp với máy chủ (AJAX).
  • Tạo hiệu ứng động.

jQuery CSS

jQuery là một thư viện JavaScript giúp đơn giản hóa việc thao tác với DOM và CSS. jQuery CSS là một tập hợp các phương thức giúp thao tác với các thuộc tính CSS của phần tử HTML, cho phép:

  • Lấy hoặc đặt giá trị của một thuộc tính CSS.
  • Thay đổi kiểu dáng của phần tử.
  • Quản lý lớp CSS (class) của phần tử.

jQuery giúp việc thay đổi giao diện trang web trở nên nhanh chóng và dễ dàng hơn so với JavaScript thuần.

2. Các phương thức JavaScript & jQuery CSS thông dụng

2.1. JavaScript thuần để thay đổi CSS

Trong JavaScript, có nhiều cách để thay đổi CSS của một phần tử:

Cách 1: Sử dụng .style để thay đổi trực tiếp

var box = document.getElementById("box");
box.style.backgroundColor = "red";
box.style.fontSize = "20px";

Cách 2: Sử dụng classList để thêm/xóa class

box.classList.add("highlight"); // Thêm class
box.classList.remove("highlight"); // Xóa class
box.classList.toggle("highlight"); // Chuyển đổi class

2.2. jQuery CSS – Lấy và đặt thuộc tính CSS

Cú pháp:

$(selector).css(property);
$(selector).css(property, value);
$(selector).css({property1: value1, property2: value2});

Ví dụ:

// Lấy giá trị màu nền của phần tử có id "box"
var color = $("#box").css("background-color");
console.log(color);

// Đặt màu nền thành đỏ
$("#box").css("background-color", "red");

// Đặt nhiều thuộc tính cùng lúc
$("#box").css({
    "background-color": "blue",
    "color": "white",
    "font-size": "20px"
});

2.3. .addClass(), .removeClass(), .toggleClass() – Quản lý class CSS bằng jQuery

1. Thêm lớp CSS: .addClass()

$(selector).addClass("className");

Ví dụ:

$("#box").addClass("highlight");

2. Xóa lớp CSS: .removeClass()

$(selector).removeClass("className");

Ví dụ:

$("#box").removeClass("highlight");

3. Chuyển đổi lớp CSS: .toggleClass()

$(selector).toggleClass("className");

Ví dụ:

$("#box").toggleClass("highlight");

Ứng dụng: Nếu phần tử có lớp highlight thì bị xóa, nếu chưa có thì thêm vào.

2.4. .width() và .height() – Lấy và đặt kích thước

Cú pháp:

$(selector).width();  // Lấy chiều rộng
$(selector).width(value);  // Đặt chiều rộng
$(selector).height();  // Lấy chiều cao
$(selector).height(value);  // Đặt chiều cao

Ví dụ:

var w = $("#box").width(); // Lấy chiều rộng
$("#box").width(200); // Đặt chiều rộng 200px

2.5. .show(), .hide(), .toggle() – Hiển thị và ẩn phần tử bằng jQuery

1. Ẩn phần tử: .hide()

$(selector).hide(speed, callback);

Ví dụ:

$("#box").hide();
$("#box").hide(1000, function() {
    alert("Ẩn xong!");
});

2. Hiển thị phần tử: .show()

$(selector).show(speed, callback);

Ví dụ:

$("#box").show(500);

3. Chuyển đổi trạng thái: .toggle()

$(selector).toggle(speed, callback);

Ví dụ:

$("#box").toggle(500);

Ứng dụng: Nếu phần tử đang ẩn thì hiển thị, nếu đang hiển thị thì ẩn.

4. Kết luận

JavaScript và jQuery CSS là hai công cụ mạnh mẽ để thay đổi giao diện trang web. Trong khi JavaScript thuần giúp kiểm soát tốt hơn, jQuery giúp thao tác nhanh chóng và dễ dàng hơn. Hãy thực hành nhiều để thành thạo cả hai!

 

CODE MẪU

https://craftpip.github.io/jquery-confirm/

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .modal {
            /*Phần full màn hình. màu đen*/
            width: 100vw;
            height: 100vh;
            background: #000000;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            justify-content: center;
            align-items: center;
        }
            .modal.show{
                display:flex
            }

            .modal .box {
                background: white;
                width: 400px;
                height: 180px;
                box-shadow: 0px 0px 12px 0px #e5e5e5;
                border-radius: 10px;
                padding: 10px;
                box-sizing: border-box;
            }
            .modal .box div {
                text-align:right;
            }
                .modal .box div button {
                    background:#089fc7;
                    color:white;
                    font-weight:400;
                    padding:7px 10px;
                    border:none;
                    outline:none;
                    border-radius:5px;
                    font-size:15px
                }
    </style>
</head>
<body>
    <h1 >WEBSITE DEMO THÔNG BÁO</h1>

    <button id="btnOpen">Mở thông báo</button>

    <script>
        //Cách 1. Dùng style trực tiếp
        //var btn = document.getElementById("btnOpen");
        //btn.addEventListener("click", function () {
        //    //Thay đổi css display cho modal
        //    var modal = document.getElementById("modal1");
        //    modal.style.display = "flex";
        //})
        //var btnClose = document.getElementById("btnClose");
        //btnClose.addEventListener("click", function () {
        //    //Thay đổi css display cho modal
        //    var modal = document.getElementById("modal1");
        //    modal.style.display = "none";
        //})

        //$("#btnOpen").click(function () {
        //    $("#modal1").css("display", "flex")
        //})
        //$("#btnClose").click(function () {
        //    $("#modal1").css("display", "none")
        //})

        //CÁCH 2. CHUYỂN ĐỔI CLASS
        $("#btnOpen").click(function () {
            var modal = `    <div class="modal" id="modal1">
                            <div class="box">
                                <h3>Alert !</h3>
                                <p>
                                    This is a simple alert.
                                </p>
                                <p> 
                                    with some HTML contents
                                </p>
                                <div>
                                    <button id="btnClose">OKAY</button>
                                </div>
                            </div>
                        </div> `
            $("body").append(modal)
            $("#modal1").addClass("show")
        })
        $(document).on("click", "#btnClose", function () {
            $("#modal1").removeClass("show")
        })
        

    </script> 

</body>
</html>

 

Cho bố cục giao diện như sau:

  • Một vùng chứa (div) có id là #box.
  • Ba nút bấm để điều khiển #box:
    • Nút "Phóng to" – để mở rộng phần tử.
    • Nút "Thu nhỏ" – để thu nhỏ phần tử.
    • Nút "Ẩn/Hiện" – để ẩn hoặc hiện phần tử.

Yêu cầu bài tập:

  1. Khi nhấn nút "Phóng to", phần tử #box sẽ tăng kích thước lên 200x200px.
  2. Khi nhấn nút "Thu nhỏ", phần tử #box sẽ giảm kích thước xuống 100x100px.
  3. Khi nhấn nút "Ẩn/Hiện", phần tử #box sẽ ẩn hoặc hiện dần với hiệu ứng mượt.

Mẫu HTML:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bài tập jQuery CSS</title>
    <style>
        #box {
            width: 150px;
            height: 150px;
            background-color: lightblue;
            text-align: center;
            line-height: 150px;
            margin-top: 10px;
            transition: all 0.3s;
        }
    </style>
</head>
<body>

    <h2>Bài tập: Thay đổi kích thước và hiển thị phần tử</h2>

    <button id="enlarge">Phóng to</button>
    <button id="shrink">Thu nhỏ</button>
    <button id="toggleBox">Ẩn/Hiện</button>

    <div id="box">Hello</div>

</body>
</html>

Nộp bài: Nộp file html + js hoặc biên soạn trực tiếp tại phàn nội dung trả lời