Thư viện jQuery tận dụng kiến thức và thế mạnh của CSS Selector để cho phép bạn nhanh chóng và dễ dàng truy cập nhiều phần tử hoặc nhóm các phần tử trong DOM (Document Object Model). Trong chương 2 này chúng ta sẽ khám phá một vài những Selector này và cả những Selector của jQuery. Chúng ta cũng sẽ tìm hiểu thêm về cách di chuyển trong cây thư mục và nó cho chúng ta thêm linh động để đạt được những gì mình muốn.
#Document Object Model (Mô hình đối tượng tài liệu)
Một trong những tính năng mạnh mẽ nhất của jQuery là khả năng chọn các thành phần trong DOM một cách dễ dàng. Nói nôm na thì DOM là một dạng phả hệ của các thành phần HTML. Các thành phần này có mối tương quan với nhau như một “gia đình” HTML hạnh phúc. Khi chúng ta nói đến các mối quan hệ này bạn hãy liên tưởng đến mối quan hệ trong gia đình như ông bà, bố mẹ, anh chị em v.v.. Bạn có thể xem bài Hướng đối tượng dựa vào cấp bậc XHTML để biết rõ hơn về mối quan hệ của các thành phần HTML.
#Hàm $()
Cho dù bạn sử dụng Selector nào đi chăng nữa trong jQuery, bạn luôn bắt đầu bằng một dấu dollar ($) và một đôi ngoặc đơn như: $(). Tất cả những gì có thể được sử dụng trong CSS cũng có thể được lồng vào dấu ngoặc kép (”) và đặt vào trong hai dấu ngoặc đơn, cho phép chúng ta áp dụng các phương pháp jQuery cho tập hợp các phần tử phù hợp.
Ba thành phần quan trọng nhất của jQuery Selector là tên thẻ HTML, ID và Class. Bạn có thể chỉ sử dụng nó hoặc kết hợp với những Selector khác để chọn. Dưới đây là một ví dụ về mỗi Selecter khi sử dụng một mình.
Như đã nói ở chương 1, khi chúng ta thêm các phương pháp vào hàm $(), thì các phần tử nằm trong đối tượng jQuery sẽ được tự động loop và diễn ra ở “hậu trường”. Cho nên chúng ta không cần phải sử dụng bất cứ một vòng lặp nào cả, như vòng lặp for chẳng hạn, điều này thường phải làm trong khi viết code về DOM. Sau khi bạn đã nằm bắt được những khái niệm cơ bản, bây giờ chúng ta sẽ khám phá thêm những tính năng mạnh mẽ khác của jQuery.
#CSS Selector
Thư viện jQuery hỗ trợ gần như toàn bộ các CSS Selector chuẩn từ CSS1 cho đến CSS3. Chính việc này đã cho phép những người làm web không phải lo lắng về liệu trình duyệt đó có hỗ trợ những Selector mới hay không (đặc biệt là trình duyệt IE) miễn là trình duyệt đó có bật JavaScript.
Lưu ý: những người làm web có kinh nghiệm và trách nhiệm luôn nên áp dụng nguyên tắc nâng cao luỹ tiến và giáng cấp hài hoà cho code của họ. Họ phải luôn chắc chắn rằng trang web luôn được hiển thị chính xác, cho dù không được đẹp như khi JavaScript bị tắt hoặc khi nó được bật. Chúng ta sẽ bàn thêm về nguyên tắc này trong suốt chiều dài của loạt bài này.
Để tìm hiểu jQuery sử dụng CSS Selector như thế nào thì cách tốt nhất là làm bằng ví dụ. Trong ví dụ dưới đây chúng ta sẽ sử dụng một dạng danh sách thường được dùng để làm thanh di chuyển trên web. Code HTML sẽ như sau.
<ul id="nav">
<li><a href="#">Home Page</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Forum</a></li>
<li><a href="ebook.pdf">Ebooks</a>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
</ul>
</li>
<li><a href="http://www.jquery.com">Tutorials</a></li>
<li><a href="#">Photoshop</a>
<ul>
<li><a href="#">Action</a></li>
<li><a href="#">Effect</a></li>
<li><a href="#">Plugins</a></li>
</ul>
</li>
<li><a href="mailto:email@yahoo.com">Email</a></li>
</ul>
Trong đoạn code HTML ở trên chúng ta đơn giản chỉ có một unorder list với id=”nav” đóng vai trò là menu chính. Khi chưa có style gì áp dụng vào nó thì kết quả khi xem ở trình duyệt sẽ như hình dưới đây. Đây chính là định dạng mặc định của trình duyệt cho các Unorder List.
#Định dạng list-item
Tất nhiên trong ví dụ này bạn hoàn toàn có thể sử dụng CSS để định dạng menu này, nhưng vì chúng ta muốn khám phá jQuery nên chúng ta tạm thời coi như CSS không tồn tại. Giả sử trong ví dụ này bạn muốn những list-item chính có gạch chân mà những ul phụ của nó sẽ không có gạch chân.
.highlight {
border-bottom: 1px solid #e6db55;
padding: 5px;
}
Thay vì chúng ta sẽ thêm class trực tiếp vào tài liệu HTML, chúng ta sẽ sử dụng jQuery để thêm class vào những list-item tầng 1 như: Homepage, About Me, Forum, Ebooks, Tutorials, Photoshop và Email.
$(document).ready(function() {
$('#nav > li').addClass('highlight');
});
Như đã bàn ở chương 1, chúng ta bắt đầu đoạn code jQuery với $(document).ready(), nó sẽ chạy ngay khi DOM đã được load. Dòng thứ 2 sử dụng CSS Child selector (>) để thêm class=’highlight’ chỉ cho list item tầng 1. Nói theo ngôn ngữ của chúng ta thì đoạn code trên có nghĩa như sau: jQuery hãy tìm mỗi một list item (li) là con trực tiếp (>) của thành phần có ID là nav (#nav). Với class=’highlight’ được thêm vào, menu của chúng ta được như sau.
Để định dạng cho những list item tầng 2 có rất nhiều cách. Nhưng một trong những cách chúng ta sẽ sử dụng trong phần này là pseudo-class phủ định. Bằng cách này chúng ta sẽ đi xác định tất cả những item nào mà không có class=’highlight’. Chúng ta sẽ viết code như sau:
$(document).ready(function() {
$('#nav > li').addClass('highlight');
$('#nav li:not(.highlight)').addClass('background');
});
Đoạn code trên có nghĩa như sau:
1.Chọn tất cả những danh sách là con trực tiếp của #nav
2.Những danh sách này phải không có class=’highlight’ (:not(.highlight))
Và chúng ta sẽ được hình như hình dưới, tất nhiên bạn phải khai báo class=’background’ trong file CSS của mình.
#Attribute Selectors
Attribute Selectors là bộ Selector phụ của CSS cũng rất hữu dụng. Nó cho phép chúng ta chọn một thành phần nào đó dựa vào đặc tính HTML của nó như: thuộc tính Title của link hoặc thuộc tính Alt của image. Ví dụ để chọn tất cả các tấm hình có thuộc tính Alt chúng ta làm như sau:
$('img[alt]')
#Định dạng cho đường liên kết
Nếu bạn biết sơ qua về Regular Expressions trong ngôn ngữ lập trình như PHP thì Attribute Selector trong jQuery chịu ảnh hưởng bởi phương pháp này. Ví dụ dấu (^) dùng để xác định giá trị tại điểm bắt đầu hoặc ($) kết thúc của một chuỗi. Nó cũng có thể sử dụng dấu (*) để chỉ một giá trị tại một vị trí bất kỳ trong một chuỗi hoặc sử dụng dấu chấm than (!) để biểu thị một giá trị phủ định. Trong phần CSS này chúng ta sẽ định dạng các đường liên kết như sau:
a {
color: #00c;
}
.email {
padding-right: 20px;
background: url(images/mail.png) no-repeat right center;
}
.ebook {
padding-right: 20px;
background: url(images/pdf.png) no-repeat right center;
}
.hyperlink {
padding-right: 20px;
background: url(images/external.png) no-repeat right center;
}
Sau đó chúng ta thêm 3 class là email, ebook và hyperlink vào những đường liên kết thích hợp bằng cách sử dụng jQuery. Để thêm một class vào tất cả những đường liên kết email, chúng ta sẽ tạo một selector và nó sẽ tìm tất cả những thành phần anchor (a) với thuộc tính href bắt đầu bằng chuỗi mailto như sau:
$(document).ready(function() {
$('a[href^=mailto:]').addClass('email');
});
Để thêm một class vào tất cả các đường liên kết đến những tệp tin .pdf, chúng ta sử dụng dấu $ thay vì dấu ^ như ở trên. Bởi vì lần này chúng ta chỉ chọn những đường liên kết nào có thuộc tính href kết thúc bằng cụm .pdf.
$(document).ready(function() {
$('a[href^=mailto:]').addClass('mailto');
$('a[href$=.pdf]').addClass('ebook');
});
Attribute Selector cũng có thể được kết hợp với nhau. Ví dụ chúng ta cũng có thể thêm một class là hyperlink cho tất cả các đường liên kết với giá trị href bắt đầu bằng http và chứa cụm từ hyper trong nó.
$(document).ready(function() {
$('a[href^=mailto:]').addClass('mailto');
$('a[href$=.pdf]').addClass('pdflink');
$('a[href^=http][href*=jquery]').addClass('hyperlink');
});
Với 3 class được áp dụng như trên cho các đường liên kết, chúng ta sẽ được kết quả như hình dưới đây. Bạn sẽ thấy cạnh mỗi đường link sẽ có thêm một hình icon chỉ cho người dùng biết một cách rất trực quan là đường liên kết đó là về cái gì.
#Selector riêng của jQuery
Dường như còn chưa vừa ý với những CSS Selector, jQuery có một hệ thống những Selector của riêng nó. Hầu hết những Selector này đều cho phép chúng ta chọn bất cứ thành phần nào trong tài liệu HTML. Cú pháp cho những Selector này tương đồng với cú pháp của CSS pseudo-class, nơi mà các selector bắt đầu bằng dấu hai chấm (:). Ví dụ, để chọn thẻ div thứ 2 của tập hợp những thẻ div có class=’horizontal’, chúng ta có cách viết code như sau:
$('div.horizontal:eq(1)');
Bạn nên lưu ý ở phần này là :eq(1) chọn thẻ div thử hai từ tập hợp trả về bởi vì JavaScript đánh số array bắt đầu từ số 0. Ngược lại, CSS lại là bắt đầu từ số 1. Cho nên khi bạn sử dụng nth-child CSS Selector như là $(‘div:nth-child(1)’) sẽ chọn tất cả các thẻ div là con đầu tiên của thành phần cha mẹ. Tất nhiên đấy là diễn giả là vậy, nhưng nếu trong thực tế thì bạn nên dùng $(‘div:first-child’) thì hợp lý hơn.
#Định dạng bảng kiểu kẻ sọc
Hai trong số những jQuery selector rất hữu dụng là :0dd và :even. Trong ví dụ dưới đây chúng ta sẽ sử dụng một trong hai selector này để định dạng cho bảng kiểu kẻ sọc với code HTML như sau:
<table>
<tr>
<td>Movies</td>
<td>Actors/ Actresses</td>
<td>Year Make</td>
</tr>
<tr>
<td>Terminator</td>
<td>arnold schwarzenegger</td>
<td>1991</td>
</tr>
<tr>
<td>Die Hard</td>
<td>Bruce Willis</td>
<td>2000</td>
</tr>
<tr>
<td>Speed</td>
<td>Sandra Bullock</td>
<td>1997</td>
</tr>
<tr>
<td>Independence Day</td>
<td>Will Smith</td>
<td>1999</td>
</tr>
<tr>
<td>Armageddon</td>
<td>Bruce Willis</td>
<td>1997</td>
</tr>
<tr>
<td>Under Siege</td>
<td>Steven Seagal</td>
<td>1996</td>
</tr>
<tr>
<td>Avatar</td>
<td>Unknown</td>
<td>2010</td>
</tr>
</table>
