Home > Web > Traversing – Phương pháp di chuyển trong DOM

Traversing – Phương pháp di chuyển trong DOM

Các jQuery selector cho phép chúng ta chọn một tập hợp các phần tử khi chúng ta di chuyển ngang qua hoặc dọc xuống cây DOM và chọn lọc kết quả. Ngoài ra jQuery còn cung cấp cho chúng ta thêm những phương pháp để giúp chúng ta có thể đi lên, đi xuống, ngang dọc hoặc xung quanh cây DOM rất dễ dàng.

Một số phương pháp mà jQuery giới thiệu được chuyển sang từ các selector riêng của jQuery.

1. .add()

Phương thức add() cho phép thêm vào các selector giúp chúng ta bổ sung các phần tử để thao tác.

Các dạng sử dụng phương thức add():

  • .add(selector)
  • .add(elements)
  • .add(html)
  • .add(jQuery object)
  • .add(selector,context)

Ví dụ sau sẽ tìm tất cả các thẻ div và thiết lập border cho nó. Sau đó sẽ add tất cả các đoạn văn ( thẻ p ) vào đối tượng jQuery để thiết lập cho nó background màu vàng.

<!DOCTYPE html>
<html>
    <head>
    <title></title>
        <style type="text/css">
           div 
           { 
               width:60px; height:60px; margin:10px; float:left; 
           }
           p { clear:left; font-weight:bold; font-size:16px; 
           color:blue; margin:0 10px; padding:2px; }
       </style>
       <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <p>Added this... (notice no border)</p>
        <script type="text/javascript">
          $("div").css("border", "2px solid red")
             .add("p")
             .css("background", "yellow");
        </script>
    </body>
</html>

2. .filter()

Phương thức .filter() cho phép lọc các phần tử phù hợp với bộ chọn để áp dụng các tác vụ. Đặc biệt .filter() cho phép nhận 1 hàm làm tham số của nó.

Các dạng sử dụng phương thức .filter()

  • .filter(selector)
  • .filter(function(index))
  • .filter(element)
  • .filter(jQuery object)

Xét lại ví dụ chọn phần tử chẵn/lẻ, giả sử bạn có tài liệu HTML sau :

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

Để chọn ra các li có index lẻ (Item 2 và Item4) để đặt cho nó có chữ màu đỏ :

  • Sử dụng jQuery Selector : $(“ul li:odd”).css({color:”red”});
  • Sử dụng .filter(): $(“ul li”).filter(“:odd”).css({color:”red”});

Chúng ta có thể hiểu như sau : Tìm tất cả các phần tử li là con của ul, sau đó lọc và giữ lại các phần tử li có chỉ số lẻ để thao tác.

Ngoài ra bạn có thể viết theo cách sau cũng cho kết quả tương tự :

$(‘ul li’).filter(function(index){
    return index %2 != 0; // trả về các chỉ số lẻ
}).Css(color,’red’);

Điểm khác là ở đây .filter() nhận 1 hàm làm tham số của nó, trong hàm này ta sẽ xử lý để trả về các chỉ số lẻ của các phần tử.

3. .find()

Phương thức .find() cho phép tìm các con cháu của mỗi phần tử trong tập hợp hiện tại, lọc bởi một selector, jQuery object hay element.

Các dạng sử dụng phương thức .find()

  • .find(selector)
  • .find(jQuery object)
  • .find(element)

Cũng với yêu cầu của ví dụ trên, bạn có thể làm như sau :

$(“ul”).find(“li:odd”).css(color,”red”);

Đoạn code trên rất rõ ràng : trước tiên chọn phần tử ul, sau đó tìm các phần tử con li có chỉ số lẻ và hiển thị với màu đỏ.

4. .parent(), .children(), .next(), .nextAll(), .nextUntil(), .prev(), .prevAll, .prevUntil(), .siblings(), .andSelft(), .parents(), .closest(), .offsetParent()

