jQuery Selectors
jQuery selectors là một trong những phần quan trọng nhất của thư viện jQuery.
jQuery Selectors
jQuery selectors cho phép bạn chọn và thao tác các phần tử HTML.
jQuery selectors được sử dụng để "tìm" (hoặc chọn) các thành phần HTML dựa trên name, id, class, types, attributes, values of attributes và nhiều hơn nữa. Nó dựa trên CSS Selectors và thêm vào đó, nó có một số bộ chọn (selectors) tùy chỉnh riêng.
Tất cả selectors trong jQuery bắt đầu bằng ký hiệu đô la và dấu ngoặc đơn: $().
The element Selector
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ả phần tử <p> trên trang như sau:
$("p")Ví dụ
Khi click vào button, tất cả phẩn tử <p> sẽ hide:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});The #id Selector
Bộ chọn jQuery theo id #id sử dụng thuộc tính id của thẻ HTML để tìm phần tử cụ thể.
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 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ự thăng, theo sau là tên id của phần tử HTML:
$("#test")Ví dụ
Khi click vào button, phần tử với id="test" sẽ hide:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});The .class Selector
Bộ chọn jQuery theo .class tìm các phần tử với class cụ thể.
Để tìm các phần tử với class cụ thể, hãy viết dấu chấm, theo sau là tên của class:
$(".test")Ví dụ
Khi click vào button, các phần tử có class="test" sẽ hide:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});Thêm các ví dụ về jQuery Selectors
| Cú pháp | Mô tả |
|---|---|
| $("*") | Chọn tất cả các phần tử |
| $(this) | Chọn phần tử HTML hiện tại |
| $("p.intro") | Chọn tất cả các phần tử <p> có class="intro" |
| $("p:first") | Chọn phần tử <p> đầu tiên trong trang |
| $("ul li:first") | Chọn phần tử <li> đầu tiên trong <ul> đầu tiên |
| $("ul li:first-child") | Chọn phần tử <li> đâu tiên của tất cả <ul> |
| $("[href]") | Chọn tất cả các phần tử có thuộc tính href |
| $("a[target='_blank']") | Chọn tất cả các phần tử <a> với giá trị thuộc tính target="_blank" |
| $("a[target!='_blank']") | Chọn tất cả các phần tử <a> với giá trị thuộc tính target khác "_blank" |
| $(":button") | Chọn tất cả các phần tử <button> và <input> với type="button" |
| $("tr:even") | Chọn tất cả các dòng <tr> chẵn |
| $("tr:odd") | Chọn tất cả các dòng <tr> lẻ |
Để các phương thức ở file riêng
Nếu web của bạn chứa nhiều trang, bạn muốn dùng chung các hàm jQuery của mình, bạn có thể đặt các hàm jQuery của mình vào một tệp .js riêng biệt.
<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>Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
