jQuery cung cấp một số phương thức để thao tác DOM một cách hiệu quả. Bạn không cần phải viết mã lớn và phức tạp để thiết lập hoặc lấy nội dung của bất kỳ phần tử HTML nào.
Thao tác DOM jQuery
jQuery cung cấp các phương thức như attr() , html() , text() và val() đóng vai trò là getters và setters để thao tác nội dung từ tài liệu HTML.
Mô hình đối tượng tài liệu (DOM) – là tiêu chuẩn W3C (World Wide Web Consortium) cho phép chúng tôi tạo, thay đổi hoặc xóa các phần tử khỏi tài liệu HTML hoặc XML.
Dưới đây là một số thao tác cơ bản mà bạn có thể thực hiện trên các phần tử DOM với sự trợ giúp của các phương thức thư viện chuẩn của jQuery –
- Trích xuất nội dung của một phần tử
- Thay đổi nội dung của một phần tử
- Thêm một phần tử con dưới một phần tử hiện có
- Thêm phần tử cha phía trên phần tử hiện có
- Thêm một phần tử trước hoặc sau một phần tử hiện có
- Thay thế một phần tử hiện có bằng một phần tử khác
- Xóa một phần tử hiện có
- Bao bọc nội dung bên trong một phần tử
Chúng ta đã đề cập đến phương thức attr() trong khi thảo luận về Thuộc tính jQuery và các phương thức thao tác nội dung DOM còn lại html() , text() và val() sẽ được thảo luận trong chương này.
jQuery – Get Content
jQuery cung cấp các phương thức html() và text() để trích xuất nội dung của phần tử HTML phù hợp. Sau đây là cú pháp của hai phương thức này:
$(selector).html(); $(selector).text();
Phương thức text() của jQuery trả về giá trị văn bản thuần túy của nội dung trong khi html() trả về nội dung bằng các thẻ HTML. Bạn sẽ cần sử dụng bộ chọn jQuery để chọn phần tử đích.
Ví dụ
Ví dụ sau cho thấy cách lấy nội dung bằng các phương thức jQuery text() và html() :
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#text").click(function(){
alert($("p").text());
});
$("#html").click(function(){
alert($("p").html());
});
});
</script>
</head>
<body>
<p>The quick <b>brown fox</b> jumps over the <b>lazy dog</b></p>
<button id="text">Get Text</button>
<button id="html">Get HTML</button>
</body>
</html>
Get Form Fields
Phương thức val() của jQuery được sử dụng để lấy giá trị từ bất kỳ trường biểu mẫu nào. Sau đây là cú pháp đơn giản của phương pháp này.
$(selector).val();
Ví dụ
Sau đây là một ví dụ khác cho thấy cách lấy giá trị của trường đầu vào bằng phương thức jQuery val():
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#b1").click(function(){
alert($("#name").val());
});
$("#b2").click(function(){
alert($("#class").val());
});
});
</script>
</head>
<body>
<p>Name: <input type="text" id="name" value="Zara Ali"/></p>
<p>Class: <input type="text" id="class" value="Class 12th"/></p>
<button id="b1">Get Name</button>
<button id="b2">Get Class</button>
</body>
</html>
jQuery – Set Content
Các phương thức html() và text() của jQuery có thể được sử dụng để đặt nội dung của phần tử HTML phù hợp. Sau đây là cú pháp của hai phương thức này khi chúng được sử dụng để đặt các giá trị:
$(selector).html(val, [function]); $(selector).text(val, [function]);
Đây là HTML của nội dung văn bản được đặt cho phần tử. Chúng tôi có thể cung cấp một chức năng gọi lại tùy chọn cho các phương thức này sẽ được gọi khi giá trị của phần tử sẽ được đặt.
Phương thức text() của jQuery đặt giá trị văn bản thuần túy của nội dung trong khi phương thức html() đặt nội dung bằng các thẻ HTML.
Ví dụ
Ví dụ sau đây cho thấy cách thiết lập nội dung của một phần tử bằng các phương thức jQuery text() và html() :
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#text").click(function(){
$("p").text("The quick <b>brown fox</b> jumps over the <b>lazy dog</b>");
});
$("#html").click(function(){
$("p").html("The quick <b>brown fox</b> jumps over the <b>lazy dog</b>");
});
});
</script>
</head>
<body>
<p>Click on any of the two buttons to see the result</p>
<button id="text">Set Text</button>
<button id="html">Set HTML</button>
</body>
</html>
Set Form Fields
Phương thức val() của jQuery cũng được sử dụng để đặt giá trị từ bất kỳ trường biểu mẫu nào. Sau đây là cú pháp đơn giản của phương thức này khi nó được sử dụng để đặt giá trị.
$(selector).val(val);
Ở đây val là giá trị được đặt cho trường đầu vào. Chúng tôi có thể cung cấp một chức năng gọi lại tùy chọn sẽ được gọi khi giá trị của trường sẽ được đặt.
Ví dụ
Sau đây là một ví dụ khác để chỉ ra cách thiết lập giá trị cho trường đầu vào bằng phương thức jQuery val():
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#b1").click(function(){
$("#name").val("Zara Ali");
});
$("#b2").click(function(){
$("#class").val("Class 12th");
});
});
</script>
</head>
<body>
<p>Name: <input type="text" id="name" value=""/></p>
<p>Class: <input type="text" id="class" value=""/></p>
<button id="b1">Set Name</button>
<button id="b2">Set Class</button>
</body>
</html>
jQuery – Replacement Elements
Phương thức replaceWith() của jQuery có thể được sử dụng để thay thế một phần tử DOM hoàn chỉnh bằng một phần tử HTML hoặc DOM khác. Sau đây là cú pháp của phương thức:
$(selector).replaceWith(val);
Đây val là những gì bạn muốn có thay vì phần tử ban đầu. Đây có thể là HTML hoặc văn bản đơn giản.
Ví dụ
Sau đây là một ví dụ trong đó chúng ta sẽ thay thế phần tử <p> bằng phần tử <h1> và sau đó, chúng ta sẽ thay thế phần tử <h1> bằng phần tử <h2>.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#b1").click(function(){
$("p").replaceWith("<h1>This is new heading</h1>");
});
$("#b2").click(function(){
$("h1").replaceWith("<h2>This is another heading</h2>");
});
});
</script>
</head>
<body>
<p>Click below button to replace me</p>
<button id="b1">Replace Paragraph</button>
<button id="b2">Replace Heading</button>
</body>
</html>