Các phương thức này giúp chúng ta di chuyển xung quanh DOM một cách hiệu quả với selector đã khởi tạo.

  • .parent(): di chuyển lên một cấp về thành phần cha
  • .children([selector]): chọn tất cả các phần tử con, tùy chọn lọc theo selector được truyền vào
  • .next(): di chuyển đến phần tử phía sau cùng cấp
  • .nextAll(): di chuyển đến tất cả các phần tử phía sau cùng cấp
  • .nextUntil(): di chuyển đến tất cả các phần tử phía sau cùng cấp cho đến khi gặp selector,  DOM node hay jQuery object được truyền vào.
  • .prev(): di chuyển đến phần tử phía trước cùng cấp
  • .prevAll(): di chuyển đến tất cả các phần tử phía trước cùng cấp
  • .prevUntil([selector][,filter]):di chuyển đến tất cả các phần tử phía trước cùng cấp cho đến khi gặp selector, DOM node hay jQuery object được truyền vào.
  • .siblings([selector]): chọn tất cả các phần tử cùng cấp, có thể tùy chọn lọc theo selector được truyền vào.
  • .andSelft(): bao gồm cả phần tử hiện tại ( đang chọn )
  • .parents([selector]): chọn tất cả các tổ tiên của mỗi phần tử trong tập hiện tại , có thể tùy chọn lọc theo selector được truyền vào.

.parents() và .parent() tương tự nhau ngoại trừ việc .parent()  chỉ di chuyển lên trên 1 cấp trong cây DOM còn .parents() có thể di chuyển lên nhiều cấp.

  • .closest(selector) : chọn thành phần là tổ tiên gần nhất mà hợp với selector được truyền vào, bắt đầu từ thành phần hiện tại và di chuyển lên trên cây DOM.

.parents() và .closest() tương tự nhau trong việc cả hai đều di chuyển lên trên cây DOM.  Sự khác nhau giữa 2 phương thức này là :

.closest() .parents()
Bắt đầu với thành phần hiện tại Bắt đầu với thành phần cha
Di chuyển lên trên cây DOM cho đến khi tìm thấy một kết quả phù hợp với selector được cung cấp Di chuyển lên trên cây DOM cho đến phần tử gốc của tài liệu, thêm mỗi thành phần tổ tiên vào một collection tạm, sau đó lọc collection đó trên cơ sở selector nếu nó được cung cấp.
Trả về 1 jQuery object chứa không hoặc một phần tử Trả về 1 jQuery object chứa không, một hoặc nhiều phần tử
  • .offsetParent(): chọn thành phần tổ tiên gần nhất được thiết lập vị trí
    • Một phần tử gọi là được thiết lập vị trí nếu nó có attribute position trong CSS là relative, absolute hoặc fixed. Thông tin này rất hữu ích để tính toán offset cho việc tạo hoạt cảnh và đặt các đối tượng trên trang.

Xét ví dụ sau : 

Giả sử bạn có 1 tài liệu HTML sau :

<html>
    <head>
        <title>Title</title>
            <style type="text/css">
                td.selected
                {
                    background:green;
                    color:White; 
                }
         </style>
         <script src="http://code.jquery.com/jquery-latest.js"></script>
         <script type="text/javascript">
             // code javascript
         </script>
     </head>
     <body>
         <table style="border:1px solid #CFCFCF">
             <tr>
                 <td>TD #1</td>
                 <td>TD #2</td>
                 <td>TD #3</td>
                 <td>TD #4</td>
                 <td>TD #5</td>
             </tr>
             <tr>
                 <td>TD #6</td>
                 <td>TD #7</td>
                 <td>TD #8</td>
                 <td>TD #9</td>
                 <td>TD #10</td>
             </tr>
             <tr>
                  <td>TD #11</td>
                  <td>TD #12</td>
                  <td>TD #13</td>
                  <td>TD #14</td>
                  <td>TD #15</td>
             </tr>
             <tr>
                  <td>TD #16</td>
                  <td>TD #17</td>
                  <td>TD #18</td>
                  <td>TD #19</td>
                  <td>TD #20</td>
             </tr>
        </table>
    </body>
</html>

Ta sử dụng :eq() selector để thao tác với ô TD #13 ( có index = 12 ):

$(‘td:eq(12)’).addClass(“selected”);

Để chọn được ô TD #14, bạn thêm vào phương thức .next() để đi tới ô kế tiếp :

$(‘td:eq(12)’).next().addClass(“selected”);

Để chọn được cả ô TD #14 và TD #13, bạn thêm vào phương thức .andSelf() để thao tác với phần tử hiện tại:

$(‘td:eq(12)’).next().andSelf().addClass(“selected”);

Để chọn ô TD #14 và #TD 15 :

