Trang chủ > JQuery > Làm quen với JQuery-bài 2

Làm quen với JQuery-bài 2


Chào mừng các bạn đến với bài 2 trong loạt bài viết về JQuery. Trong bài trước, chúng ta đã học cách nhúng thư viện JQuery vào trong trang của ta, cách lựa chọn các element và cuối cùng là làm cho một div trong trang chuyển động sử dụng hàm animate() của JQuery. Trong bài này chúng ta sẽ học cách lựa chọn các element dựa vào các mối quan hệ của chúng với element mà ta đã tương tác. Nghe có vẻ như phức tạp, nhưng thực chất mọi chuyện lại khá đơn giản.

Trong thực tế, khi ta đã chọn một element, làm thế nào để duyệt toàn bộ trang để tìm cha của element đó là việc làm cần thiết mà ta thường gặp. Bạn hoàn toàn có thể sử dụng một selector khác, tuy  nhiên có nhiều cách dễ hơn, hãy xem đoạn mã HTML dưới đây:

<div>

<h2>A header with <a href="http://www.danchanvit.wordpress.com">a link</a> inside.

<p>A paragraph in the div</p>

</div>

Sử dụng JQuery ta lựa chọn element h2:

$(‘h2’);

Bây giờ làm thế nào để chọn element div? Ta có thể dùng một selector khác:

$(‘div’);

Trong trường hợp này, mọi thứ đều hoạt động tốt, tuy nhiên bạn nghĩ đến những trang phức tạp hơn nhiều, việc dùng vô số các selector kiểu như vậy rõ ràng là không hợp lý, kể cả việc bạn đặt id cho từng selector chỉ để phục vụ cho mục đích làm việc với javascript. Trên thực tế, JQuery đã khiến cho mọi việc trở nên rất dễ dàng:

$('h2').parent(); //Chọn thẻ div.

Đó chính là điểm nhấn trong bài viết này – học cách tối ưu code của chúng ta, giảm thiểu việc phải lựa chọn quá nhiều selector và làm việc dựa trên những element mà ta đã chọn trước đó.

Bây giờ, thay vì chọn cha của ‘h2’, ta chọn con của thẻ này, trong ví dụ trên đó chính là thẻ ‘a’, ta có thể quay trở lại cách trong CSS:

$(‘h2 a’);

Liệu JQuery có cung cấp cách làm tương tự không? Câu trả lời là có!

('h2').children(); //chọn thẻ 'a'

Nhưng phải làm sao nếu thẻ ‘h2’ có nhiều hơn một thẻ con, JQuery cho phép chúng ta truyền tham số selector vào trong hàm children() để lựa chọn cụ thể hơn:

$('h2').children('a'); //Chọn tất cả các thẻ con của 'h2'; là các đường link 'a';

Ví dụ tiếp theo, chúng ta có một danh sách chưa sắp xếp(unordered list):

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

<li>Item 5</li>

</ul>

Tất nhiên việc chọn toàn bộ các item trong danh sách thật đơn giản, ta chỉ việc viết:

$(‘li’);

Bạn cũng có thể sử dụng hàm mà chúng ta vừa đọc:

$(‘ul’).children();

Thông thường việc lựachọn cách dùng nào phụ thuộc vào tình huống cụ thể trong trang của ta, ví dụ nếu ta có 2 danh sách, trong đó một danh sách chưa sắp xếp và một danh sách đã sắp xếp, mà ta chỉ muốn chọn tất cả các item của một trong hai danh sách đó, ta sẽ dùng cách thứ 2 trong 2 cách kể trên, Tuy nhiên nếu ta muốn chọn một item cụ thể nào đó trong danh sách thì ta sẽ dùng một hàm khác trong JQuery:

$(‘li’).eq(2)// chọn item 3.

Lưu ý là  hàm trên chọn item 3. Đó là vì hầu hết các ngôn ngữ lập trình đều sử dụng “zero based index” có nghĩa là index đầu tiên bắt đầu từ 0.

Trước khi chúng ta tiếp tục đi xa hơn, các bạn nên nhớ rằng một trong số các nguyên tắc chính của JQuery là “chainability”. Nghĩa là có thể gọi hàm này sau hàm trước và cứ thế gọi liên tiếp:

