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:

1 <ul>

`2`	`<li>list 1</li>`

`3`	`<li>list 2</li>`

`4`	`<li><a` `href="#"` `title="not title">list 3</a></li>`

`5`	`<li>list 4</li>`

`6`	`<li><a` `href="#"` `title="title">list 5</a></li>`

`7`	`<li>list 6</li>`

`8`	`<li>list 7</li>`

9 </ul>

Để lựa chọn tất cả các thẻ li, ta dùng

`1`	`$(function() {`

`2`	`$('li').addClass('selected');`

3 });

Các lựa chọn nâng cao

`01`	`// Chỉ chọn thẻ li đầu tiên`

`02`	`$('li:first').addClass('selected');`

`03`	`// Chỉ chọn thẻ li cuối cùng`

`04`	`$('li:last').addClass('selected');`

`05`	`// Chọn tất cả trừ thẻ li đầu tiên`

`06`	`$('li:gt(0)').addClass('selected');`

`07`	`// Chỉ chọn các thẻ li chẵn (bắt đầu từ 0)`

`08`	`$('li:even').addClass('selected');`

`09`	`// Chỉ chọn các thẻ li lẻ (bắt đầu từ 0)`

`10`	`$('li:odd').addClass('selected');`

`11`	`// Chọn thẻ li thứ tư (bắt đầu từ 1)`

`12`	`$('li:nth-child(4)').addClass('selected');`

`13`	`// Chọn thẻ li thứ tư (bắt đầu từ 0)`

`14`	`$('li:eq(4)').addClass('selected');`

`15`	`// Chọn các thẻ a ở trong li có title là "title"`

`16`	`$('li a').addClass('selected');`

`17`	`// Chọn các thẻ a ở ngay sau thẻ li`

`18`	`$('li>a').addClass('selected');`

Bạn có thể dùng firebug để kiểm tra lại