close

Thao tác DOM với jQuery - Kỹ thuật và Ví dụ

Thao tác DOM với jQuery cho phép bạn sửa đổi, thêm, xóa hoặc tương tác với dữ liệu trên trang web bằng cách nhắm mục tiêu cấu trúc DOM. jQuery cung cấp các phương thức và hàm thuận tiện để thực hiện các tác vụ thao tác DOM.

Dưới đây là giải thích cho từng phần cùng với các ví dụ cụ thể:

 

Chọn phần tử

  • $("p"): Chọn tất cả các phần tử <p> trên trang.
  • $(".myClass"): Chọn tất cả các phần tử có lớp myClass.
  • $("#myElement"): Chọn phần tử có ID myElement.
  • $("parentElement").find(".childElement"): Chọn tất cả các phần tử con của parentElement có lớp childElement.

Ví dụ:

$("p").css("color", "red");

 

Thay đổi nội dung

  • $("#myElement").html("<b>Hello World</b>"): Đặt nội dung HTML cho phần tử có ID myElement.
  • $("p").text("New text"): Đặt nội dung văn bản cho tất cả các phần tử <p>.

Ví dụ:

$("p").text("New paragraph");

 

Thêm và xóa phần tử

  • $("ul").append("<li>New item</li>"): Thêm một phần tử <li> vào cuối danh sách không thắt chặt của phần tử <ul>.
  • $(".myClass").remove(): Xóa tất cả các phần tử có lớp myClass khỏi trang.

Ví dụ:

$("ul").append("<li>Item 4</li>");

 

Thay đổi thuộc tính và lớp

  • $("img").attr("src", "new-image.jpg"): Thay đổi giá trị thuộc tính src của tất cả các phần tử <img>.
  • $("#myElement").addClass("newClass"): Thêm lớp newClass cho phần tử có ID myElement.
  • $("#myElement").removeClass("oldClass"): Xóa lớp oldClass khỏi phần tử có ID myElement.

Ví dụ:

$("img").attr("alt", "New Image");

 

Xử lý sự kiện

$("button").click(function() { }): Đăng ký một hàm xử lý sự kiện khi phần tử <button> được nhấp chuột.

Ví dụ:

$("button").click(function() {
  alert("Button clicked!");
});

 

Hiệu ứng và hoạt ảnh

  • $("#myElement").hide(): Ẩn phần tử có ID myElement.
  • $("#myElement").show(): Hiển thị phần tử có ID myElement.
  • $("#myElement").fadeOut(): Thực hiện hiệu ứng mờ dần phần tử có ID myElement.
  • $("#myElement").fadeIn(): Thực hiện hiệu ứng hiển thị từ mờ dần của phần tử có ID myElement.

Ví dụ:

$("#myElement").fadeOut(1000, function() {
  console.log("Fade out complete");
});