$('ul').children('li').eq(2).animate({...});

Trong đoạn code trên:

1. $(‘ul’) => Chọn tất cả các danh sách chưa sắp xếp trong trang.

2. children(‘li’) => Chọn tất cả các con của danh sách là các thẻ ‘li’;

3. eq(2) =>Chọn item thứ 3 trong danh sách.

4 animate({…}) => Làm cho một item cụ thể chuyển động. Chúng ta đã nói đến animate ở bài trước.

Trong khi hàm children() chỉ tìm thế hệ kế tiếp gần nhất(nghĩa là tìm con mà không tìm cháu :D), JQuery cung cấp một cách để chúng ta có thể đào sâu hơn. Trở lại với đoạn mã HTML mà chúng ta đã viết bên trên:

<div>

<h2>A header with <a href="http://www.danchanvit.wordpress.com">a link</a> inside.

<p>A paragraph in the div</p>

</div>

Nếu ta đã chọn:

$(‘div’);

Và ta muốn chọn thẻ <a> nằm bên trong thẻ <h2>, bạn sẽ nghĩ đến cách sau:

$(‘div’).children(‘h2’).children(‘a’);

Thông thường, có một luật bất thành văn, nếu bạn gọi một hàm nào đó liên tiếp hai lần, thì sẽ có cách làm hay hơn. Và tất nhiên là đúng vậy, sử dụng hàm find() trong JQuery, đoạn code trên của chúng ta sẽ như sau:

$(‘div’).find(‘a’);

Hàm find() sẽ không dừng lại sau khi tìm thấy thẻ ‘a’ đầu tiên mà sẽ tiếp tục chạy và tìm tất cả các thẻ ‘a’ là con, cháu, hoặc các thế hệ kế tiếp của thẻ ‘div’. Về cơ bản, hàm find() tìm tất cả các element nằm trong element mà ta đã chọn không cần biết đến cây phân cấp trong element đó.

Tiếp theo, chúng ta có 4 hàm khác cho phép chúng ta tìm những element có cùng phân cấp với element mà ta đã chọn. Trong ví dụ của ta ở trên thì ‘h2’ và ‘p’ là những element có cùng phân cấp. Xem các hàm sau:

$('h2').next(); //Chọn một element cùng phân cấp ngay sau element 'h2'.

$('h2').nextAll(); //Chọn tất cả các element cùng phân cấp sau element 'h2'.

$('p').prev(); //Chọn một element cùng phân cấp đứng trước thẻ <p> ( trong ví dụ là chọn thẻ 'h2').

$('p').prevAll(); //Chọn tất cả các element cùng phân cấp đứng trước thẻ 'p'

Như các bạn thấy tất cả các hàm trên đều rất đơn giản và hữu dụng nếu bạn muốn nhảy từ element này tới element khác.

Hàm cuối cùng mà chúng ta sẽ xem xét trong bài này là hàm siblings(). Chúng ta có đoạn mã HTML mới:

<p>A paragraph</p>

<h2>A heading</p>

<img src="somepic.jpg" alt="A picture"/>

<h1>A bigger heading</h1>

Từ thẻ ‘p’ ta có thể sử dụng nextAll() để chọn tất cả các thẻ có cùng phân cấp với ‘p’ (vì ‘p’ là thẻ đầu tiên)

$(‘p’).nextAll();

Nhưng nếu chúng ta đang ở ‘h2’, làm thế nào để chọn tất cả các element có cùng phân cấp với nó? Đơn giản:

$(‘h2’).siblings();

Hàm siblings() cũng có thể nhận một đối số là selector:

$(‘h2’).siblings(‘p’);//Chỉ chọn các element cùng phân cấp là các paragraph.

Hy vọng các bạn cảm thấy hứng thú với pha đột phá nhanh vào thế giới selector trong JQuery mà chúng ta vừa thực hiện. Nếu các bạn có thắc mắc gì xin hãy gửi lại trong phần comment. Chúc các bạn coding vui vẻ!

Chuyên mục:JQuery
  1. Chưa có phản hồi.
  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: