/Child Selector (“parent > child”)
Các hàm built-in02/10/2023

Child Selector (“parent > child”)

Lựa chọn Child Selector (“parent > child”)  là một trong các loại Selectors cơ bản được cung cấp sẵn trong thư viện jQuery được thiết kế để để chọn tất cả các phần tử con trực tiếp của một phần tử cha cụ thể dựa trên một selector cho trước.

1. Mối quan hệ “parent > child”

Mối quan hệ “parent > child” trong ngữ cảnh của CSS và jQuery chỉ định một quan hệ giữa phần tử cha và phần tử con trực tiếp của nó.

  • parent: Đây là phần tử cha mà bạn muốn chọn các phần tử con của nó.
  • > (child combinator): Đây là toán tử kết hợp trong CSS và jQuery, được sử dụng để chỉ định rằng các phần tử được chọn phải là con trực tiếp của phần tử cha.
  • child: Đây là phần tử con trực tiếp mà bạn muốn chọn.

Ví dụ, nếu bạn muốn chọn tất cả các phần tử span là con trực tiếp của một phần tử div, bạn sẽ sử dụng div > span. Điều này chỉ định rằng chỉ các phần tử span nằm trực tiếp bên trong các phần tử div sẽ được chọn.

Thể hiện CSS:

div > span { /* CSS styles for spans that are direct children of divs */ }

Thể hiện jQuery:

$('div > span').css('color', 'red'); // Chọn tất cả spans là con trực tiếp củ

2. Cú pháp

Child Selector ("parent > child") dùng để chọn tất cả các phần tử con trực tiếp (child) của một phần tử cha (parent) cụ thể.

Cú pháp:

$("parent > child")

Hoặc:

jQuery("parent > child")

Tham số:

  • parent: Một valid selector chỉ định phần tử cha mà chúng ta muốn chọn các phần tử con của nó.
  • child: Một selector để lọc các phần tử con mà chúng ta muốn chọn.

Kết quả trả về:

  • Child Selector sẽ trả về tất cả các phần tử con trực tiếp của phần tử cha (parent) mà thỏa mãn điều kiện của selector (child).

Phiên bản hỗ trợ:

  • Child Selector đã được giới thiệu trong phiên bản 1.0 của jQuery.
Child Selector ("parent > child")

3. Một số ví dụ

3.1. Dùng Child Selector tạo menu dọc (Vertical Menu)

Dưới đây là một ví dụ đơn giản về việc sử dụng Child Selector trong thư viện jQuery để tạo một menu dọc (Vertical Menu):

