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:24:34 PM

Bài 4 – jQuery truy cập DOM (DOM Traversing)



jQuery là một công cụ vô cùng mạnh mẽ. Nó cung cấp một lượng lớn đa dạng các phương thức truy cập DOM để giúp người lập trình lựa chọn các phần tử trong tài liệu HTML một cách ngẫu nhiên. Phần lớn các phương thức truy cập DOM của jQuery không làm thay đổi đối tượng jQuery mà chúng chỉ như các bộ lọc để lọc ra các phần tử dựa trên các điều kiện mà chúng ta đưa ra.


jQuery là một công cụ vô cùng mạnh mẽ. Nó cung cấp một lượng lớn đa dạng các phương thức truy cập DOM để giúp người lập trình lựa chọn các phần tử trong tài liệu HTML một cách ngẫu nhiên. Phần lớn các phương thức truy cập DOM của jQuery không làm thay đổi đối tượng jQuery mà chúng chỉ như các bộ lọc để lọc ra các phần tử dựa trên các điều kiện mà chúng ta đưa ra.

 

Toàn bộ các phương thức truy cập DOM của jQuery, các bạn có thể tham khảo tại đây.

Dươi đây là một số ví dụ về các phương thức truy cập DOM của jQuery.

Tìm ra phần tử dựa trên chỉ số quy định(index)

Cú pháp

1
$("element name/class/id").eq(index)

B1: Tạo file bai4.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Viet Object - jQuery</title>
<script type="text/javascript" language="javascript" src="js/jQuery v2.1.1.min.js"></script>
</head>
  
<body>
    <ul>
      <li>list item 1</li>
      <li>list item 2</li>
      <li>list item 3</li>
      <li>list item 4</li>
      <li>list item 5</li>
    </ul>
<script type="text/javascript">
$(document).ready(function() {
   $( "li" ).eq( 2 ).css( "background-color", "brown" );
});
</script>
</body>
</html>

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

jQuery truy cập DOM (DOM Traversing)

Chỉ số index được đánh số thứ tự từ số 0, vì vậy phần tử li thứ 3 sẽ có chỉ số index là 2.

Lọc ra các phần tử tương ứng

Cú pháp

1
$("element name/class/id").filter('condition')

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Viet Object - jQuery</title>
<script type="text/javascript" language="javascript" src="js/jQuery v2.1.1.min.js"></script>
</head>
  
<body>
    <ul>
      <li>list item 0</li>
      <li>list item 1</li>
      <li>list item 2</li>
      <li>list item 3</li>
      <li>list item 4</li>
    </ul>
<script type="text/javascript">
$(document).ready(function() {
   $( "li" ).filter( ":odd" ).css( "background-color", "brown" );
});
</script>
</body>
</html>

Ở đoạn code trên, chúng ta sẽ lọc ra các phần tử li tại vị trí lẻ(có chỉ số index là số lẻ) và style lại chúng.

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

jQuery truy cập DOM (DOM Traversing)