Bài 4: Chọn element nâng cao

Đăng bởi Neo trong mục Hướng dẫn vào 09 tháng 12, 2009 | Comments

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 Smile

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

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter