Trang chủ » Kho tài liệu » Hướng dẫn sử dụng JQuery


Cập nhật ngày: 4/23/2015 2:34:26 PM

Bài 6 – Các phương thức jQuery thao tác với DOM (DOM Manipulation Methods)



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ả. Điều đó có nghĩa là bạn không cần phải viết những đoạn code quá dài chỉ để chỉnh sửa các giá trị một thuộc tính của một phần tử hay để lấy ra các đoạn mã HTML từ một thẻ p hoặc thẻ div.


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ả. Điều đó có nghĩa là bạn không cần phải viết những đoạn code quá dài chỉ để chỉnh sửa các giá trị một thuộc tính của một phần tử hay để lấy ra các đoạn mã HTML từ một thẻ p hoặc thẻ div.

 

Thao tác với nội dung html bên trong một phần tử

Phương thức html() dùng để lấy ra nội dung hoặc gán một nội dung mới hoàn toàn bên trong một phần tử.
Cú pháp

1
2
selector.html(); //Lấy ra nội dung
selector.html(newContent); //Gán nội dung mới

B1: Tạo file bai6.html trong thư mục jQuery. Nhập đoạn code sau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Viet Object - jQuery</title>
<script type="text/javascript" language="javascript" src="js/jquery-2.1.0.min.js"></script>
</head>
 
<body>
<div id="content">
    <p>This is the content.</p>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        var theContent = $("#content").html(); //Lấy nội dung của thẻ div#content và gán vào biến theContent
         
    console.log("Nội dung mặc định của thẻ div#content là: "+theContent);
         
    $("#content").html("<p>This is the new content</p>"); //Gán nội dung mới vào thẻ div#content
    });
</script>
 
</body>
</html>

B2: Mở file với trình duyệt

Các phương thức jQuery thao tác với DOM

Loại bỏ một phần tử trên trang

Cú pháp

1
selector.remove();

B3: Nhập đoạn code sau vào file bai6.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Viet Object - jQuery</title>
<script type="text/javascript" language="javascript" src="js/jquery-2.1.0.min.js"></script>
<style>
  .div{ margin:10px;padding:12px;
         border:2px solid #666;
         width:60px;
       }
</style>
</head>
 
<body>
<p>Click vào các phần tử để xóa chúng:</p>
<div class="div" style="background-color:#3CC;"></div>
<div class="div" style="background-color:#6FC;"></div>
<div class="div" style="background-color:#C36;"></div>
<script type="text/javascript">
    $(document).ready(function() {
        $(".div").click(function () {
              $(this).remove();
    });
    });
</script>
 
</body>
</html>

B4: Mở file với trình duyệt

Các phương thức jQuery thao tác với DOM

Click vào một phẩn tử và nó biến mất

Các phương thức jQuery thao tác với DOM

Để tham khảo toàn bộ các phương thức thao tác với DOM, bạn xem thêm tại

http://api.jquery.com/category/manipulation/