jQuery lấy nội dung và thuộc tính

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

Thao tác DOM bằng jQuery

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

jQuery cung cấp một loạt các phương pháp liên quan đến DOM, giúp việc truy cập và thao tác phần tử và thuộc tính trở nên dễ dàng.

Lưu ý:DOM = Document Object Model (Đ mô hình tài liệu)

DOM = Document Object Model (Đ mô hình tài liệu)

“W3C Document Object Model (DOM) là một giao diện độc lập với nền tảng và ngôn ngữ, cho phép các chương trình và kịch bản truy cập và cập nhật nội dung, cấu trúc và phong cách của tài liệu một cách động.”

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

Ba phương pháp jQuery đơn giản và实用 để thao tác DOM:

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

Dưới đây là ví dụ về cách lấy nội dung bằng phương pháp jQuery text() và html():

Mô hình

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

Thử ngay

Dưới đây là ví dụ về cách lấy giá trị của trường nhập liệu bằng phương pháp jQuery val():

Mô hình

$("#btn1").click(function(){
  alert("Giá trị: " + $("#test").val());
});

Thử ngay

Lấy thuộc tính - attr()

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

Dưới đây là ví dụ về cách lấy giá trị thuộc tính href của liên kết:

Mô hình

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

Thử ngay

Chương tiếp theo sẽ giải thích cách thiết lập (thay đổi) nội dung và giá trị thuộc tính.

Tài liệu tham khảo jQuery HTML

Nếu cần thông tin chi tiết về các phương pháp jQuery HTML, vui lòng truy cập tài liệu tham khảo sau: