jQuery selectors là một trong những phần quan trọng nhất của thư viện jQuery.
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: $().
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();
});
});
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();
});
});
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();
});
});
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ẻ |
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>
Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Công nghệ ZicZac Việt Nam.
Website: https://gozic.vn
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website