Gallery

Liên Hệ Hoàng Thanh

gpextreme@yahoo.com 0903 398 881

Ngày đăng: 10/06/2013 . Số lần xem: 2606

jQuery: Phương pháp di chuyển trong DOM Hầu như các selector của jQuery cung cấp đã giúp chúng ta có thể chọn và thao tác với các phần tử DOM một các dễ dàng. Tuy nhiên jQuery còn cung cấp cho chúng ta thêm những phương thức để di chuyển lên, xuống và quanh cây DOM. 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()

jQuery sử dụng phương thức này để thêm vào các selector giúp chúng ta bổ sung các phần tử để thao tác

			
							<div>Selector được chọn lần đầu</div>
					
							<p>Selector được thêm vào với phương thức .add()</p>

			
							$("div").css({color:"white"})
					
							.add("p").css({background:"green"});

Ở dòng code đầu tiên chúng ta sẽ sử dụng selector để chọn thành phần div. Dòng thứ 2 chúng ta sử dụng thương thức .add() để thêm vào bộ selector mới và thao tác với thành phần p, trong khi đó nếu với cách viết thông thường bạn phải tạo 2 selector riêng như sau:

			
							$("div").css({color:"green"});
					
							$("p").css({color:"red"});

2 .filter()

Phương thức này 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 .fillter() cho phép nhận một hàm làm tham số của nó.

Chúng ta cùng làm lại ví dụ chọn phần tử chẵn / lẻ như sau:

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

$("ul li:odd").css({ color : "red" });

Kết quả là phần tử li Item 2 và Item 4 được hiển thị với màu đỏ

Chúng ta có thể viết lại với phương pháp .filter() như sau

$("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.

Cách viết sau cũng cho một kết quả tương tự, nhưng chỉ khác là .filter() nhận một 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ử.

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

3 .find()

Phương thức .find() cho chúng ta cách nhìn rõ ràng hơn về cách chọn các phần tử trong DOM của jQuery

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

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

Chúng ta nhận thấy rằng, cách chọn phần tử của jQuery ở đây rất rõ ràng đó là: chọn phần tử ul, sau đó tìm (find) các phần tử li có chỉ số lẻ và hiển thị với màu đỏ

4 .andSelf(), .parent(), .children(), .next(), .nextAll(), .prev()...

Các phương thức này giúp chúng ta di chuyển xung quang 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() : Chọn tất cả các phần tử con
andSelf() : Bao gồm cả phần tự hiện tại (Đang chọn)
next() : Di chuyển đến phần tử phía sau cùng cấp
nexAll() : Di chuyển đến tất cả các phần tử phía sau cùng cấp
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
siblings() : Chọn tất cả các phần tử cùng cấp

Chúng ta cùng xem xét ví dụ sau:

			
							<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 (Index 12)</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>

Trước tiên bạn phải định nghĩa CSS với một class .selected như sau:

td.selected { background: green; color: white }

Tiếp theo, chúng ta sử dụng :eq() selector để thao tác với ô TD #13 (Có index 11)

$('td:eq(12)').addClass("selected");

Làm sao để chọn được ô TD #14 dựa vào selector đã tạo trên? chúng ta thêm vào phương thức .next() để di tới ô kế tiếp:

			
							1
						
							$('td:eq(12)').next().addClass("selected");

Làm sao để ô TD #13 cũng được tác động? ta thêm vao .andSelf() để thao tác với phần tử hiện tại:

			
							1
						
							$('td:eq(12)').next().andSelf().addClass("selected");

Tương tự bạn có thể sử dụng:

.nextAll() để chọn ô #14 và #15

.prev() để chọn ô #12

.prevAll() để chọn ô #12 và #13

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

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

			
							1
						
							$('td:eq(12)').parent().children().addClass("selected");

Đầu tiên chúng 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 đó chúng ta sử dụng .children() để chọn các thành phần con của tr là các thành phần td từ #11 đến #15

KẾT LUẬN

Trên đây là một số phương pháp để thao tác và di chuyển trong DOM, Bạn có thể tìm hiểu thêm các phương thức di chuyển trong DOM tại đây: