/Class Selector (“.class”) trong JQuery
Các hàm built-in02/10/2023

Class Selector (“.class”) trong JQuery

Lựa chọn Class Selector (“.class”) của Class Selector là một trong các loại Selectors cơ bản được cung cấp sẵn trong thư viện jQuery được thiết kế để chọn tất cả các phần tử có một lớp (class) đã được chỉ định để áp dụng các tác vụ và thay đổi trạng thái của chúng.

1. Hiểu về class

Class (lớp) trong ngữ cảnh này thường được hiểu như một khái niệm trong CSS và HTML. Trong CSS và HTML, “class” đề cập đến một cách để gán một nhóm các quy tắc kiểu (CSS) hoặc các hành vi (JavaScript) cho một hoặc nhiều phần tử HTML.

Trong HTML, một phần tử có thể được gán một hoặc nhiều lớp (class) thông qua thuộc tính class.

Ví dụ:

<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>

Ở đây, btn-primary và btn-secondary là các lớp (class) được gán cho các nút (button).

Trong jQuery, “Class Selector” ($(".class")) là một cú pháp cho phép chúng ta chọn tất cả các phần tử trong DOM có một lớp (class) cụ thể. Điều này cho phép chúng ta áp dụng các thao tác, hiệu ứng hoặc thay đổi trạng thái cho các phần tử có lớp cụ thể.

Ví dụ:

$(".btn-primary").css("background-color", "blue");

Đoạn mã trên sẽ chọn tất cả các phần tử có lớp btn-primary và đặt màu nền của chúng thành màu xanh.

Như vậy, “Class” (lớp) trong ngữ cảnh này đề cập đến cách định danh và quản lý các quy tắc kiểu và hành vi áp dụng cho các phần tử trong HTML thông qua CSS và JavaScript.

Class Selector -class- trong JQuery

2. Cú pháp Class Selector

Cú pháp:

$(".class")

Hoặc

jQuery(".class")

Tham số:

  • class: Chuỗi xác định tên lớp (class) cần chọn.

Kết quả trả về:

  • Class Selector trả về tất cả các phần tử có lớp (class) được chỉ định.

Phiên bản:

  • Class Selector được giới thiệu từ phiên bản 1.0 của jQuery.

3. Một số ví dụ

3.1. Class Selector và thuộc tính class

Dưới đây là một ví dụ đơn giản về cách sử dụng Class Selector để tạo một game đổi màu ngẫu nhiên cho các đối tượng cùng một lớp (class):

HTML Code:

htmlCopy code

<!DOCTYPE html>
<html>
<head>
  <title>Color Change Game</title>
  <style>
    .box {
      width: 50px;
      height: 50px;
      display: inline-block;
      margin: 5px;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <h1>Color Change Game</h1>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <button id="changeColorButton">Change Colors</button>

  <script>
    $(document).ready(function() {
      $('#changeColorButton').click(function() {
        // Select all elements with the class 'box'
        var boxes = $('.box');

        // Loop through each box and change its background color to a random color
        boxes.each(function() {
          var randomColor = getRandomColor();
          $(this).css('background-color', randomColor);
        });
      });

      function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }
    });
  </script>
</body>
</html>

Trong ví dụ này, chúng ta có một số hộp (<div> có lớp box). Mỗi khi người dùng nhấn nút “Change Colors”, màu nền của tất cả các hộp sẽ thay đổi thành một màu ngẫu nhiên.

Các hộp được chọn bằng Class Selector ($('.box')) và màu nền mới được áp dụng bằng cách sử dụng .css('background-color', randomColor). Hàm getRandomColor() được sử dụng để sinh một màu ngẫu nhiên.

3.2. Nguyên tắc hoạt động của class selector

Nguyên tắc hoạt động của class selector trong thư viện jQuery dựa trên cách thức trình duyệt xử lý phương thức getElementsByClassName() trong JavaScript.

Sử dụng getElementsByClassName() (nếu được hỗ trợ): Thư viện jQuery sẽ sử dụng phương thức getElementsByClassName() của JavaScript nếu trình duyệt hỗ trợ. Phương thức này được trình duyệt cung cấp để chọn tất cả các phần tử trong DOM có một lớp cụ thể. Điều này giúp cải thiện hiệu suất và tốc độ lựa chọn khi trình duyệt có hỗ trợ sẵn phương thức này.

Fallback sử dụng các cách lựa chọn phổ biến khác: Nếu trình duyệt không hỗ trợ phương thức getElementsByClassName() hoặc nếu phương thức này gây lỗi, jQuery sẽ tự động chuyển sang các cách lựa chọn phổ biến khác như querySelectorAll() và các phương pháp lựa chọn khác dựa trên DOM API. Điều này đảm bảo rằng class selector vẫn hoạt động đúng cách và linh hoạt trên mọi trình duyệt.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
  <title>Class Selector Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <button class="btn">Button 1</button>
  <button class="btn">Button 2</button>
  <button class="btn">Button 3</button>

  <script>
    $(document).ready(function() {
      // Sử dụng Class Selector để chọn các phần tử có class "btn"
      var buttons = $(".btn");

      // Kiểm tra xem trình duyệt có hỗ trợ getElementsByClassName() không
      if (typeof document.getElementsByClassName === "function") {
        alert("The browser supports getElementsByClassName(), using it.");
      } else {
        alert("The browser does not support getElementsByClassName(), falling back.");
      }

      // Log số lượng phần tử đã chọn
      alert("Number of elements selected: " + buttons.length);
    });
  </script>
</body>
</html>

Trong ví dụ này, chúng ta kiểm tra xem trình duyệt có hỗ trợ getElementsByClassName() không. Dựa vào kết quả, chúng ta log thông báo tương ứng và tiếp tục sử dụng Class Selector để chọn các phần tử có lớp btn.

Related posts