Jquery Cơ bản

[Bài 2] Jquery selector là gì? Sử dụng jquery selector như thế nào?

5/5 - (2 bình chọn)

Sau bài đầu tiên của series học jquery cơ bản thì các bạn đã có khái niệm cơ bản về jquery và biết được cách sử dụng jquery và cú pháp khai báo. Trong bài này mình sẽ hướng dẫn các bạn sử dụng jquery selector.

Jquery selector là gì?

Jquery selector là một thành phần quan trọng trong thư viện jquery. Selector có thể được sử dụng để chọn một hoặc nhiều thành phần HTML. Thành phần HTML nào được chọn thì chúng ta có thể thực hiện các thao tác jquery lên nó. Jquery selector lựa chọn các thành phần HTML dựa trên tên, id, class, attribute,…của chúng. Tất cả các jquery selector bắt đầu với ký hiệu $().

Jquery selector là gì?

Jquery selector là gì?

Sử dụng jquery selector

  • Dựa theo tên thẻ HTML

$(“p”): Chọn tất cả các thẻ p

$(“a”): Chọn tất cả các thẻ a

Ví dụ:

1
2
3
4
5
6
7
<script>
$(document).ready(function(){
   $("button").click(function(){
   $("p").hide();
 });
});
</script>

Khi nhấn nút button thì tất cả các thẻ p bị ẩn đi. Demo

  • Dựa theo id

$(“#test”): Chọn thẻ có id = test

$(“#myid”): Chọn thẻ có id = myid

Ví dụ:

1
2
3
4
5
6
7
<script>
$(document).ready(function(){
   $("button").click(function(){
   $("#myid").hide();
 });
});
</script>

Khi nhấn nút button thì thẻ có id = myid sẽ bị ẩn đi. Demo

  • Dựa theo class

$(“.test”): Chọn thẻ có class = test

$(“.myclass”): Chọn thẻ có class = myclass

1
2
3
4
5
6
7
<script>
$(document).ready(function(){
   $("button").click(function(){
   $(".myclass").hide();
 });
});
</script>

Khi nhấn nút button thì thẻ có class = myclass sẽ bị ẩn đi. Demo

Một số lựa chọn khác:

$(“*”): Chọn tất cả

$(this): Chọn thẻ HTML hiện tại

$(“p#myid”): Chọn tất cả thẻ p có id = myid

$(“p.myclass”): Chọn tất cả thẻ p có class = myclass

$(“[href]”): Chọn tất cả các thẻ có thuộc tính href

$(“ul li:first”): Chọn thẻ li đầu tiên trong thẻ ul

$(“ul li:first-child”): Chọn thẻ li đầu tiên của mỗi thẻ ul

$(“ul li:last-child”): Chọn thẻ li cuối cùng của mỗi thẻ ul

$(“ul li:nth-child(2) “): Chọn thẻ li thứ 2 của mỗi thẻ ul

$(“:button”): Chọn tất cả thẻ button và thẻ input có type = button

$(“tr:even”): Chọn tất cả thẻ tr ở vị trí chẵn

$(“tr:odd”): Chọn tất cả thẻ tr ở vị trí lẻ.

Related Posts

Add Comment