Bộ chọn (selectors) là nền tảng của thư viện jQuery. Chúng luôn được dùng khi dùng jQuery thao tác DOM. Bộ chọn hoạt động như hàm trả về phần tử khớp. Chúng đi kèm thư viện jQuery và sẵn sàng dùng ngay.
Hàm bộ chọn có diện mạo đặc trưng. Bắt đầu bằng dấu dollar ($) theo sau ngoặc đơn.
$()
Điều được chấp nhận trong ngoặc đơn là tên, id, hoặc class của phần tử được chọn. Sau khi phần tử được chọn, phương thức thay đổi phần tử có thể nối vào hàm bộ chọn dùng ký pháp chấm.
$('p').html("Nội dung mới hiển thị từ jQuery")
Điều này chọn tất cả phần tử đoạn văn trên trang và thay thế HTML bên trong bằng chuỗi. jQuery được xây dựng để truy cập nhanh bất kỳ phần tử nào và dùng phương thức tạo thay đổi mong muốn. Chức năng này loại bỏ sự đoán mò khi tạo ứng dụng web động.
jQuery Selector là gì?
jQuery selector là hàm đi kèm thư viện jQuery. Nó bắt buộc để dùng jQuery. Nó chấp nhận tên, class, và/hoặc id như chuỗi cho tham số. Từ đây, phương thức jQuery có thể nối vào để thao tác DOM.
Tại sao hữu ích? jQuery giới thiệu viết tắt tích hợp trong phương thức có thể冗长 trong JavaScript thuần túy, dùng bộ chọn tham chiếu trực tiếp phần tử thay vì gọi document.querySelector() hoặc document.querySelectorAll().
jQuery selector rút gọn JavaScript querySelector() thành $(). Nó được gọi ngầm trên document thay vì tường minh, cũng giảm mã yêu cầu.
Cú pháp jQuery Selector
Cho đến nay chúng ta nói trừu tượng về hàm bộ chọn jQuery. Chúng ta biết nó là hàm tham chiếu trực tiếp phần tử DOM chỉ định. Tất cả yêu cầu là tên phần tử, class, hoặc id. Tên cũng có thể kết hợp với class hoặc id tùy cách HTML tổ chức.
81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.
Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.
Bộ chọn có thể chung chung như chọn tất cả phần tử trên trang:
$('*')
Dùng jQuery như vậy thường không khuyến nghị. Thực hành phổ biến hơn là chọn nhóm phần tử cùng loại. Ví dụ, muốn thay đổi tất cả phần tử đoạn văn, ta chọn trực tiếp:
$('p')
Chúng ta đã chọn tất cả thẻ <p> trên trang hiện tại. Từ đây, nối phương thức jQuery để tạo thay đổi.
$('p').html('Thay thế HTML đoạn văn gốc bằng này.')
Phương thức html() thay thế thuộc tính HTML của tất cả thẻ <p> được chọn.
Điều gì nếu chỉ muốn phần tử đoạn văn cụ thể? Giả sử có nhiều thẻ <p>. Một trong đó có id 'new-content'. Ta chọn trực tiếp.
$('p#new-content')
jQuery selector dùng tham chiếu CSS đến phần tử (# = id, . = class). Bây giờ chỉ phần tử đoạn văn với id 'new-content' được chọn và sẵn sàng thay đổi.
Cuối cùng chọn phần tử với class gán. Ứng dụng có vài phần tử <div>. Một vài bao bọc trong <div> với class 'main-content'. Nếu muốn chọn nội dung chính để thay đổi động, truyền tên và class cho bộ chọn.
$('div.main-content')
Bây giờ tất cả nội dung bao bọc trong <div> được chọn sẵn sàng thao tác.
Kết luận
Hàm bộ chọn jQuery là điều điều khiển thư viện. Biết cách làm việc với hàm bộ chọn và nối phương thức jQuery vào nó để khai thác toàn bộ sức mạnh jQuery là thiết yếu. Chúng ta học jQuery selector là gì và cú pháp chọn phần tử.
Bây giờ, bạn nên hiểu rõ jQuery selector là gì và cách dùng. Từ đây, thực hành dùng bộ chọn và nối phương thức jQuery cho vui thực sự! Chúc vui lập trình!