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