/All Selector trong thư viện jQuery
Các hàm built-in29/09/2023

All Selector trong thư viện jQuery

All Selector trong thư viện jQuery là một trong các loại Selectors cơ bản được cung cấp sẵn trong thư viện jQuery cho phép lựa chọn tất cả các phần tử HTML trong tài liệu. Cụ thể, nó chấp nhận mọi phần tử có thể có trong một trang web, bao gồm các phần tử div, p, a, img, và nhiều phần tử khác.

1. Cú pháp của All Selector

Mục đích: Mục đích chính của “All Selector” là lựa chọn và tác động đồng thời lên tất cả các phần tử trong trang web. Điều này có thể hữu ích khi bạn muốn áp dụng một hoặc nhiều thuộc tính hoặc thay đổi nội dung đồng loạt trên toàn bộ trang web.

Cú pháp:

$("*")

Hoặc

jQuery( "*" )

  • Trong đó, ký hiệu * là cú pháp để chọn tất cả các phần tử trong tài liệu.

Phiên bản jQuery:

  • “All Selector” (hay còn gọi là Universal Selector) đã được hỗ trợ trong jQuery từ phiên bản ban đầu và vẫn được hỗ trợ trong tất cả các phiên bản mới nhất của thư viện jQuery. Điều này có nghĩa là bạn có thể sử dụng “All Selector” từ phiên bản ban đầu của jQuery cho đến phiên bản hiện tại.
All Selector trong thư viện jQuery

2. Một số ví dụ minh họa

Dưới đây là một số ví dụ minh họa về “All Selector (“*”)” sử dụng jQuery. Mỗi ví dụ đi kèm với mã HTML và tham chiếu tới thư viện jQuery từ “code.jquery.com”.

2.1. Tô đậm tất cả các phần tử trên trang

Mã HTML:

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button onclick="highlightAll()">Tô đậm tất cả</button>

  <script>
    function highlightAll() {
      $("*").css("font-weight", "bold");
    }
  </script>
</body>
</html>

Giải thích: Khi nhấn vào nút “Tô đậm tất cả”, hàm highlightAll() sẽ được gọi. Hàm này sử dụng “*” để chọn tất cả các phần tử và thay đổi font-weight thành “bold”, tô đậm các phần tử trên trang.

2.2. Ẩn tất cả các phần tử trên trang

Mã HTML:

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button onclick="hideAll()">Ẩn tất cả</button>

  <script>
    function hideAll() {
      $("*").hide();
    }
  </script>
</body>
</html>

Giải thích: Khi nhấn vào nút “Ẩn tất cả”, hàm hideAll() sẽ được gọi. Hàm này sử dụng “*” để chọn tất cả các phần tử và ẩn chúng, làm ẩn đi toàn bộ nội dung trang.

2.3. Thêm một class mới cho tất cả các phần tử

Mã HTML:

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .highlighted {
      color: red;
    }
  </style>
</head>
<body>
  <button onclick="addClassToAll()">Thêm class</button>

  <script>
    function addClassToAll() {
      $("*").addClass("highlighted");
    }
  </script>
</body>
</html>

Giải thích: Khi nhấn vào nút “Thêm class”, hàm addClassToAll() sẽ được gọi. Hàm này sử dụng “*” để chọn tất cả các phần tử và thêm class “highlighted” vào chúng, làm thay đổi màu chữ thành màu đỏ cho toàn bộ nội dung trang.

Related posts