Bộ chọn jQuery
Bộ chọn jQuery là một trong những phần quan trọng nhất của thư viện jQuery.
Bộ chọn jQuery
Bộ chọn jQuery cho phép bạn chọn và thao tác (các) phần tử HTML.
Bộ chọn jQuery được sử dụng để "tìm" (hoặc chọn) các phần tử HTML dựa trên tên, id, lớp, loại, thuộc tính, giá trị của thuộc tính và hơn thế nữa. Nó dựa trên Bộ chọn CSS hiện có và ngoài ra, nó còn có một số bộ chọn tùy chỉnh riêng.
Tất cả các bộ chọn trong jQuery đều bắt đầu bằng ký hiệu đô la và dấu ngoặc đơn: $().
Bộ chọn phần tử
Bộ chọn phần tử jQuery chọn các phần tử dựa trên tên phần tử.
Bạn có thể chọn tất cả các phần tử <p> trên một trang như thế này:
$("p")
Ví dụ
Khi người dùng nhấp vào nút, tất cả các phần tử <p> sẽ bị ẩn:
Ví dụ
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Hãy tự mình thử »Bộ chọn #id
Bộ chọn jQuery # id sử dụng thuộc tính id của thẻ HTML để tìm phần tử cụ thể.
ID phải là duy nhất trong một trang, vì vậy bạn nên sử dụng bộ chọn #id khi bạn muốn tìm một phần tử duy nhất.
Để tìm một phần tử có id cụ thể, hãy viết ký tự băm, theo sau là id của phần tử HTML:
$("#test")
Ví dụ
Khi người dùng nhấp vào nút, phần tử có id="test" sẽ bị ẩn:
Ví dụ
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Hãy tự mình thử » Bộ chọn .class
Bộ chọn .class của jQuery tìm các phần tử có một lớp cụ thể.
Để tìm các phần tử thuộc một lớp cụ thể, hãy viết ký tự dấu chấm, theo sau là tên của lớp:
$(".test")
Ví dụ
Khi người dùng nhấp vào nút, các phần tử có class="test" sẽ bị ẩn:
Ví dụ
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Hãy tự mình thử »Thêm ví dụ về Bộ chọn jQuery
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | Try it |
| $(this) | Selects the current HTML element | Try it |
| $("p.intro") | Selects all <p> elements with class="intro" | Try it |
| $("p:first") | Selects the first <p> element | Try it |
| $("ul li:first") | Selects the first <li> element of the first <ul> | Try it |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | Try it |
| $("[href]") | Selects all elements with an href attribute | Try it |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | Try it |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | Try it |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | Try it |
| $("tr:even") | Selects all even <tr> elements | Try it |
| $("tr:odd") | Selects all odd <tr> elements | Try it |
Sử dụng Trình kiểm tra bộ chọn jQuery của chúng tôi để minh họa các bộ chọn khác nhau.
Để có tài liệu tham khảo đầy đủ về tất cả các bộ chọn jQuery, vui lòng truy cập Tài liệu tham khảo về bộ chọn jQuery của chúng tôi.
Các chức năng trong một tệp riêng biệt
Nếu trang web của bạn chứa nhiều trang và bạn muốn dễ dàng bảo trì các hàm jQuery, bạn có thể đặt các hàm jQuery của mình vào một tệp .js riêng.
Khi chúng tôi trình diễn jQuery trong hướng dẫn này, các hàm sẽ được thêm trực tiếp vào phần <head> . Tuy nhiên, đôi khi tốt hơn là đặt chúng trong một tệp riêng biệt, như thế này (sử dụng thuộc tính src để tham chiếu đến tệp .js):
Ví dụ
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>