$(‘td:eq(12)’).nextAll()

Để chọn ô TD #12:

$(‘td:eq(12)’).prev()

Để chọn ô TD #12 và TD #13 :

$(‘td:eq(12)’).prevAll()

Để chọn các ô trên cùng một cấp DOM bao gồm : #11, #12, #14, #15

$(‘td:eq(12)’).siblings()

Để chọn các ô #11, #12, #13, #14, #15 có thể kết hợp .parent() và children() như sau :

$(‘td:eq(12)’).parent(). children()

Đầu tiên ta sử dụng .parent() để di chuyển lên một cấp về thành phần cha của nó là tr, sau đó sử dụng .children() để chọn các thành phần con của tr là các thành phần từ #11 đến #15.

5. .first(), .last()

.first()

Phương thức .first() trả về phần tử đầu tiên trong tập kết quả .

.last()

Phương thức .last() trả về phần tử cuối cùng trong tập kết quả.

6. .contents()

Phương thức .contents() trả về các phần tử con được lọc theo nội dung hoặc nodeTye.

  • .contents() và .children() tương tự nhau ngoại trừ .contents() bao gồm các text node như là các thành phần HTML trong đối tượng jQuery được trả về.
  • .contents() cũng có thể được dùng để lấy nội dung của một iframe nếu iframe đó nằm trong cùng một domain với trang chính.

Ví dụ sau tìm tất cả các text nodes bên trong 1 thẻ p và bao nó trong 1 thẻ bold.

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
        <script>
            $("p").contents().filter(function(){ 
                return this.nodeType != 1; })
               .wrap("<b/>");
        </script>
    </body>
</html>

7. .each()

Phương thức .each() duyệt qua từng phần tử trong đối tượng jQuery và thực thi 1 function

Cú pháp :

.each(function(index,Element))

trong đó function(index,Element) là hàm thực thi đối với mỗi phần tử

Ta có thể dừng vòng lặp bên trong 1 hàm hồi quy bằng cách return false;

Ví dụ sau duyệt qua cả 3 thẻ div để thiết lập thuộc tính màu chữ cho nó :

<!DOCTYPE html>
    <html>
        <head>
           <style>
              div { color:red; text-align:center; cursor:pointer; 
                    font-weight:bolder; width:300px; }
           </style>
           <script src="http://code.jquery.com/jquery-latest.js"></script>
      </head>
      <body>
           <div>Click here</div>
           <div>to iterate through</div>
           <div>these divs.</div>
           <script>
               $(document.body).click(function () {
                    $("div").each(function (i) {
                        if (this.style.color != "blue") {
                            this.style.color = "blue";
                        } else {
                            this.style.color = "";
                        }
                    });
               });
         </script>
     </body>
</html>

8. .end()

Phương thức .end() kết thúc thao tác filter trong chuỗi kết hợp hiện tại và trả về tập kết quả ở trạng thái trước đó.

.end() rất hữu dụng khi khai thác thuộc tính chaining của jQuery. Khi không dùng chaining, chúng ta có thể gọi lại đối tượng trước bằng tên biến, do đó ta không cần thao tác với stack.

Với .end(), chúng ta có thể xâu chuỗi tất cả các phương thức gọi cùng nhau.

9. .eq()

Phương thức .eq(index) trả về phần tử có index bằng với giá trị được truyền vào. Lưu ý index được bắt đầu bằng số 0.

Ví dụ sau thêm class = “blue” cho thẻ div có index = 2

<!DOCTYPE html>
<html>
    <head>
       <style>
          div { width:60px; height:60px; margin:10px; float:left;
                border:2px solid blue; }
          .blue { background:blue; }
      </style>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <script>
             $("body").find("div").eq(2).addClass("blue");
         </script>
     </body>
</html>

10. .has()

Phương thức .has(selector) trả về 1 tập các phần tử mà có con cháu hợp với thành phần selector hoặc DOM truyền vào

Ví dụ bạn có tài liệu HTML sau :

<ul>
    <li>list item 1</li>
    <li>list item 2
       <ul>
           <li>list item 2-a</li>
           <li>list item 2-b</li>
       </ul>
    </li>
    <li>list item 3</li>
    <li>list item 4</li>
</ul>

Để chọn ra các thẻ li có con là thẻ ul, bạn có thể sử dụng :

$(“li”).has(“ul”)

