Thao tác DOM trong jQuery
jQuery cung cấp các phương thức để thao tác với DOM một cách cực kỳ hiệu quả. Bạn không cần viết những đoạn code quá dài để sửa đổi giá trị thuộc tính của bất kỳ phần tử nào hoặc để trích (extract) các đoạn HTML code từ một thẻ p hoặc div. jQuery cung cấp các phương thức như ...
jQuery cung cấp các phương thức để thao tác với DOM một cách cực kỳ hiệu quả. Bạn không cần viết những đoạn code quá dài để sửa đổi giá trị thuộc tính của bất kỳ phần tử nào hoặc để trích (extract) các đoạn HTML code từ một thẻ p hoặc div.
jQuery cung cấp các phương thức như .attr(), .html(), .val() để thu nhận thông tin từ các phần tử DOM để sử dụng cho lần sau.
Thao tác nội dung trong jQuery
Phương thức html( ) nhận nội dung html (bên trong HTML) của phần tử đã so khớp đầu tiên.
Dưới đây là cú pháp của phương thức .html():
selector.html( )
Ví dụ
Ví dụ đơn giản sau sử dụng các phương thức .html() và .text(val). Trong đó, .html() thu nhận nội dung HTML từ đối tượng và sau đó phương thức .text(val) thiết lập giá trị của đối tượng bởi sử dụng tham số đã truyền.
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var content = $(this).html();
$("#result").text( content );
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; awidth:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id="result"> </span>
<div id="division" style="background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>
Nó sẽ cho kết quả:
Thay thế phần tử DOM trong jQuery
Bạn có thể thay thế hoàn toàn một phần tử DOM với các phần tử HTML hoặc DOM đã xác định. Phương thức replaceWith( content ) thực hiện mục đích này rất hiệu quả.
Sau đây là cú pháp:
selector.replaceWith( content )
Ở đây, content là những gì bạn muốn thay thế cho phần tử ban đầu. Nó có thể là HTML hoặc văn bản.
Ví dụ
Ví dụ đơn giản sau sẽ thay thế phần tử div với "<h1>JQuery is Great</h1>":
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).replaceWith("<h1>JQuery is Great</h1>");
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; awidth:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id="result"> </span>
<div id="division" style="background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>
Nó sẽ cho kết quả sau:
Gỡ bỏ các phần tử DOM trong jQuery
Có thể có một tình huống khi bạn muốn gỡ bỏ một hoặc nhiều phần tử DOM từ tài liệu. jQuery cung cấp hai phương thức để xử lý tình huống này:
Phương thức empty( ) gỡ bỏ tất cả node con từ tập hợp các phần tử đã so khớp, trong khi phương thức remove( expr ) gỡ bỏ tất cả các phần tử đã so khớp từ DOM.
Dưới đây là cú pháp:
selector.remove( [ expr ]) or selector.empty( )
Bạn có thể truyền tham số expr tùy ý để lọc tập hợp các phần tử cần gỡ bỏ.
Ví dụ
Trong ví dụ đơn giản, các phần tử được gỡ bỏ ngay sau khi chúng được click:
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).remove( );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; awidth:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id="result"> </span>
<div class="div" style="background-color:blue;"></div>
<div class="div" style="background-color:green;"></div>
<div class="div" style="background-color:red;"></div>
</body>
</html>
Nó sẽ cho kết quả sau:
Chèn các phần tử DOM trong jQuery
Có thể có tình huống khi bạn muốn chèn một hoặc nhiều phần tử DOM mới vào trong tài liệu đang tồn tại của bạn. jQuery cung cấp nhiều phương thức đa dạng để chèn các phần tử vào các vị trí khác nhau.
Phương thức after( content ) chèn content sau mỗi phần tử đã so khớp, trong khi phương thức before( content ) chèn content trước mỗi phần tử đã so khớp.
Dưới đây là cú pháp của các phương thức:
selector.after( content ) or selector.before( content )
Ở đây, content là những gì bạn muốn chèn. Nó có thể là HTML hoặc văn bản.
Ví dụ
Trong ví dụ sau, các phần tử div được chèn ngay trước phần tử được click:
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).before('<div class="div"></div>' );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; awidth:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id="result"> </span>
<div class="div" style="background-color:blue;"></div>
<div class="div" style="background-color:green;"></div>
<div class="div" style="background-color:red;"></div>
</body>
</html>
Nó sẽ cho kết quả sau:
Các phương thức thao tác DOM trong jQuery
Dưới đây liệt kê tất cả phương thức mà bạn có thể sử dụng để thao tác các phần tử DOM:
| STT | Phương thức & Miêu tả |
|---|---|
| 1 |
Chèn content sau mỗi phần tử đã so khớp |
| 2 |
Phụ thêm content tới bên trong mỗi phần tử đã so khớp |
| 3 |
Phụ thêm tất cả phần tử đã so khớp tới tập hợp phần tử đã cho khác |
| 4 |
Chèn content trước mỗi phần tử đã so khớp |
| 5 |
Mô phỏng các phần tử DOM đã so khớp, và tất cả các Event Handler của chúng, và chọn các mô phỏng đó |
| 6 |
Mô phỏng các phần tử DOM đã so khớp và chọn các mô phỏng đó |
| 7 |
Gỡ bỏ tất cả các node con từ tập hợp các phần tử đã so khớp |
| 8 |
Thiết lập các nội dung HTML của mỗi phần tử đã so khớp |
| 9 |
Nhận các nội dung HTML (HTML bên trong) của phần tử đã so khớp đầu tiên |
| 10 |
Chèn tất cả phần tử đã so khớp vào sau tập hợp các phần tử đã xác định khác |
| 11 |
Chèn tất cả phần tử đã so khớp vào trước tập hợp các phần tử đã xác định khác |
| 12 |
Thêm vào trước content tới bên trong mỗi phần tử đã so khớp |
| 13 |
Thêm vào trước tất cả phần tử đã so khớp tới tập hợp các phần tử đã xác định khác |
| 14 |
Gỡ bỏ tất cả phần tử đã so khớp từ DOM |
| 15 |
Thay thế các phần tử đã so khớp bởi Selector đã cho với các phần tử được so khớp |
| 16 |
Thay thế tất cả phần tử đã so khớp với các phần tử HTML hoặc DOM đã xác định |
| 17 |
Thiết lập các nội dung text của tất cả phần tử đã so khớp |
| 18 |
Nhận các nội dung text đã tổ hợp của tất cả phần tử đã so khớp |
| 19 |
Bao bọc (wrap) mỗi phần tử đã so khớp với phần tử đã xác định |
| 20 |
Wrap mỗi phần tử đã so khớp với nội dung HTML đã xác định |
| 21 |
Wrap tất cả phần tử trong tập hợp đã so khớp vào trong một phần tử bao bọc đơn (elem ở đây là phần tử DOM) |
| 22 |
Wrap tất cả phần tử trong tập hợp đã so khớp vào trong một phần tử bao bọc đơn (html là phần tử HTML) |
| 23 |
Wrap các nội dung con bên trong mỗi phần tử đã so khớp (bao gồm các node văn bản) với một phần tử DOM |
| 24 |
Wrap các nội dung con bên trong mỗi phần tử đã so khớp (bao gồm các node văn bản) với một cấu trúc HTML |
Loạt bài hướng dẫn học lập trình jQuery cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint.com
Follow fanpage của team hoặc facebook cá nhân Nguyễn Thanh Tuyền để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Các bài học jQuery khác tại VietJack:
