/Hàm addClass trong JQuery API
Các hàm built-in30/09/2023

Hàm addClass trong JQuery API

Hàm addClass là một trong các hàm hỗ trợ sẵn (built-in fuctions) JQuery API của thư viện jQuery được sử dụng với mục đích để thêm các lớp (class) đã chỉ định vào mỗi phần tử trong tập hợp các phần tử đã chọn.

1. Các cú pháp hàm addClass

Phương thức addClass thêm lớp (class) đã chỉ định vào tất cả các phần tử trong tập hợp. Nếu phần tử đã có lớp, lớp mới sẽ được thêm vào sau đó.

1.1. Cú pháp

addClass( className ):

  • className (Type: String): Một hoặc nhiều lớp cần thêm, được phân tách bằng dấu cách.

addClass( classNames ):

  • classNames (Type: Array): Một mảng các lớp cần thêm.

addClass( function ):

  • function (index, currentClassName) (Type: Function): Một hàm trả về một hoặc nhiều lớp cần thêm, dựa trên index và className hiện tại của phần tử.
  • Đây là một cú pháp sử dụng một hàm callback. Khi được gọi, hàm callback này nhận hai tham số:
  • index: Vị trí (chỉ số) của phần tử trong tập hợp các phần tử đã chọn.
  • currentClassName: Danh sách các class hiện tại của phần tử, đã được tách ra bởi dấu cách.
  • Hàm callback này trả về một chuỗi chứa một hoặc nhiều tên class mới mà bạn muốn thêm vào phần tử tương ứng. Chuỗi này có thể chứa nhiều class, được ngăn cách bằng dấu cách.
  • Từ phiên bản jQuery 3.3, Hàm callback này có thể trả về một chuỗi chứa nhiều tên class, hoặc một mảng các tên class mới. Điều này mang lại linh hoạt hơn khi bạn muốn thêm nhiều class cùng một lúc.

Kết quả trả về:

  • Hàm addClass không trả về giá trị

Phiên bản hỗ trợ:

  • addClass( className ): jQuery 1.0+
  • addClass( classNames ): jQuery 3.3+
  • addClass( function ): jQuery 1.4+ (đã bị thay đổi từ jQuery 3.3+ để hỗ trợ trả về một mảng lớp)

1.2. Chú ý

Trong jQuery, sự khác biệt giữa class và className nằm ở cách truy cập và thiết lập các lớp CSS (class) của một phần tử.

class:

  • Là một thuộc tính của phần tử HTML, trong đó chứa danh sách các lớp CSS được áp dụng cho phần tử đó.
  • Được truy cập và thiết lập thông qua phương thức .attr() của jQuery hoặc thuộc tính JavaScript element.className.

className:

  • Là một thuộc tính JavaScript của một phần tử, chứa danh sách các lớp CSS được áp dụng cho phần tử đó.
  • Được truy cập và thiết lập trực tiếp thông qua thuộc tính element.className.

Khi bạn sử dụng jQuery trước phiên bản 1.12/2.2, phương thức .addClass() thực hiện thao tác lên className, và sau đó trình duyệt cập nhật class dựa trên giá trị className. Điều này tạo ra sự mâu thuẫn trong việc đồng bộ hóa giữa class và className.

Tuy nhiên, từ phiên bản 1.12/2.2 trở đi, jQuery đã cập nhật phương thức .addClass() để trực tiếp tác động lên thuộc tính class, giúp cải thiện sự hỗ trợ cho XML và SVG documents, cũng như mang lại tính nhất quán và dễ sử dụng hơn khi làm việc với lớp CSS của các phần tử.

Hàm addClass trong JQuery API

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

2.1. Hàm addClass truy cập và thiết lập các lớp CSS

Lấy ví dụ để làm rõ sự khác biệt giữa trước và sau jQuery phiên bản 1.12/2.2 về .addClass():

Trước jQuery 1.12/2.2

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("p").addClass("myClass");
      alert($("p").attr("class"));  // Output: undefined
      alert($("p").attr("className"));  // Output: "myClass"
    });
  </script>
</head>
<body>
  <p>Some text</p>
</body>
</html>

