Hôm nay chúng ta sẽ tìm hiểu một số phương thức trong jQuery giúp chúng ta lấy nội dung, sao chép và thay thế nội dung của các thành phần HTML.
Lấy giá trị của các thành phần HTML
.html()
Phương thức .html() có 2 tác dụng
1, Lấy toàn bộ nội dung của thành phần tìm được bao gồm cả các thẻ HTML
<div id="demo"> |
<p>Đoạn văn bản 1</p> |
<p>Đoạn văn bản 2</p> |
</div> |
Đoạn mã sau sẽ lấy toàn bộ giá trị của thành phần div#demo bao gồm cả các thẻ <p>
var rs = $("#demo").html(); |
Kết quả biến rs có giá trị như sau:
<p>Đoạn văn bản 1</p> |
<p>Đoạn văn bản 2</p> |
2, Khi phương thức .html() nhận vào một tham số, nó sẽ thay thế nội dung của thành phần tìm được bằng một nội dung mới tương ứng với nội dung của tham số
Tiếp tục với ví dụ trên, ta sử dụng phương thức .html() như sau:
$("#demo").html('<p>Đoạn văn bản được thay thế</p>'); |
Kết quả đoạn mã ban đầu sẽ trở thành như sau:
<div id="demo"> |
<p>Đoạn văn bản được thay thế</p> |
</div> |
.text()
Phương thức .text() cũng có 2 tác dụng tương tự .html(), chỉ khác là phương thức .text() sẽ lấy hoặc thêm vào các giá trị text (không bao gồm các thẻ HTML).
var rs = $("#demo").text(); |
Kết quả biến rs sẽ có giá trị là:
Đoạn văn bản 1 |
Đoạn văn bản 2 |
Như vậy ta nhận thấy rằng, thẻ p đã được loại bỏ khi sử dụng phương thức .text()
Tương tự khi sử dụng phương thức .text() để thay thế giá trị, tất cả các thẻ HTML cũng không được hiện thị, và nó sẽ được xem như là một chuỗi trong giá trị thay thế
$("#demo").text('<p>Đoạn văn bản được thay thế</p>'); |
Kết quả khi chạy trên trình duyệt, cặp thẻ p cũng được xem là chuỗi và hiển thị lên trình duyệt
<p>Đoạn văn bản được thay thế</p>
Thay thế giá trị của các phần tử tìm được
Ngoài .html() và .text(), jQuery còn cung cấp một số phương thức khác để thay thế giá trị của các thành phần HTML
.replaceWith(giá trị thay thế)
Giá trị thay thế có thể là text hoặc các thành phần HTML
Xét tiếp ví dụ trên, chúng ta có thể thay thế giá trị của thẻ div#demo như sau
$("#demo").replaceWith('<p>Đoạn văn bản được thay thế</p>'); |
Kết quả đoạn mã ban đầu sẽ trở thành như sau:
<div id="demo"> |
<p>Đoạn văn bản được thay thế</p> |
</div> |
.replaceAll(target)
Tác dụng của replaceAll() cũng tương tự như replaceWith(), nhưng cách khai báo thì lại hơn khác.
.replaceAll cho phép chọn một nội dung, hoặc nội dung của thành phần nào đó và gán cho một thành phần đích (target)
1, Thay thế thành phần đích bằng một nội dung mới
$('<p>Đoạn văn bản được thay thế</p>').replaceAll("#demo"); |
2, Lấy nội dung của một thành phần khác, và thay thế nội dung tìm được cho thành phần đích
Đoạn mã sau sẽ lấy nội dung của thẻ h1.source để thay thế cho thành phần có id #demo
$('h1.source').replaceAll("#demo"); |
KẾT LUẬN
Bên trên là một số phương thức của jQuery để lấy giá trị, thay thế giá trị của các thành phần HTML dựa vào jQuery selector, nó được ứng dụng rất nhiều trong kỹ thuật lập trình website. Bạn hãy thực hành những ví dụ trên để nắm vững hơn về kiến thức cũng như cách triển khai code.
Bài học tiếp theo chúng ta sẽ cùng tìm hiểu một số phương thức thao tác với thuộc tính của các thẻ HTML, lấy và thay đổi giá trị của các phần tử Form với jQuery.
