jQuery chứa các phương thức mạnh mẽ để thao tác các phần tử và thuộc tính HTML.

Thao tác jQuery DOM

Một phần rất quan trọng của jQuery là khả năng thao tác DOM.

jQuery đi kèm với một loạt các phương thức liên quan đến DOM giúp dễ dàng truy cập và thao tác các phần tử và thuộc tính.

DOM = Document Object Model

DOM định nghĩa một tiêu chuẩn để truy cập các tài liệu HTML và XML.

Lấy nội dung - text(), html(), và val()

Ba phương thức jQuery đơn giản nhưng hữu ích để thao tác DOM là:

• text() - Đặt hoặc trả về nội dung văn bản của phần tử được chọn
• html() - Đặt hoặc trả về nội dung của phần tử được chọn (bao gồm thẻ HTML)
• val() - Đặt hoặc trả về giá trị của các trường biểu mẫu

Ví dụ sau minh họa cách lấy nội dung với phương thức text() và html():

Ví dụ

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

Ví dụ sau minh họa cách lấy nội dung với phương thức val():

Ví dụ

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

Lấy giá trị thuộc tính - attr()

Phương thức attr() được sử dụng để lấy giá trị của thuộc tính.

Ví dụ sau đây minh họa cách lấy giá trị của thuộc tính href trong một link:

Ví dụ

$("button").click(function(){
  alert($("#w3s").attr("href"));
});