Sau jQuery 1.12/2.2

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("p").addClass("myClass");
      alert($("p").attr("class"));  // Output: "myClass"
      alert($("p").attr("className"));  // Output: undefined
    });
  </script>
</head>
<body>
  <p>Some text</p>
</body>
</html>

Trong ví dụ trước jQuery 1.12/2.2, khi sử dụng .addClass(), phương thức này tác động lên thuộc tính className của các phần tử, và sau đó trình duyệt cập nhật thuộc tính class tương ứng.

Tuy nhiên, thuộc tính class không được cập nhật ngay lập tức sau khi gọi .addClass(). Chúng ta phải sử dụng .attr("className") để lấy được giá trị mới của class.

Trong ví dụ sau jQuery 1.12/2.2, .addClass() tác động trực tiếp lên thuộc tính class, và giá trị class được cập nhật ngay lập tức sau khi gọi .addClass().

2.2. Sử dụng addClass( className ) với Jquery cũ

Dưới đây là một ví dụ đơn giản về cách sử dụng .addClass(className) trong một trò chơi đơn giản với jQuery 1.12.

Chúng ta sẽ tạo ra một quả bóng (hình tròn) và mỗi lần người chơi click vào nút, một lớp CSS mới sẽ được thêm vào quả bóng, tạo hiệu ứng thay đổi màu nền:

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Simple Game with addClass</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <style>
    .ball {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: red; /* Màu mặc định */
    }
    .color1 {
      background-color: blue;
    }
    .color2 {
      background-color: green;
    }
    .color3 {
      background-color: yellow;
    }
  </style>
  <script>
    $(document).ready(function() {
      var clickCount = 0;

      // Lắng nghe sự kiện click trên nút
      $('#changeColorBtn').click(function() {
        // Mỗi lần click, tăng số lần kích lên 1 và tính số dư để xác định màu
        clickCount++;
        var colorIndex = clickCount % 3;

        // Lấy thẻ quả bóng
        var ball = $('#ball');

        // Xóa các lớp CSS hiện tại và thêm lớp CSS mới tương ứng với màu
        ball.removeClass().addClass('ball');

        if (colorIndex === 0) {
          ball.addClass('color1');
        } else if (colorIndex === 1) {
          ball.addClass('color2');
        } else if (colorIndex === 2) {
          ball.addClass('color3');
        }
      });
    });
  </script>
</head>
<body>
  <h1>Click the button to change the ball's color</h1>
  <button id="changeColorBtn">Change Color</button>
  <div id="ball" class="ball"></div>
</body>
</html>

Trong ví dụ này, mỗi lần người chơi click vào nút “Change Color”, một lớp CSS mới sẽ được thêm vào quả bóng, làm thay đổi màu nền theo thứ tự blue (xanh dương), green (xanh lá), yellow (vàng).

2.3. Sử dụng addClass( classNames ) với nhiều className

Dưới đây là một ví dụ minh họa cách sử dụng .addClass() với đối số là một mảng các lớp CSS

2.3.1. JQuery từ phiên bản 3.3

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Example: .addClass() with Array of classNames</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    .red-bg {
      background-color: red;
    }
    .blue-text {
      color: blue;
    }
    .bold {
      font-weight: bold;
    }
  </style>
  <script>
    $(document).ready(function() {
      // Mảng các lớp CSS
      var classesToAdd = ['red-bg', 'blue-text', 'bold'];

      // Lắng nghe sự kiện click
      $('#changeStyleBtn').click(function() {
        // Thêm các lớp CSS từ mảng vào phần tử
        $('#styledElement').addClass(classesToAdd.join(' '));
      });
    });
  </script>
</head>
<body>
  <h1>Click the button to change the element's style</h1>
  <button id="changeStyleBtn">Change Style</button>
  <div id="styledElement">This is a styled element.</div>
</body>
</html>

Trong ví dụ này, khi bạn click vào nút “Change Style”, một mảng các lớp CSS được thêm vào một phần tử. Các lớp này cụ thể là ‘red-bg’, ‘blue-text’, và ‘bold’.

2.3.2. JQuery trước phiên bản 3.3

Trong phiên bản jQuery trước 3.3, chúng ta không thể truyền một mảng trực tiếp vào hàm .addClass(). Thay vào đó, chúng ta có thể sử dụng .addClass() lặp qua mảng và thêm từng lớp một.

Dưới đây là cách viết lại ví dụ trước 3.3:

<!DOCTYPE html>
<html>
<head>
  <title>Example: .addClass() with Array of classNames</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    .red-bg {
      background-color: red;
    }
    .blue-text {
      color: blue;
    }
    .bold {
      font-weight: bold;
    }
  </style>
  <script>
    $(document).ready(function() {
      var classesToAdd = ['red-bg', 'blue-text', 'bold'];

      $('#changeStyleBtn').click(function() {
        for (var i = 0; i < classesToAdd.length; i++) {
          $('#styledElement').addClass(classesToAdd[i]);
        }
      });
    });
  </script>
</head>
<body>
  <h1>Click the button to change the element's style</h1>
  <button id="changeStyleBtn">Change Style</button>
  <div id="styledElement">This is a styled element.</div>
</body>
</html>

Trong ví dụ này, chúng ta sử dụng một vòng lặp để thêm từng lớp CSS từ mảng vào phần tử.

2.4. Sử dụng hàm addClass( function)

Ví dụ trên giới thiệu việc sử dụng phương thức .addClass() của thư viện jQuery bắt đầu được giới thiệu trong thư viện JQuery phiên bản 1.4.3.

Dưới đây là chi tiết của ví dụ:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery addClass Function Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
  <script>
    $(document).ready(function() {
      $('button').click(function() {
        // Function to determine the class based on index
        function determineClass(index, existingClasses) {
          return "dynamic-class-" + index;
        }

        // Add the class vào các thẻ p bằng cách dùng hàm determineClass
        $('p').addClass(determineClass);

        // Hiển thị classs sau khi được add
        $('p').each(function() {
          $(this).text("My class is: " + $(this).attr('class'));
        });
      });
    });
  </script>
</head>
<body>
  <button>Add Class</button>
  <p>My class is:</p>
  <p>My class is:</p>
  <p>My class is:</p>
</body>
</html>

Kết quả là khi bạn nhấn vào nút “Add Class”, mỗi đoạn văn <p> sẽ nhận được một class mới dựa trên vị trí của nó, và class này sẽ được hiển thị.

Đây là một cách sử dụng .addClass() để thêm class động vào các phần tử dựa trên index hoặc một quy tắc nào đó.

2.5. Sức mạnh của addClass( function) từ phiên bản 3.3

Hàm addClass(function) trong thư viện jQuery từ phiên bản 3.3 cho phép bạn trả về một mảng tên lớp (class names) để thêm vào phần tử.

Dưới đây là một ví dụ minh họa:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery addClass Function Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    .class1 {
      background-color: yellow;
    }
    .class2 {
      color: blue;
    }
  </style>
  <script>
    $(document).ready(function() {
      $('button').click(function() {
        // Function to determine an array of classes based on index
        function determineClasses(index, existingClasses) {
          if (index % 2 === 0) {
            return ['class1', 'class2'];
          } else {
            return ['class2'];
          }
        }

        // Add the classes to paragraphs using the determineClasses function
        $('p').addClass(determineClasses);

        // Display classes after they are added
        $('p').each(function(index) {
			if (index % 2 === 0) {
				$(this).text("My classes are: " + $(this).attr('class'));
			}
			else {
				$(this).text("My classes is " + $(this).attr('class'));
			}
        });
      });
    });
  </script>
</head>
<body>
  <button>Add Classes</button>
  <p>My classes are:</p>
  <p>My classes are:</p>
  <p>My classes are:</p>
</body>
</html>

Trong ví dụ này, khi bạn nhấn nút “Add Classes”, các đoạn văn <p> sẽ nhận các lớp class1 và class2 nếu số thứ tự của đoạn văn là số chẵn, và chỉ nhận class2 nếu là số lẻ. Đây là cách sử dụng hàm addClass(function) trong thư viện jQuery từ phiên bản 3.3

Related posts