11. .is()

Phương thức .is() kiểm tra tập các phần tử hiện tại có phù hợp với một selector, element hay jQuery object được truyền vào hay không và sẽ trả về true nếu có ít nhất 1 phần tử phù hợp với tham số truyền vào.

Các dạng sử dụng của .is()

  • .is(selector)
  • .is(function(index))
  • .is(jQuery object)
  • .is(element)

Không giống như các phương thức lọc khác, .is() không tạo ra một đối tượng jQuery mới. Thay vào đó, nó cho phép bạn kiểm tra kiểm tra nội dung của một đối tượng jQuery mà không cần phải sửa đổi. Nó thường hữu dụng khi sử dụng bên trong 1 hàm hồi quy, giống như event handle.

Các ví dụ sử dụng .is() bạn có thể tham khảo tại http://api.jquery.com/is/

12. .map()

Phương thức .map(callback(index,domElement)) truyền mỗi phần tử trong tập hiện tại vào 1 funciton, tạo ra một đối tượng jQuery chứa các giá trị trả về.

Giá trị trả về là một mảng jQuery-wrapped. Phương thức get() rất thông dụng để làm việc với 1 mảng cơ bản.

.map() đặc biệt hữu dụng khi muốn nhận về hoặc thiết đặt giá trị của một tập hợp các phần tử.

Ví dụ sau sẽ trả về danh sách của tất cả các giá trị nằm trong 1 form, ngăn cách nhau bởi dấu phẩy

<!DOCTYPE html>
<html>
    <head>
        <style>
            p { color:red; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p><b>Values: </b></p>
        <form>
            <input type="text" name="name" value="John"/>
            <input type="text" name="password" value="password"/>
            <input type="text" name="url" value="http://ejohn.org/"/>
        </form>
        <script>
             $("p").append( $("input").map(function(){
                  return $(this).val();
             }).get().join(", ") );
        </script>
     </body>
</html>

Kết quả là Values: John, password, http://ejohn.org/

13. .not()

Phương thức .not() loại bỏ các phần tử từ tập các phần tử phù hợp.

Các dạng sử dụng của .not():

  • .not(selector)
  • .not(elements)
  • .not(function(index))
  • .not(jQuery object)

Ví dụ sau sẽ thêm boder cho các thẻ div không có màu green hoặc blue

<!DOCTYPE html>
<html>
    <head>
        <style>
            div { width:50px; height:50px; margin:10px; float:left;
            background:yellow; border:2px solid white; }
            .green { background:#8f8; }
            .gray { background:#ccc; }
            #blueone { background:#99f; }
       </style>
       <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
       <div></div>
       <div id="blueone"></div>
       <div></div>
       <div class="green"></div>
       <div class="green"></div>
       <div class="gray"></div>
       <div></div>
    <script>
        $("div").not(".green, #blueone")
        .css("border-color", "red");
    </script>
    </body>
</html>

14. .slice()

Phương thức .slice() trả về 1 tập con của tập các phần tử phù hợp nằm trong 1 khoảng chỉ số.

Cú pháp :

.slice(start [, end])

Tham số end là tùy chọn, nếu nó vắng mặt thì .slice(start) sẽ trả về 1 tập con gồm các phần tử từ vị trí start đến hết

Ví dụ sau sẽ thiết lập cho các thẻ div có index từ 2 đến 7 có background màu vàng.

<!DOCTYPE html>
<html>
   <head>
      <style>
          div { width:40px; height:40px; margin:10px; float:left;
          border:2px solid blue; }
          span { color:red; font-weight:bold; }
          button { margin:5px; }
      </style>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p><button>Turn slice yellow</button>
        <span>Click the button!</span></p>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <script>
             function colorEm() {
                var $div = $("div");
                var start = Math.floor(Math.random() * $div.length);
                var end = Math.floor(Math.random() * 
                ($div.length - start))+start+1;
                if (end == $div.length) end = undefined;
                $div.css("background", "");
                if (end)
                   $div.slice(start, end).css("background", "yellow"); 
                else
                   $div.slice(start).css("background", "yellow");
                $("span").text('$("div").slice(' + start + 
                (end ? ', ' + end : '')+')
                .css("background", "yellow");');                             }
             $("button").click(colorEm);
         </script>
     </body>
</html>
Advertisements
Categories: Web
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: