JQuery addClass() phương pháp này cung cấp cho các nhà phát triển một cách để thay đổi các phần tử theo cách toàn cầu hơn. Như tên phương thức gợi ý, chúng ta có thể thêm một thuộc tính lớp vào một phần tử đã chọn. Tại sao chúng ta muốn làm điều này?
Hãy lấy một ví dụ về một trang web có một số yếu tố hiện có như tiêu đề, đoạn văn và nút bấm để thực hiện điều gì đó. Cùng với trang này là một biểu định kiểu sử dụng tên lớp của các phần tử này để tạo kiểu cho chúng. Khi nhấp vào nút, nội dung hiện có có thể thay đổi kiểu hoặc giao diện.
Chúng tôi có thể sử dụng addClass() để chèn thuộc tính kiểu mới cho nội dung hiện có sau khi nhấp vào nút, điều này giúp bạn có thể thay đổi kiểu của nội dung hiện có chỉ bằng một dòng mã. Làm như vậy cho phép nhà phát triển suy nghĩ về việc thao tác các phần tử theo phong cách riêng.
Hãy đi sâu hơn vào ví dụ và xem xét cách chúng tôi có thể mã hóa nó.
Cách jQuery addClass () hoạt động
Trong ví dụ của chúng tôi, chúng tôi đang thay đổi thuộc tính lớp của đối tượng khi nút của chúng tôi được nhấp. Trước khi chúng ta đi vào mã ví dụ này, hãy xem cách addClass() làm. Giả sử chúng ta có HTML này:
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p> Chúng tôi đang sử dụng