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


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


Thao tác DOM jQuery

Một phần rất quan trọng của jQuery là khả năng thao túng 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 = Mô hình đối tượng tài liệu

DOM xác định tiêu chuẩn để truy cập các tài liệu HTML và XML:

"Mô hình đối tượng tài liệu W3C (DOM) là một nền tảng và giao diện ngôn ngữ trung lập cho phép các chương trình và tập lệnh tự động truy cập và cập nhật nội dung, cấu trúc và kiểu của một tài liệu. "


Nhận 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 các phần tử đã chọn
  • html() - Đặt hoặc trả về nội dung của các phần tử đã chọn (bao gồm cả đánh dấu 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 bằng jQuery text()html()các phương thức:

Thí 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 giá trị của một trường đầu vào bằng val()phương thức jQuery:

Thí dụ

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


Nhận thuộc tính - attr ()

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

Ví dụ sau minh họa cách lấy giá trị của thuộc tính href trong một liên kết:

Thí dụ

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

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


Bài tập jQuery

Kiểm tra bản thân với các bài tập

Bài tập:

Sử dụng phương thức jQuery để trả về nội dung văn bản của phần tử <div>.

$("div").();


Tham chiếu HTML jQuery

Để có cái nhìn tổng quan đầy đủ về tất cả các phương thức jQuery HTML, vui lòng truy cập Tham chiếu HTML / CSS jQuery của chúng tôi .