Review: DOM modification with jQuery

Khi bạn đã tìm thấy một tập hợp các phần tử bằng hàm jQuery, bạn có thể thay đổi chúng bằng nhiều phương thức khác nhau.

Đặt văn bản bên trong của họ với text():
$("h1").text("All about cats"); (Xem ví dụ)

Đặt html bên trong của chúng với html():
$("h1").html("I <strong>love</strong> cats"); (Xem ví dụ)

Đặt thuộc tính với attr():
$(".dog-pic").attr("src", "dog.jpg");
$(".google-link").attr("href", "http://www.google.com"); (Xem ví dụ)

Thay đổi kiểu CSS bằng css():
$("h1").css("font-family", "monospace");
$("h1").css({"font-family": "monospace", "color": "red"}); (Xem ví dụ)

Thêm một tên lớp với addClass():
$("h1").addClass("warning");

Bạn cũng có thể tạo các phần tử mới từ đầu bằng cách chuyển một chuỗi HTML vào hàm jQuery:
var $p = $("<p>");

Nếu bạn muốn, bạn có thể chuyển qua HTML đầy đủ, bao gồm nội dung thẻ, thuộc tính và kiểu.
var $p = $('<p style="color:red;">I love people who love cats.</p>');

Khi bạn tạo một phần tử, bạn có thể sửa đổi nó bằng bất kỳ phương thức nào ở trên:
$p.addClass("warning");

Sau đó, bạn có thể nối nó vào một phần tử hiện có bằng cách sử dụng append():
$("#main-div").append($p); (Xem ví dụ)

Bạn cũng có thể chèn nó vào trang bằng cách sử dụng (Xem ví dụ) hoặc (Xem ví dụ) .prepend() appendTo()

Đọc tài liệu jQuery để biết thêm chi tiết về từng phương thức này, theo các tên phương thức được liên kết ở trên. Chúng tôi sẽ không thể bao quát mọi thứ ở đây và khi các thực tiễn tốt nhất về phát triển web thay đổi nhanh chóng, bạn sẽ cần phải đọc tài liệu tốt để cập nhật những thông tin mới nhất và tốt nhất. Thật tốt khi bắt đầu làm việc với kỹ năng đó ngay bây giờ!