JS - Hierarchy và Visibility Selector

26/04/2019, 2:36 PM | 26/04/2019, 2:36 PM | 663 | 045

Nhóm Hierarchy Selector giúp lấy các thẻ HTML theo phân cấp của chúng, ta cùng tìm hiểu nhóm này và một số cách khác còn lại có thể lấy các thẻ HTML trong jQuery.
1. Danh sách Hierarchy Selector trong jQuery
Như đã biết thì jQuery có cú pháp lấy các Selector gần như tương tự CSS, bạn có thể thấy và so sánh với một số cú pháp dưới đây

Cú pháp	Ý nghĩa
$('parent > child')	Lấy tất cả các thẻ child là con trực tiếp của parent
$('parent child')	Lấy tất cả các thẻ child là hậu duệ của parent ( con, cháu... )
$('X + Y')	Lấy thẻ Y liền kề ngay sau X cùng cấp với X
$('X ~ Y')	Tương tự như $('X + Y') nhưng khác là $('X + Y') lấy phần tử đầu tiên còn $('X ~ Y') lấy tất cả các Y sau X

Một số ví dụ :
Đối màu viền cho các thẻ input đứng sau thẻ có class=my-class

Xem DEMO

 <script language="javascript">
       $(document).ready(function(){
              
            $('.my-class ~ input').css('border','1px solid blue');
              
       });
 </script>

Đối màu viền cho thẻ input duy nhất đứng kiền kề thẻ có class=my-class

Xem DEMO

 <script language="javascript">
       $(document).ready(function(){
              
            $('.my-class + input').css('border','1px solid blue');
              
       });
 </script>

2. Ngoài ra còn có nhóm Visibility Selector
:hidden selector
Chọn tất cả các thẻ đang là hidden, các thẻ được gọi là ẩn ( hidden ) thuộc các trường hợp sau :
- thẻ có thuộc tính CSS display=none
- thẻ có type=hidden
- thẻ có width , height được đặt rõ ràng thành 0.
- thẻ có thành phần cha bị ẩn nên cũng không được hiển thị
- các thẻ head, script, title, etc... cũng là :hidden
Các thẻ có visibility: hidden hoặc opacity: 0 không được tính là ẩn ( hidden )
Ví dụ :

Xem DEMO

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <style type="text/css">
              div {
                width: 70px;
                height: 40px;
                background: pink;
                margin: 5px;
                float: left;
              }
              span {
                display: block;
                clear: left;
                color: red;
              }
            .starthidden {
              display: none;
            }
          
        </style>
        <script language="javascript">
            $(document).ready(function(){
              
                $("#01").click(function(){
                   // lây các thẻ là hidden trong body
                   var hiddenElements = $( "body" ).find( ":hidden" );
                   // hiển thị thẻ div đang ẩn
            	   $("div:hidden").show(2000);
                   // gán thuộc tính thẻ input đang hidden thành text
                   $("input:first").attr("type","text");
                
                    $("span").text("Có tất cả : " + hiddenElements.length + " thẻ ẩn");
                });
                
            });
        </script>
    </head>
    <body>
     
        <div class="starthidden">bị ẩn</div>
        <div></div>
        <div class="starthidden">bị ẩn</div>
        <div></div>
        <input type="hidden" value="bị ẩn">
        <span></span>
        <input id="01" type="button" value="Hiển thị thẻ ẩn lên">
        <script>//script cũng được tính là thẻ hidden</script>
    </body>
</html>

:visible Selector
Các thẻ được coi là visible nếu chúng chiếm không gian trong tài liệu, các thẻ có chiều rộng width và chiều cao height lớn hơn 0. Các thẻ có visibility: hidden hoặc opacity: 0 vẫn được coi là visible vì vẫn chiếm không gian trên tài liệu.
Visible Selector ngược với Hidden Selector vì thế các thẻ được gọi là hidden sẽ không được chọn là visible và ngược lại.
Ví dụ :

Xem DEMO

<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <style type="text/css">
              div {
                width: 50px;
                height: 40px;
                border: 3px outset green;
                margin: 5px;
                float: left;
              }
            .starthidden {
              display: none;
            }
          
        </style>
        <script language="javascript">
            $(document).ready(function(){
              
                $("#01").click(function(){
                   
                   // hiển thị thẻ div đang ẩn
            	   $("div:hidden").show(500);
                  
                });
                // khi click vào các thẻ là visible sẽ đổi màu
                $("div:visible").click(function(){
                   
                    $( this ).css( "background", "pink" );
                   
                });
            });
        </script>
    </head>
    <body>
     
        <div class="starthidden">bị ẩn</div>
        <div></div>
        <div class="starthidden">bị ẩn</div>
        <div></div>
        <div></div>
        <span></span>
        <input id="01" type="button" value="Hiển thị thẻ ẩn lên">
        
    </body>
</html>

Để có giải thích chi tiết bạn có thể vào trang https://api.jquery.com/category/selectors/ để xem thêm.