[JQuery] Phần 6: Lấy nội dung và các thuộc tính trong jQuery

Cập nhật lần cuối: 09/04/2017 lúc 16:44:19

jQuery chứa nhiều phương thức có khả năng tương tác với các phần tử và thuộc tính HTML.

Thao tác jQuery DOM
Một trong những phần quan trọng của jQuery là khả năng thao tác với DOM. jQuery chứa nhiều phương thức liên quan đến DOM để dễ truy xuất và thao tác các phần tử và thuộc tính.

DOM là gì
DOM là viết tắt của từ Document Object Model, tạm dịch là Mô hình Đối tượng Tài liệu. DOM định nghĩa 1 tiêu chuẩn cho truy xuất tài liệu XML và HTML. Theo W3C: “DOM là giao diện ngôn ngữ trung gian và nền tảng cho phép các chương trình và kịch bản truy xuất động và cập nhật nội dung, cấu trúc và phong cách của 1 tài liệu.”

Lấy nội dung – text(), html(), and val()
Có 3 phương thức jQuery đơn giản, hữu dụng dành cho thao tác DOM là:

text() – Thiết lập hay trả về nội dung văn bản của các phần tử được chọn
html() – Thiết lập hay trả về nội dung của các phần tử được chọn (bao gồm HTML)
val() – Thiết lập hay trả về giá trị của các trường dữ liệu

Ví dụ sau mô tả cách lấy dữ liệu với phương thức text() và html(). Dữ liệu sẽ hiển thị theo kiểu văn bản hoặc là kiểu kèm theo mã HTML.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        alert("Text: " + $("#test").text());
    });
    $("#btn2").click(function(){
        alert("HTML: " + $("#test").html());
    });
});
</script>
</head>
<body>

<p id="test">Đây là <b>chữ in đậm</b> trong câu --- dammio.com</p>

<button id="btn1">Hiển thị văn bản</button>
<button id="btn2">Hiển thị mã HTML</button>

</body>
</html>

Ví dụ sau mô tả cách hiển thị văn bản nhập từ 1 text input.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("Value: " + $("#test").val());
    });
});
</script>
</head>
<body>

<p>Tên: <input type="text" id="test" value="Dammio Ta"></p>

<button>Hiển thị giá trị</button>

</body>
</html>

Lấy các thuộc tính – attr()
Phương thức attr() được dùng để lấy các giá trị thuộc tính. Ví dụ sau lấy giá trị của thuộc tính href của 1 liên kết.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        alert($("#dammio").attr("href"));
    });
});
</script>
</head>
<body>

<p><a href="https://www.dammio.com" id="dammio">https://www.dammio.com</a></p>

<button>Hiển thị đường dẫn https://www.dammio.com</button>

</body>
</html>

Kết luận: Bài viết đã trình bày cách lấy nội dung và các thuộc tính bằng cách dùng các phương thức trong jQuery.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Liên quan: [JQuery] Phần 5: Hiệu ứng ẩn và hiện --- hide() và show()

Trích dẫn bài viết

APA:
Dammio. (2017). [JQuery] Phần 6: Lấy nội dung và các thuộc tính trong jQuery. https://www.dammio.com/2017/04/08/jquery-phan-6-lay-noi-dung-va-cac-thuoc-tinh-trong-jquery.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[JQuery] Phần 6: Lấy nội dung và các thuộc tính trong jQuery}, year = {2017}, url = {https://www.dammio.com/2017/04/08/jquery-phan-6-lay-noi-dung-va-cac-thuoc-tinh-trong-jquery}, urldate = {2024-04-13} }

Kết nối