Thay đổi lớp CSS bằng jQuery Giải pháp mẫu Mã HTML Mã CSS Mã JavaScript Xem Bút jquery-practical-exercise-36 của w3resource (@w3resource) trên CodePen Đóng góp mã và nhận xét của bạn thông qua Disqus Trước. Vô hiệu hóa một liên kết bằng jQueryjQuery Bài tập thực hành Phần I. Bài tập-36
Kế tiếp. Thêm một lớp CSS bằng jQuery
Mức độ khó của bài tập này là gì?
Dễ dàng trung bình khóKiểm tra kỹ năng Lập trình của bạn với bài kiểm tra của w3resource
Theo dõi chúng tôi trên Facebook và Twitter để cập nhật thông tin mới nhất.
- Xu hướng hàng tuần
- Bài tập lập trình Java cơ bản
- Truy vấn con SQL
- Bài tập cơ sở dữ liệu Adventureworks
- Bài tập cơ bản C# Sharp
- SQL COUNT() với sự khác biệt
- Bài tập chuỗi JavaScript
- Xác thực biểu mẫu HTML JavaScript
- Bài tập bộ sưu tập Java
- hàm SQL COUNT()
- Tham gia bên trong SQL
- Hàm JavaScript Bài tập
- Hướng dẫn Python
- Bài tập mảng Python
- Tham gia chéo SQL
- Bài tập về mảng Sharp trong C#
jQuery cung cấp ba phương thức addClass(), removeClass() và toggleClass() để thao tác với các lớp CSS của các phần tử
Chúng tôi đã chia cuộc thảo luận về thao tác CSS thành hai phần. Chương này sẽ thảo luận về thao tác với các lớp CSS và chương tiếp theo sẽ thảo luận về thao tác với các thuộc tính CSS
jQuery - Thêm các lớp CSS
jQuery cung cấp phương thức addClass() để thêm một lớp CSS vào (các) phần tử HTML phù hợp. Sau đây là cú pháp của phương thức addClass()
$(selector).addClass(className);Phương thức này nhận một tham số là một hoặc nhiều lớp được phân tách bằng dấu cách để thêm vào thuộc tính lớp của từng phần tử khớp. Có thể thêm nhiều lớp cùng một lúc, được phân tách bằng dấu cách, vào tập hợp các phần tử phù hợp, như vậy
$(selector).addClass("Class1 Class2");Tóm tắt
Xem xét nội dung HTML sau với các lớp CSS được xác định
jQuery addClass() Method
Hello
Goodbye
Bây giờ nếu chúng ta sử dụng phương thức addClass() như sau
$( ".hello" ).addClass("big" ); $( ".goodbye" ).addClass("small" );Nó sẽ tạo ra kết quả sau
jQuery addClass() Method
Hello
Goodbye
Xin lưu ý rằng phương thức addClass() không thay thế một lớp hiện có, thay vào đó, nó chỉ đơn giản là thêm lớp, nối nó vào bất kỳ lớp nào có thể đã được gán cho các phần tử
Thí dụ
Hãy thử ví dụ sau và kiểm chứng kết quả
________số 8_______jQuery - Xóa các lớp CSS
jQuery cung cấp phương thức removeClass() để xóa một lớp CSS hiện có khỏi (các) phần tử HTML phù hợp. Sau đây là cú pháp của phương thức removeClass()
$(selector).removeClass(className);Phương thức này nhận một tham số là một hoặc nhiều lớp được phân tách bằng dấu cách sẽ bị xóa khỏi thuộc tính lớp của từng phần tử phù hợp. Nhiều lớp có thể bị xóa cùng một lúc, được phân tách bằng dấu cách, khỏi tập hợp các phần tử phù hợp, như vậy
$(selector).removeClass("Class1 Class2");Tóm tắt
Xem xét nội dung HTML sau với các lớp CSS được xác định
jQuery removeClass() Method
Hello
Goodbye
Bây giờ nếu chúng ta sử dụng phương thức removeClass() như sau
$( ".hello" ).removeClass("big" ); $( ".goodbye" ).removeClass("small" );Nó sẽ tạo ra kết quả sau
$(selector).addClass("Class1 Class2"); 0Thí dụ
Hãy thử ví dụ sau và kiểm chứng kết quả
$(selector).addClass("Class1 Class2"); 1jQuery - Chuyển đổi các lớp CSS
jQuery cung cấp phương thức toggleClass() để chuyển đổi một lớp CSS trên (các) phần tử HTML phù hợp. Sau đây là cú pháp của phương thức toggleClass()
$(selector).addClass("Class1 Class2"); 2Phương thức này nhận một tham số là một hoặc nhiều lớp được phân tách bằng dấu cách sẽ được bật. Nếu một phần tử trong tập hợp các phần tử phù hợp đã có lớp, thì phần tử đó sẽ bị xóa;
Thí dụ
Hãy thử ví dụ sau và kiểm chứng kết quả
$(selector).addClass("Class1 Class2"); 3Tài liệu tham khảo HTML/CSS jQuery
Bạn có thể tham khảo đầy đủ tất cả các Phương thức jQuery để thao tác nội dung CSS và HTML tại trang sau. Tài liệu tham khảo HTML/CSS jQuery