jQuery - Truyền qua DOM

jQuery là một công cụ rất mạnh cung cấp nhiều phương thức duyệt DOM để giúp chúng tôi chọn các phần tử trong tài liệu một cách ngẫu nhiên cũng như theo phương pháp tuần tự. Hầu hết các Phương thức truyền tải DOM không sửa đổi đối tượng jQuery và chúng được sử dụng để lọc ra các phần tử từ tài liệu dựa trên các điều kiện đã cho.

Tìm phần tử theo chỉ mục

Hãy xem xét một tài liệu đơn giản với nội dung HTML sau:

<html>
   <head>
      <title>The JQuery Example</title>
   </head>
	
   <body>
      <div>
         <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>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

  • Trên mỗi danh sách đều có chỉ mục riêng và có thể được định vị trực tiếp bằng cách sử dụng eq(index) như ví dụ dưới đây.

  • Mọi phần tử con đều bắt đầu chỉ mục của nó từ 0, do đó, mục danh sách 2 sẽ được truy cập bằng cách sử dụng$("li").eq(1) và như thế.

Thí dụ

Sau đây là một ví dụ đơn giản để thêm màu vào mục danh sách thứ hai.

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <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>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Lọc ra các phần tử

Các filter( selector )phương pháp này có thể được sử dụng để lọc ra tất cả các phần tử từ tập hợp các phần tử đã so khớp không khớp với (các) bộ chọn được chỉ định. Bộ chọn có thể được viết bằng bất kỳ cú pháp bộ chọn nào.

Thí dụ

Sau đây là một ví dụ đơn giản áp dụng màu cho các danh sách được liên kết với tầng lớp trung lưu -

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li class = "top">list item 1</li>
            <li class = "top">list item 2</li>
            <li class = "middle">list item 3</li>
            <li class = "middle">list item 4</li>
            <li class = "bottom">list item 5</li>
            <li class = "bottom">list item 6</li>
         </ul>
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Xác định vị trí các phần tử con cháu

Các find( selector )phương thức có thể được sử dụng để định vị tất cả các phần tử con của một loại phần tử cụ thể. Bộ chọn có thể được viết bằng bất kỳ cú pháp bộ chọn nào.

Thí dụ

Sau đây là một ví dụ chọn tất cả các phần tử <span> có sẵn bên trong các phần tử <p> khác nhau -

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Phương pháp lọc DOM trong JQuery

Bảng sau liệt kê các phương pháp hữu ích mà bạn có thể sử dụng để lọc ra các phần tử khác nhau từ danh sách các phần tử DOM -

Sr.No. Phương pháp & Mô tả
1 eq (chỉ số)

Giảm tập hợp các phần tử đã so khớp thành một phần tử duy nhất.
2 bộ lọc (bộ chọn)

Loại bỏ tất cả các phần tử khỏi tập hợp các phần tử đã so khớp không khớp với (các) bộ chọn được chỉ định.
3 bộ lọc (fn)

Loại bỏ tất cả các phần tử khỏi tập hợp các phần tử đã so khớp không khớp với chức năng đã chỉ định.
4 là (bộ chọn)

Kiểm tra lựa chọn hiện tại so với một biểu thức và trả về true, nếu ít nhất một phần tử của lựa chọn phù hợp với bộ chọn đã cho.
5 bản đồ (gọi lại)

Dịch một tập hợp các phần tử trong đối tượng jQuery thành một tập giá trị khác trong một mảng jQuery (có thể chứa hoặc không thể chứa các phần tử).
6 không (bộ chọn)

Loại bỏ các phần tử khớp với bộ chọn được chỉ định khỏi tập hợp các phần tử đã khớp.
7 lát (bắt đầu, [kết thúc])

Chọn một tập hợp con của các phần tử phù hợp.

Phương thức duyệt DOM trong JQuery

Bảng sau liệt kê các phương pháp hữu ích khác mà bạn có thể sử dụng để định vị các phần tử khác nhau trong DOM -

Sr.No. Phương pháp & Mô tả
1 thêm (bộ chọn)

Thêm nhiều phần tử hơn, được so khớp bởi bộ chọn đã cho, vào tập hợp các phần tử đã khớp.
2 và bản thân( )

Thêm lựa chọn trước đó vào lựa chọn hiện tại.
3 trẻ em ([bộ chọn])

Lấy một tập hợp các phần tử chứa tất cả các phần tử con duy nhất của mỗi tập hợp các phần tử đã so khớp.
4 gần nhất (bộ chọn)

Nhận một tập hợp các phần tử chứa phần tử mẹ gần nhất phù hợp với bộ chọn được chỉ định, bao gồm phần tử bắt đầu.
5 nội dung ()

Tìm tất cả các nút con bên trong các phần tử phù hợp (bao gồm cả các nút văn bản) hoặc tài liệu nội dung, nếu phần tử đó là iframe.
6 kết thúc( )

Hoàn nguyên hoạt động 'phá hủy' gần đây nhất, thay đổi tập hợp các phần tử phù hợp về trạng thái trước đó của nó.
7 tìm (bộ chọn)

Tìm kiếm các phần tử con phù hợp với các bộ chọn được chỉ định.
số 8 tiếp theo ([bộ chọn])

Nhận một tập hợp các phần tử chứa các anh chị em kế tiếp duy nhất của mỗi tập hợp các phần tử đã cho.
9 nextAll ([bộ chọn])

Tìm tất cả các phần tử anh chị em sau phần tử hiện tại.
10 offsetParent ()

Trả về tập hợp jQuery với phần tử gốc được định vị của phần tử được so khớp đầu tiên.
11 cha mẹ ([bộ chọn])

Lấy cha trực tiếp của một phần tử. Nếu được gọi trên một tập hợp các phần tử, cha trả về một tập hợp các phần tử cha trực tiếp duy nhất của chúng.
12 cha mẹ ([selector])

Lấy một tập hợp các phần tử chứa các phần tử tổ tiên duy nhất của tập hợp các phần tử đã so khớp (ngoại trừ phần tử gốc).
13 trước ([bộ chọn])

Nhận một tập hợp các phần tử chứa các phần tử trước đó duy nhất của mỗi tập hợp các phần tử đã so khớp.
14 trước tất cả ([bộ chọn])

Tìm tất cả các phần tử anh chị em ở phía trước phần tử hiện tại.
15 anh chị em ruột ([bộ chọn])

Nhận một tập hợp các phần tử chứa tất cả các anh chị em duy nhất của mỗi tập hợp các phần tử đã so khớp.
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved