Chọn element nâng cao trong jQuery

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. Khi lựa chọn phần tử trong cấu trúc HTML phân cấp, jQuery sẽ tự động loop để tìm ra phần tử mà chúng ta không cần phải sử dụng bất cứ một vòng lặp nào cả. Trong bài này chúng ta sẽ tìm hiểu cách lựa chọn 1 phần tử li trong list ul một cách nhanh chóng và đơn giản. Các thẻ khác cũng sẽ hoàn toàn tương tự.
 
 
Chúng ta xem một ví dụ cụ thể sau
 
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 khác
 
// 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');
// Chọn tất cả trừ thẻ li đầu tiên
$('li:gt(0)').addClass('selected');
 

 

Related Post


Compression & Uncompression Javascript
Thursday, July 25, 2013
Công cụ hỗ trợ nén và giải nén file javascript cho website  
Search

Đăng ký nhận bài mới


Category

Blog Archive