Bài jQuery 20: Phương thức truyền tải trong jQuery

0
284

Xin chào các bạn, trong bài học ngày hôm nay mình sẽ giới thiệu đến các bạn Phương thức truyền tải trong jQuery.

Phương thức truyền tải là gì?

Các bộ selector trong jQuery mà chúng ta đã thấy cho đến nay chỉ cho phép chúng ta chọn các phần tử trong cây DOM. Nhưng có nhiều trường hợp bạn cần chọn một phần tử cha mẹ của chúng; đó là nơi các phương thức truyền tải hay còn gọi là Traversing DOM của jQuery phát huy tác dụng. Với các phương thức truyền tải này, chúng ta có thể đi lên, xuống và đi xung quanh cây DOM rất dễ dàng.

Traversing  là một trong những tính năng nổi bật của jQuery. Để tận dụng tối đa, bạn cần hiểu mối quan hệ giữa các thành phần trong cây DOM.

Đoạn code HTML trong ví dụ trên có thể được biểu thị bằng cây DOM như sau:

Biểu đồ trên cho thấy mối quan hệ cha / con giữa các yếu tố:

  • Phần tử <body> là cha mẹ của phần tử <div> và là tổ tiên của mọi thứ bên trong nó. Phần tử <div> kèm theo là cha mẹ của các phần tử <h1>, <p><ul> và là phần tử con của phần tử <body>.
  • Các phần tử <h1>, <p><ul> là anh em ruột, vì chúng có cùng cha mẹ.
  • Phần tử <h1> là phần tử con của phần tử <div> và là hậu duệ của phần tử <body>. phần tử này không có con.
  • Phần tử <p> là cha mẹ của phần tử <em>, con của phần tử <div> và là hậu duệ của phần tử <body>. Phần tử chứa <em> là phần tử con của phần tử <p> này và là hậu duệ của phần tử <div><body>.
  • Tương tự, phần tử <ul> là cha mẹ của các phần tử <li>, phần tử con của phần tử <div> và là hậu duệ của phần tử <body>. Các phần tử chứa <li> là phần tử con của phần tử <ul> này và là hậu duệ của phần tử <div><body>. Ngoài ra, cả hai yếu tố <li> đều là anh em ruột.

Phương thức truyền tải trong Cây DOM

Bây giờ bạn đã hiểu các mối quan hệ logic giữa các thành phần trong cây DOM. Trong các bài sắp tới, bạn sẽ tìm hiểu cách thực hiện các hoạt động duyệt ngang khác nhau như di chuyển lên, xuống và đi ngang trong cây DOM bằng cách sử dụng jQuery.

Kết luận

Như vậy trong bài học ngày hôm nay mình đã giới thiệu đến các bạn phương thức truyền tải trong jQuery. Trong bài tiếp theo Phương thức truyền tải Ancestor trong jQuery.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây