Tìm người thân (Bài 3)

Mặt dù là các phương thức quét qua các thành phần của DOM, nhưng nó có một sự gắng bó riêng mà có lẽ không nên nằm chung với filter trong bài 2. Bài 1 đã có giới thiệu nhưng mới chỉ dừng lại ở đó mà chưa có ví dụ cụ thể giúp dễ hình dung hơn. Mình vừa ý với cái tiêu đề bài này, vì qua nó các bạn có thể định hình được một nhóm các phương thức mà khi gặp các trường hợp trong thực tế bạn sẽ nghỉ ngay đến việc dùng nó và không nhầm lẫn vào đâu được.

Trong phần này mình sẽ trình bày với các bạn một số phương thức để chọn các phần tử có liên quan họ hàng với nhau:
.next() : chọn phần tử cùng cấp và nằm kế sau nó (chọn thằng em sinh kề sau nó)
.nextAll() : chọn tất cả phần tử cùng cấp và nằm sau nó (chọn lũ em của nó)
.prev() : chọn phần tử cùng cấp và nằm kế trước nó (chọn thằng anh sinh kế trước nó)
.prevAll() : chọn tất cả phần tử cùng cấp và nằm trước nó (chọn lũ anh của nó)
.andSelf() : và chọn chính nó
.parent() : chọn phần tử cha của nó (chứa nó)
.children() : chọn các phần tử con của nó (nó chứa)
.find(<selector>) : tìm phần tử theo <selector>
.end() : (đây là phương thức mình muốn bạn tự tìm hiểu, người siêng năng tìm hiểu xứng đáng biết nhiều hơn)

Để cho dễ hiểu bài, mình đã tạo sẵn 1 mã file HTML. Bạn chỉ cần tạo một file HTML tên bất kỳ *.html copy code bên dưới paste vào và save lại chạy thử. Công việc của bạn chỉ cần là bỏ lần lượt các dấu // phía trước từng dòng trong đoạn jQuery và refresh trình duyệt để coi sự thay đổi (chú ý bạn nên xem từng dòng 1 nhé, không bỏ // hết 1 lượt nhiều dòng sẽ chẳng thể xem được gì đâu).

Học phải đi đôi với hành, lý thuyết suông luôn luôn khó hiểu, dù có hiểu rồi cũng sẽ chóng quên.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <title>Ví dụ tìm người thân jQuery</title>

        <style type="text/css">
          .author {
             color:gray;
          }
          .ongba {
             color: red;
             font-weight:bold;
           border: 1px solid red;
           background-color: white;
           margin: 10px;
          }
          .chame {
             color: blue;
           border: 1px solid blue;
           background-color: white;
           margin: 10px;
          }
          .con {
             color: green;
           border: 1px solid green;
           background-color: white;
           margin: 10px;
          }
          .chau {
             color: gray;
           border: 1px solid gray;
           background-color: white;
           margin: 10px;
          }     
         .highlight {
             background-color: #CCFF99;
          }
       </style>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
       <script type="text/javascript">
       $(document).ready(function() {
          //$('#ongba').addClass('highlight');

         
          ////============ Tìm thành phần ngang cấp (anh em) ==============
         
          //$('#chame1').addClass('highlight');
          //$('#chame1').next().addClass('highlight');
          //$('#chame1').next().next().addClass('highlight');
          //$('#chame1').nextAll().addClass('highlight');

          //$('#chame2').addClass('highlight');
          //$('#chame2').next().addClass('highlight');
          //$('#chame2').prev().addClass('highlight');
         
          //$('#chame3').addClass('highlight');
          //$('#chame3').prev().addClass('highlight');
          //$('#chame3').prev().prev().addClass('highlight');
          //$('#chame3').prevAll().addClass('highlight');

          //$('#chau9').addClass('highlight'); //nó
          //$('#chau9').prev().addClass('highlight'); //anh kề nó
          //$('#chau9').next().addClass('highlight'); //em kề nó
          //$('#chau9').prevAll().addClass('highlight'); //lũ anh của nó
          //$('#chau9').nextAll().addClass('highlight'); //lũ em của nó
          //$('#chau9').nextAll().andSelf().addClass('highlight'); //lũ em của nó và nó


          ////============ Tìm phần tử chứa nó (cha nó) ==============
         
          //$('#chau9').addClass('highlight'); //nó
          //$('#chau9').parent().addClass('highlight'); //cha nó
          //$('#chau9').parent().andSelf().addClass('highlight'); //cha nó và nó


          ////============ Tìm phần tử nó chứa (con nó) ==============
       
          //$('#chame1').addClass('highlight'); //nó
          //$('#chame1').children().addClass('highlight'); //con nó
          //$('#chame1').children().children().addClass('highlight'); //cháu nó
         
          //$(".chau").addClass('highlight'); //tất cả các .chau
          //$("#chame2").find(".chau").addClass('highlight'); //chỉ .chau của #chame2

          ////.... bạn tự test thêm để biết nhé

       });
       </script>
      </head>

      <body> 
        <h1>Ví dụ tìm người thân jQuery</h1>
        <div class="author" id="author">Biên soạn: <b>pn2design</b></div>
       <div id="ongba" class="ongba">
          Ong ba
          <div id="chame1" class="chame">
             Cha me 1
             <div id="con1" class="con">
                Con 1
                <div id="chau1" class="chau">Chau 1</div>
             </div><!--end #con1-->
             <div id="con2" class="con">
                Con 2
                <div id="chau2" class="chau">Chau 2</div>
                <div id="chau3" class="chau">Chau 3</div>
                <div id="chau4" class="chau">Chau 4</div>
             </div><!--end #con2-->
             <div id="con3" class="con">
                Con 3
                <div id="chau5" class="chau">Chau 5</div>
                <div id="chau6" class="chau">Chau 6</div>
             </div><!--end #con3-->
          </div><!--end #chame1-->
          <div id="chame2" class="chame">
             Cha me 2
             <div id="con4" class="con">
                Con 4
                <div id="chau7" class="chau">Chau 7</div>
                <div id="chau8" class="chau">Chau 8</div>
                <div id="chau9" class="chau">Chau 9</div>
                <div id="chau10" class="chau">Chau 10</div>
             </div><!--end #con4-->
          </div><!--end #chame2-->
          <div id="chame3" class="chame">
             Cha me 3
             <div id="con5" class="con">
                Con 5
                <div id="chau11" class="chau">Chau 11</div>
                <div id="chau12" class="chau">Chau 12</div>
             </div><!--end #con5-->
          </div><!--end #chame3-->
       </div><!--end #ongba-->
      </body>
    </html>

Bài cùng chuyên mục

Phản hồi mới nhất
Video
Top Rate
Xem nhiều nhất

Chủ đề đang thảo luận trong diễn đàn

Xem tiếp