<!DOCTYPE html>
<html>
<head>
  <title>Vertical Menu Example</title>
  <style>
    .vertical-menu {
      width: 200px; /* Set the width of the vertical menu */
    }

    .vertical-menu a {
      background-color: #eee; /* Grey background color */
      color: black; /* Black text color */
      display: block; /* Make the links appear below each other */
      padding: 12px; /* Add some padding */
      text-decoration: none; /* Remove underline from links */
    }

    .vertical-menu a:hover {
      background-color: #ccc; /* Dark grey background on mouse-over */
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div class="vertical-menu">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="https://kienthuctoantap.com/">Contact</a>
  </div>

  <script>
    $(document).ready(function() {
      $('.vertical-menu > a').click(function() {
        // Add your click event handling here
        alert('Clicked on: ' + $(this).text());
      });
    });
  </script>
</body>
</html>

Sử dụng thư viện jQuery, chúng ta sử dụng Child Selector $('.vertical-menu > a') để chọn tất cả các phần tử <a> là con trực tiếp của phần tử có class “vertical-menu”.

Khi một mục menu được nhấp vào, chúng ta đã thêm một cửa sổ thông báo đơn giản để hiển thị mục menu đã được chọn. Trong ứng dụng thực tế, bạn có thể thêm các xử lý sự kiện khác mà bạn muốn khi một mục menu được chọn.

3.2. Dùng Child Selector tạo menu ngang (Horizontal Menu)

Dưới đây là một ví dụ về việc sử dụng Child Selector trong thư viện jQuery để tạo một menu ngang (Horizontal Menu):

<!DOCTYPE html>
<html>
<head>
  <title>Horizontal Menu Example</title>
  <style>
    .horizontal-menu {
      background-color: #f0f0f0;
      padding: 10px;
      display: flex;
      justify-content: space-around;
    }

    .horizontal-menu a {
      color: black;
      text-decoration: none;
      padding: 10px 20px;
    }

    .horizontal-menu a:hover {
      background-color: #ccc;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div class="horizontal-menu">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="https://kienthuctoantap.com/">Contact</a>
  </div>

  <script>
    $(document).ready(function() {
      $('.horizontal-menu > a').click(function() {
        // Add your click event handling here
        alert('Clicked on: ' + $(this).text());
      });
    });
  </script>
</body>
</html>

Sử dụng thư viện jQuery, chúng ta sử dụng Child Selector $('.horizontal-menu > a') để chọn tất cả các phần tử <a> là con trực tiếp của phần tử có class “horizontal-menu”.

Khi một mục menu được nhấp vào, chúng ta đã thêm một cửa sổ thông báo đơn giản để hiển thị mục menu đã được chọn. Trong ứng dụng thực tế, bạn có thể thêm các xử lý sự kiện khác mà bạn muốn khi một mục menu được chọn.

3.3. Dùng Child Selector tạo menu thả xuống (Dropdown Menu)

Dưới đây là một ví dụ về việc sử dụng Child Selector trong thư viện jQuery để tạo một menu thả xuống (Dropdown Menu):

HTML code:

<!DOCTYPE html>
<html>
<head>
  <title>Dropdown Menu Example</title>
  <style>
    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 120px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {
      background-color: #f1f1f1;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div class="dropdown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-content">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#services">Services</a>
      <a href="https://kienthuctoantap.com/">Contact</a>
    </div>
  </div>

  <script>
    // No need for child selector in this example
    // Dropdown menu is handled using hover event
    $(document).ready(function() {
      // Add your click event handling here
      $('.dropdown-content > a').click(function() {
        alert('Clicked on: ' + $(this).text());
      });
    });
  </script>
</body>
</html>

Trong ví dụ này, chúng ta tạo một menu thả xuống (dropdown menu) bằng cách sử dụng thẻ <div>, <button> và các thẻ <a> để tạo các mục menu. CSS được sử dụng để thiết kế giao diện người dùng của menu.

Sử dụng jQuery, chúng ta không cần Child Selector trong trường hợp này. Chúng ta sử dụng sự kiện hover để hiển thị menu thả xuống khi người dùng rê chuột vào nút.

Trong ứng dụng thực tế, bạn có thể thêm các xử lý sự kiện khác mà bạn muốn khi một mục menu được chọn.

3.4. Dùng Child Selector tạo menu thanh bên (Sidebar Menu)

Dưới đây là một ví dụ về việc sử dụng Child Selector trong thư viện jQuery để tạo một menu thanh bên (Sidebar Menu):

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Sidebar Menu Example with jQuery Child Selector</title>
  <style>
    .sidebar {
      height: 100%;
      width: 0;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }

    .sidebar a {
      padding: 10px 25px;
      text-decoration: none;
      font-size: 25px;
      color: white;
      display: block;
      transition: 0.3s;
    }

    .sidebar a:hover {
      color: #f1f1f1;
    }

    .sidebar .closebtn {
      position: absolute;
      top: 10px;
      left: 15px;
      font-size: 30px;
    }

    #main {
      transition: margin-left .5s;
      padding: 16px;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div class="sidebar" id="mySidebar">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
  </div>

  <div id="main">
    <button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>  
  </div>

  <script>
    function openNav() {
      // Thay đổi chiều rộng của thanh bên và độ lệch bên trái của nội dung chính
      $("body> #mySidebar").css("width", "250px");
      $("body> #main").css("margin-left", "250px");
    }

    function closeNav() {
      // Đặt lại chiều rộng của thanh bên và độ lệch bên trái của nội dung chính về 0
      $("body> #mySidebar").css("width", "0");
      $("body> #main").css("margin-left", "0");
    }
  </script>
</body>
</html>

Trong ví dụ này, chúng ta tạo một menu thanh bên (sidebar menu) bằng cách sử dụng thẻ <div> và các thẻ <a> để tạo các mục menu. CSS được sử dụng để thiết kế giao diện người dùng của menu.

Sử dụng jQuery không cần Child Selector trong trường hợp này. Chúng ta sử dụng JavaScript để điều khiển mở và đóng thanh bên khi người dùng nhấn vào nút. Trong ứng dụng thực tế, bạn có thể thêm các xử lý sự kiện khác mà bạn muốn khi một mục menu được chọn.

3.5. Dùng Child Selector tạo menu Mega (Hamburger Mega )

Mega menu là một loại menu mở rộng với các tùy chọn menu phức tạp và nhiều cấp độ. Dưới đây là một ví dụ đơn giản về việc sử dụng Child Selector trong jQuery để tạo một menu mega:

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Mega Menu Example with Child Selector</title>
  <style>
    .mega-menu {
      display: flex;
      flex-direction: column;
    }

    .category {
      display: flex;
      flex-direction: column;
      margin-right: 20px;
    }

    .category a {
      padding: 10px 0;
      font-weight: bold;
      color: #333;
    }

    .category a:hover {
      color: #ff5733;
    }

    .category:hover > .sub-menu {
      display: block;
      position: absolute;
      background-color: #f9f9f9;
      padding: 10px;
      margin-top: -10px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .sub-menu a {
      display: block;
      padding: 8px 0;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div class="mega-menu">
    <div class="category">
      <a href="#category1">Category 1</a>
      <div class="sub-menu">
        <a href="#subcategory1">Subcategory 1</a>
        <a href="#subcategory2">Subcategory 2</a>
        <a href="#subcategory3">Subcategory 3</a>
      </div>
    </div>

    <div class="category">
      <a href="#category2">Category 2</a>
      <div class="sub-menu">
        <a href="#subcategory4">Subcategory 4</a>
        <a href="#subcategory5">Subcategory 5</a>
        <a href="#subcategory6">Subcategory 6</a>
      </div>
    </div>

    <div class="category">
      <a href="#category3">Category 3</a>
      <div class="sub-menu">
        <a href="#subcategory7">Subcategory 7</a>
        <a href="#subcategory8">Subcategory 8</a>
        <a href="#subcategory9">Subcategory 9</a>
      </div>
    </div>
  </div>

  <script>
    $(document).ready(function() {
	  
	  // Mặc định ban đầu các menu con sẽ ẩn
	  $('.category > .sub-menu').hide();
	  
	  // Khi di chuột sẽ hiển thị menu
      $('.category').mouseenter(function() {
        $(this).find('> .sub-menu').show();  // Using Child Selector
      });

	  // Khi bỏ chuột menu sẽ ẩn
      $('.category').mouseleave(function() {
        $(this).find('> .sub-menu').hide();  // Using Child Selector
      });
    });
  </script>
</body>
</html>

Sử dụng jQuery, chúng ta sử dụng Child Selector $('.category') để chọn các mục danh mục (category). Khi người dùng rê chuột vào một mục danh mục, chúng ta hiển thị danh sách con (sub-menu) tương ứng. Khi người dùng rời khỏi mục danh mục, chúng ta ẩn danh sách con.

3.6. Thay thế Child Selector bằng các hàm children hoặc find

Để thay thế jQuery("parent > child") trong thư viện jQuery, bạn có thể sử dụng các phương thức như .children() hoặc .find() trong JQuery API của thư viện Jquery.

3.6.1. Sử dụng jQuery(“parent > child”) để tạo một context menu

Để tạo một context menu sử dụng jQuery("parent > child"), chúng ta sẽ xem xét cách sử dụng jQuery("parent > child") để chọn phần tử con trực tiếp khi người dùng click chuột phải.

Dưới đây là một ví dụ:

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Context Menu Example with jQuery("parent > child")</title>
  <style>
    .context-menu {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 5px 0;
    }

    .context-menu a {
      display: block;
      padding: 5px 15px;
      text-decoration: none;
      color: #333;
    }

    .context-menu a:hover {
      background-color: #ddd;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div id="box" style="width: 200px; height: 200px; background-color: #e0e0e0; position: relative;">
    Right-click here to show context menu bằng cách sử dụng jQuery ("parent > child")
    <div class="context-menu" id="contextMenu">
      <a href="#">Action 1</a>
      <a href="#">Action 2</a>
      <a href="#">Action 3</a>
    </div>
  </div>

  <script>
    $(document).ready(function() {
      $('#box').on('contextmenu', function(e) {
        e.preventDefault();  // Prevent the default right-click menu

        var contextMenu = jQuery("#box > .context-menu"); // Select context menu using jQuery("parent > child")
        contextMenu.css({
          top: e.clientY,
          left: e.clientX,
          display: 'block'
        });

        // Hide the context menu when clicking outside of it
        $(document).on('click', function() {
          contextMenu.hide();
        });
      });
    });
  </script>
</body>
</html>

Trong ví dụ này, khi người dùng click chuột phải vào hộp (div), context menu sẽ hiển thị tại vị trí chuột và ẩn khi nhấp chuột bất kỳ nơi nào khác. Chúng ta đã sử dụng jQuery("parent > child") để chọn context menu (#contextMenu) là một phần tử con trực tiếp của hộp (#box).

3.6.2. Thay jQuery(“parent > child”) bằng hàm children để tạo một context menu

Thường thì hàm children() và jQuery("parent > child") có tốc độ khá tương đương vì cả hai phương pháp đều dựa trên các cơ chế xử lý tương tự trong thư viện jQuery.

Tuy nhiên, đôi khi jQuery("parent > child") có thể nhanh hơn một chút. Việc sử dụng jQuery("parent > child") chỉ chọn những phần tử con trực tiếp (child) của phần tử mẹ (parent), trong khi children() có thể lấy tất cả các phần tử con, bất kể cấp độ.

Khi áp dụng cho một số lượng lớn phần tử, sự khác biệt về hiệu suất có thể trở nên đáng kể. Tuy nhiên, sự khác biệt này thường không quá lớn và trong hầu hết các tình huống, sự linh hoạt và độ đọc được của mã sẽ được ưu tiên hơn so với hiệu suất tối ưu cực độ

<!DOCTYPE html>
<html>
<head>
  <title>Context Menu Example with .children()</title>
  <style>
    .context-menu {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 5px 0;
    }

    .context-menu a {
      display: block;
      padding: 5px 15px;
      text-decoration: none;
      color: #333;
    }

    .context-menu a:hover {
      background-color: #ddd;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div id="box" style="width: 200px; height: 200px; background-color: #e0e0e0; position: relative;">
    Right-click here to show context menu sử dụng hàm children
    <div class="context-menu" id="contextMenu">
      <a href="#">Action children 1</a>
      <a href="#">Action children 2</a>
      <a href="#">Action children 3</a>
    </div>
  </div>

  <script>
    $(document).ready(function() {
      $('#box').on('contextmenu', function(e) {
        e.preventDefault();  // Prevent the default right-click menu

        var contextMenu = $(this).children('.context-menu');
        contextMenu.css({
          top: e.clientY,
          left: e.clientX,
          display: 'block'
        });

        // Hide the context menu when clicking outside of it
        $(document).on('click', function() {
          contextMenu.hide();
        });
      });
    });
  </script>
</body>
</html>

3.6.3. Thay jQuery(“parent > child”) bằng hàm find để tạo một context menu

Thường thì hàm find() và jQuery("parent > child") có hiệu suất tương đương nhau khi cùng tìm kiếm các phần tử con.

Hàm find() dùng để tìm tất cả các phần tử con phù hợp với một bộ chọn (selector) bất kỳ. Trong khi đó, jQuery("parent > child") tìm tất cả các phần tử con trực tiếp (child) của phần tử mẹ (parent). Cả hai phương pháp đều giúp tìm kiếm các phần tử con một cách hiệu quả và nhanh chóng.

Ví dụ context menu sử dụng hàm find thay cho jQuery("parent > child")

<!DOCTYPE html>
<html>
<head>
  <title>Context Menu Example with find()</title>
  <style>
    .context-menu {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 5px 0;
    }

    .context-menu a {
      display: block;
      padding: 5px 15px;
      text-decoration: none;
      color: #333;
    }

    .context-menu a:hover {
      background-color: #ddd;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div id="box" style="width: 200px; height: 200px; background-color: #e0e0e0; position: relative;">
    Right-click here to show context menu sử dụng hàm find
    <div class="context-menu" id="contextMenu">
      <a href="#">Action 1 with find</a>
      <a href="#">Action 2 with find</a>
      <a href="#">Action 3 with find</a>
    </div>
  </div>

  <script>
    $(document).ready(function() {
      $('#box').on('contextmenu', function(e) {
        e.preventDefault();  // Prevent the default right-click menu

        var contextMenu = $(this).find('.context-menu'); // Select context menu using find()
        contextMenu.css({
          top: e.clientY,
          left: e.clientX,
          display: 'block'
        });

        // Hide the context menu when clicking outside of it
        $(document).on('click', function() {
          contextMenu.hide();
        });
      });
    });
  </script>
</body>
</html>

Khi tìm kiếm một số lượng lớn phần tử con, sự khác biệt về hiệu suất có thể xuất hiện nhưng thường không quá đáng kể và phụ thuộc vào cách tối ưu hóa và cài đặt của trình duyệt cũng như cấu trúc DOM.

Related posts