Như các bạn đã biết jQuery là một thư viện của Javascript rất mạnh về Selector (Bộ chọn) và hiệu ứng. Nếu sử dụng Javascript thuần mà muốn Selector thì bạn sẽ phải viết rất dài, nhưng với jQuery thì việc đó rất đơn giản và ngắn.

Trong bài viết này, tôi sẽ chia sẻ danh sách các Selector hay dùng trong jQuery.

Nếu bạn đã học qua CSS thì rất đơn giản bởi vì Selector trong jQuery có cú pháp giống Selector trong CSS. Nếu chưa học thì cũng không sao, hãy đọc hết bài viết này.

Chọn tất cả các thành phần của HTML

Cú pháp: 

$('*')

Dùng selector này có thể sẽ gây tốn tài nguyên nếu trang web của bạn có nhiều thẻ HTML
Ví dụ:

$('*').css('color', 'blue');

Chọn theo thẻ HTML

Cú pháp:

$('tagname')

Ví dụ:

$('p').css('color', 'red');

Chọn theo class

Cú pháp:

$('.ten_class')

Ví dụ:

$('.col_item').css('background', 'green');

Chọn theo ID

Cú pháp:

$('#ten_id')

Ví dụ:

$('#header').css('color', 'black');

Chọn nhiều bộ chọn

Cú pháp:

$('selector1, selector2, selector3')

Ví dụ:

$('#header, .container, body').css('color', 'green');

Chọn nhiều bộ chọn trên 1 thẻ HTML

Cú pháp:

$('selector1selector2')

Ví dụ:

$('div#header').css('color', 'black');

Chọn thành phần con dựa vào cha

Cú pháp:

$('parent>children')

Ví dụ:

$('.menu>li>a').css('font-weight', 'bold');

Chọn tất cả các thành phần con

Cú pháp:

$('parent children')

Ví dụ:

$('ul li').css('color', 'red');

Chọn thành phần với một vị trí cụ thể

Cú pháp:

$('selector:eq(index)')

Trong đó:

  • index là vị trí của thành phần (Bắt đầu từ 0)
  • Nếu muốn duyệt từ dưới lên hãy thêm dấu trừ (-) vào trước index (Bắt đầu từ -1)

Ví dụ:

$('p:eq(3)').css('color', 'green');

Chọn thành phần lớn hơn vị trí chỉ định

Cú pháp:

$('selector:gt(index)')

Ví dụ:

$('p:gt(2)').css('color', 'red');

Chọn thành phần nhỏ hơn vị trí chỉ định

Cú pháp:

$('selector:lt(index)')

Ví dụ:

$('p:lt(2)').css('color', 'red');

Chọn các thành phần ở vị trí lẻ

Cú pháp:

$('selector:even')

Ví dụ:

$('p:even').css('color','red');

Chọn các thành phần ở vị trí chẵn

Cú pháp:

$('selector:odd')

Ví dụ:

$('p:odd').css('color','red');

 

Chọn thành phần đầu tiên

Cú pháp:

$('selector:first')

Ví dụ:

$('p:first').css('background', 'blue');

Chọn thành phần cuối cùng

Cú pháp:

$('selector:last')

Ví dụ:

$('p:last').css('color','red');

Các thành phần đang chuyển động

Cú pháp:

$('selector:animated')

Ví dụ:

$('p:animated').css('color','yellow');

Chọn các thành phần chứa thuộc tính xác định

Cú pháp:

$('selector[attribute="value"]')

Ví dụ:

$('a[target="_blank"]').css('color', 'red');

Selector trong form

Ngoài cách sử dụng các selector phía trên, trong form sẽ có các selector đặc biệt như sau:

Chọn các thẻ có input type=text

$('input:text')

Chọn các thẻ input type=button

$('input:button')

Chọn tất cả các thẻ input có type=checkbox

$('input:checkbox')

Chọn tất cả các thẻ input đang được checked

$('input:checked')

Chọn tất cả các thẻ input đang disabled

$(<span class="hljs-string">'input:disabled'</span>)

Chọn tất cả các thẻ input đang enabled

$('input:enabled')

Chọn tất cả các thẻ có type=file

$('input:file')

Chọn thẻ input đang được focus

$('input:focus')

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *