Bài 4: Chọn element nâng cao
Sau bài này bạn sẽ biết cách chọn chính xác các element theo ý mình. Ví dụ sử dụng với unorderd list, trên thực tế bạn có thể sử dụng bất kỳ thẻ nào khác
Trước tiên là mã HTML:
<ul> <li>list 1</li> <li>list 2</li> <li><a href="#" title="not title">list 3</a></li> <li>list 4</li> <li><a href="#" title="title">list 5</a></li> <li>list 6</li> <li>list 7</li> </ul>
Để lựa chọn tất cả các thẻ li, ta dùng
$(function() { $('li').addClass('selected'); });
Các lựa chọn nâng cao
// Chỉ chọn thẻ li đầu tiên $('li:first').addClass('selected'); // Chỉ chọn thẻ li cuối cùng $('li:last').addClass('selected'); // Chọn tất cả trừ thẻ li đầu tiên $('li:gt(0)').addClass('selected'); // Chỉ chọn các thẻ li chẵn (bắt đầu từ 0) $('li:even').addClass('selected'); // Chỉ chọn các thẻ li lẻ (bắt đầu từ 0) $('li:odd').addClass('selected'); // Chọn thẻ li thứ tư (bắt đầu từ 1) $('li:nth-child(4)').addClass('selected'); // Chọn thẻ li thứ tư (bắt đầu từ 0) $('li:eq(4)').addClass('selected'); // Chọn các thẻ a ở trong li có title là "title" $('li a[title=title]').addClass('selected'); // Chọn các thẻ a ở ngay sau thẻ li $('li>a').addClass('selected');
Bạn có thể dùng firebug để kiểm tra lại