BASIC TO ADVANCE

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[title="thẻ div 4"]').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.

Đăng ký nhận tin.

Chúng tôi chỉ gửi tối đa 2 lần trên 1 tháng. Tuyên bố không spam mail!

Vũ Thanh Tài

About author
The best way to learn is to share
Xem tất cả bài đăng

11 Comments

for ($i = 1; $i <= $10; $i++):

nếu bây h em để thẻ div có id = $i

thì e gọi $('#idName'); như thế nào ạ?

tuyền

1 năm trước

Bạn có thể gọi như này nhé:
 

$('#' + i);

 

Vũ Thanh Tài

1 năm trước

https://mangapark.net/manga/dragon-quest-dai-no-daiboken/i312285/c105 dropdown menu ở trang web này dùng jquery mà,mà mình tìm hiểu hoài không thấy ở mục nào

jonh777

8 tháng trước

mình mới search googlre thì ra selectbox phải dùng hàm handselect và window.location.href ,onchange và quang trọng nhất đổi định dạng file là php thì cái <select></select> mới chuyển hướng trang,mà sao 2 trang web xem truyện kia dùng menu <select> </select> không biết có phải chuyển hướng trang hay menu ở 2 trang đó chỉ thay đổi hình ảnh khi dùng mục option ?????????????????

jonh777

7 tháng trước

Nó dùng javascript inline luôn nhé bạn.

Tham khảo: https://prnt.sc/r00nxl

Vũ Thanh Tài

7 tháng trước

thế chắc mấy trang kia không biết toàn là php không ,bởi vì trang helpex nói các trang web page(web con,web phụ )phải là php hàm javascript như hàm handselect mới load trang duoc

https://helpex.vn/question/su-dung-cac-lien-ket-ben-trong-the-lt-tuy-chon-gt--5cc18043ae03f60b182bf3d1

jonh777

7 tháng trước

a jquery cũng làm được như thế à,mình thử áp dụng jquery event như blur,change,focus,focusin,focusout mà không thấy được

jonh777

7 tháng trước

sao bạn không hướng dẫn jquery ui đi ,https://www.javatpoint.com/jquery-ui-tutorial

jonh777

5 tháng trước

Cho em hỏi có cách nào để dùng biến khi dùng eq ko ạ. Vd:const currentpage=1;

$('div:eq(${currentpage-1})').addClass("active");

Em dùng biến như thế này nhưng nó ko addClass đc

Huy Trương

5 tháng trước

Syntax của bạn bị sai nhé bạn. ở đây currentpage-1 đang nhận là string. Bạn có thể sửa bằng 1 trong 2 cách trên để js hiểu nó là biến.

$(`div:eq(${currentpage-1})`).addClass("active");

Hoặc

$('div:eq(' + currentpage - 1 +')').addClass("active");

 

Vũ Thanh Tài

5 tháng trước

sao bạn không trả lời mấy câu hỏi của mình về jquery ui

jonh777

5 tháng trước

Bình luận

Captcha