Điện thoại/ Zalo
0389934723
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');
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');
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');
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');
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');
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');
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');
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');
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');
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');
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');
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');
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');
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');
Các thành phần đang chuyển động
–Cú Pháp:
$('selector:animated');
VD:
$('selector:animated').css('color','yellow');
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″.
$('divLorem ipsum dolor sit amet...
').css('color','red');
selector trong form
-Chọn các thẻ có input type=text.
$('input:text').css('color','green');
-Chọn các thẻ input type=button.
$('input:button').css('color','green');
-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.
