Bài 2: Selector trong jquery

Jquery là một thư viện hỗ trợ rất mạnh về selectors, nếu như trong javascript thuần để selector nhiều cấp thì chúng ta phải viết những câu lệnh rất dài dòng. Nhưng khi chúng ta sử dụng jquery thì điều đó lại hết sức đơn giản.

1, Tổng quan về selector trong Jquery.

-Nếu như bạn là một người đã tìm hiểu về CSS rồi, thì bạn học selectors trong Jquery sẽ rất nhanh . Bởi vì selectors trong Jquery cũng hỗ trợ cú pháp giống như CSS.

VD: Chọn thẻ có id là banner.

Trong CSS:

#banner{
    //code
}

Trong Jquery:

$('#banner');

-Nhưng nếu bạn chưa tìm hiểu về CSS thì qua bài này bạn sẽ cũng hiểu được về Selectors trong  jquery.

2, Các Selector trong Jquery.

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

-Để chọn tất cả các thành phần trong HTML thì chúng ta sử dụng cú pháp:

$('*');

–Lưu ý: Nếu một trang web có quá nhiều thẻ HTML thì khi dùng thẻ này sẽ hao tổn rất nhiều tài nguyên (client).

VD: CSS cho tất cả các thẻ trong trang web.

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

Xem Kết Quả

Chọn theo element HTML

-Để chọn theo element trong trang web thì chúng ta sử dụng cú pháp:

$('elementName');

VD: CSS cho tất cả các thẻ div trong trang.

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

Xem Kết Quả

Chọn theo class

-Để chọn theo tên class của thẻ HTML thì các bạn sử dụng cú pháp:

$('.className');

VD: CSS cho tất cả các thẻ tên class là ‘website‘

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

Xem Kết Quả

Chọn theo ID

-Để chọn theo cách này thì các bạn sử dụng cú pháp:

$('#idName');

VD: CSS cho các thẻ có id là ‘website‘.

$('#website').css('color','red');

Xem Kết Quả

Chọn nhiều bộ chọn

-Để chọn nhiều bộ chọn thì các bạn chỉ cần đặt nó cách nhau bởi dấu , 

VD: CSS cho thẻ p và thẻ div.

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

Xem Kết Quả

Chọn theo thẻ theo id, class cụ thể.

-Để chọn theo cách này thì các bạn sử dụng cú phap sau:

$('element.class');
//hoặc
$('element.id');

VD: CSS chữ đỏ cho thẻ div có id là banner và chữ xanh lá cây cho thẻ p có class là website.

$('div#slogan').css('color','red');
$('p.website').css('color','green');

Xem Kết Quả

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

-Để chọn theo cách này các bạn sử dụng cú pháp:

$('parent > child');

VD: CSS cho thẻ p nằm bên trong thẻ div.

$('div > p').css('color','green');

Xem Kết Quả

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

-Để sủ dụng cách này các bạn sử dụng cú pháp:

//lấy theo vị trí từ trên xuống, bắt đầu từ 0
$('selector:eq(n)');
//Lấy theo vị trí từ dưới lên, bắt đầu từ -1
$('selector:eq(-n)');

VD: CSS cho div thứ 2 từ trên xuống, và p thứ 2 từ dưới lên.

$('div:eq(1)').css('color','red');
$('p:eq(-2)').css('color','green');

Xem Kết Quả

Chọn các thành phần có vị trí lớn hơn chỉ số được chỉ định.

–Lưu ý: Chỉ số tính từ 0.

Cú Pháp:

$('slector:gt(n)');

VD: CSS cho các thẻ div có thứ tự lớn hơn 2.

$('div:gt(1)').css('color','red');

Xem Kết Quả

Chọn các thành phần có vị trí nhỏ hơn chỉ số được chỉ định.

–Lưu ý: Chỉ số tính từ 0.

Cú Pháp:

$('selector:lt(n)');

VD: CSS cho các thẻ div có vị trí nhỏ hơn 3.

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

Xem Kết Quả

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

Cú pháp:

$('selector:even');

VD: CSS cho các thẻ div ở vị trí lẻ.

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

Xem Kết Quả

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

Cú pháp:

$('selector:odd');

VD: CSS cho các thẻ div ở vị trí chẵn.

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

Xem Kết Quả

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

Cú pháp:

$('selector:first');

VD: CSS cho thẻ div đầu tiên.

$('div:first').css('color','red');

Xem Kết Quả

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

Cú pháp:

$('selector:last');

VD: CSS cho thẻ div cuối cùng.

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

Xem Kết Quả

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

–Cú Pháp:

$('selector:animated');

VD:

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

Xem Kết Quả

Chọn các thành phần chứa attribute xác định.

Cú Pháp:

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

VD: CSS cho thẻ div có title=”thẻ div 4″.

$('div
Lorem ipsum dolor sit amet...
').css('color','red');
      

Xem Kết Quả

selector trong form

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

$('input:text').css('color','green');

Xem Kết Quả

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

$('input:button').css('color','green');

Xem Kết Quả

-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.

$('input:disabled');

-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');

……

Cập nhật thêm….

3, Lời kết.

-Những phần selector phía trên mình trình bày mới chỉ được khoảng 2/3 số lượng các dạng selector mà Jquery hỗ trợ, nếu như các bạn cần tìm hiểu thêm có thể xem tại đây.