Các phương thức thiết lập thuộc tính Class trong jQuery

Các phương thức addClass(), removeClass(), toggleClass() trong jQuery được dùng để thêm/xóa giá trị của thuộc tính class của phần tử HTML.
Phương thức addClass() trong jQuery
Phương thức addClass() được dùng để thêm giá trị cho thuộc tính class cho phần tử HTML.

Cú pháp
$(“selector1,selector2,….,selectorN”).addClass(“class1 class2 …. classN”);
Ví dụ
Câu lệnh dưới đây sẽ thêm class có tên là “red” và “big” cho phần tử <h4> có id là “abc”, và phần tử <div>

$(“h4#abc, div”).addClass(“red big”);
Xem ví dụ
Phương thức removeClass() trong jQuery
Phương thức removeClass() được dùng để xóa giá trị của thuộc tính class của phần tử HTML.

Cú pháp
$(“selector1,selector2,….,selectorN”).removeClass(“class1 class2 …. classN”);
Ví dụ
Câu lệnh dưới đây sẽ xóa class có tên là “red” và “big” của phần tử <h4> có id là “abc”, và phần tử <div>

$(“h4#abc, div”).removeClass(“red big”);
Xem ví dụ
Phương thức toggleClass() trong jQuery
Phương thức toggleClass() được dùng để luân chuyển giữa việc thêm/xóa giá trị của thuộc tính class của phần tử HTML.

Cú pháp
$(“selector1,selector2,….,selectorN”).toggleClass(“class1 class2 …. classN”);
Ví dụ
Câu lệnh dưới đây sẽ luân chuyển giữa việc thêm/xóa class có tên là “red” và “big” của phần tử <h4> có id là “abc”, và phần tử <div>

$(“h4#abc, div”).toggleClass(“red big”);

Phương thức Mô tả
addClass() – Thêm tên lớp vào giá trị thuộc tính class của phần tử
after() – Thêm nội dung phía sau phần tử
append() – Thêm nội dung vào vị trí cuối cùng bên trong phần nội dung của phần tử
appendTo() – Thêm phần tử HTML vào vị trí cuối cùng bên trong phần nội dung của phần tử
attr() – Thiết lập thuộc tính cho phần tử, hoặc trả về giá trị thuộc tính của phần tử
before() – Thêm nội dung phía trước phần tử
clone() – Sao chép phần tử
css() – Thiết lập thuộc tính định dạng CSS cho phần tử
empty() – Xóa toàn bộ nội dung nằm bên trong phần tử
hasClass() – Kiểm tra xem giá trị thuộc tính class của phần tử có chứa tên lớp được chỉ định hay không
height() – Thiết lập (hoặc trả về) chiều cao phần content của phần tử
innerHeight() – Trả về chiều cao phần content + padding của phần tử
outerHeight() – Trả về chiều cao phần content + padding + border của phần tử
html() – Thiết lập (hoặc trả về) nội dung bên trong phần tử
insertAfter() – Thêm phần tử HTML phía sau phần tử
insertBefore() – Thêm phần tử HTML phía trước phần tử
offset() – Thiết lập (hoặc trả về) vị trí của phần tử (so với vị trí của phần tử gốc)
offsetParent() – Trả về phần tử tổ tiên được thiết lập thuộc tính position với giá trị khác static nằm gần phần tử nhất
position() – Trả về vị trí tương đối của phần tử (so với vị trí của phần tử gốc)
prepend() – Thêm nội dung vào vị trí đầu tiên bên trong phần nội dung của phần tử
prependTo() – Thêm phần tử HTML vào vị trí đầu tiên bên trong phần nội dung của phần tử
remove() – Xóa phần tử
removeAttr() – Xóa thuộc tính của phần tử
removeClass() – Xóa tên lớp khỏi giá trị thuộc tính class của phần tử
replaceAll() – Thay thế phần tử được chọn bởi một phần tử khác
replaceWith() – Thay thế phần tử được chọn bởi một nội dung khác
scrollLeft() – Thiết lập (hoặc trả về) vị trí của thanh cuộn nằm ngang của phần tử
scrollTop() – Thiết lập (hoặc trả về) vị trí của thanh cuộn nằm dọc của phần tử
text() – Thiết lập (hoặc trả về) nội dung văn bản bên trong phần tử
toggleClass() – Thực hiện luân phiên giữa việc thêm/xóa tên lớp khỏi giá trị thuộc tính class của phần tử
unwrap() – Xóa phần tử cha của phần tử
val() – Thiết lập (hoặc trả về) giá trị của phần tử (input, textarea, select)
width() – Thiết lập (hoặc trả về) chiều rộng phần content của phần tử
innerWidth() – Trả về chiều rộng phần content + padding của phần tử
outerWidth() – Trả về chiều rộng phần content + padding + border của phần tử
wrap() – Thiết lập phần tử cha cho phần tử
wrapInner() – Thiết lập phần tử cha cho phần nội dung của phần tử

Học JQuery