Kết nối

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

11.276 lượt xem 
 Cập nhật lần cuối: 09/04/2017 lúc 16:44:19
Thể loại: JQuery, Thiết kế Web 

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()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.

Liên quan:  [JQuery] Phần 1: Giới thiệu về jQuery
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-09-30}
    }
Theo dõi
Thông báo của
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Phát
Phát
7 năm trước

web tốt nhất mà rank thấp quá, chúc trang này ngày càng phát triển

1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x