Bộ chọn là nền tảng của thư viện jQuery. Chúng sẽ luôn được sử dụng khi sử dụng jQuery để thao tác DOM. Bộ chọn hoạt động như một chức năng để trả về một phần tử phù hợp. Chúng đi kèm với thư viện jQuery và sẵn sàng sử dụng.
Chức năng bộ chọn có một cái nhìn đặc biệt. Nó bắt đầu bằng ký hiệu đô la ($) theo sau là dấu ngoặc đơn.
$()
Những gì được chấp nhận bên trong dấu ngoặc đơn là tên, id hoặc lớp của phần tử được chọn. Sau khi một phần tử được chọn, các phương pháp thay đổi phần tử đó có thể được xâu chuỗi vào hàm bộ chọn bằng cách sử dụng ký hiệu dấu chấm.
$('p').html("Some new content rendered from jQuery") Thao tác này chọn tất cả các phần tử đoạn trên trang và thay thế HTML bên trong chúng bằng một chuỗi. jQuery được xây dựng để truy cập nhanh chóng bất kỳ phần tử hoặc phần tử nào và sử dụng các phương thức để thực hiện các thay đổi mong muốn. Chức năng này giúp bạn không phải phỏng đoán khi tạo một ứng dụng web động.
Bộ chọn jQuery là gì?
Bộ chọn jQuery là một hàm đi kèm với thư viện jQuery. Bắt buộc phải sử dụng jQuery. Nó chấp nhận tên, lớp và / hoặc id dưới dạng một chuỗi cho các tham số của nó. Từ đây, một phương thức jQuery có thể được xâu chuỗi để thực hiện thao tác với DOM.
Tại sao điều này lại hữu ích? jQuery giới thiệu cách viết tắt được tích hợp sẵn cho các phương thức có thể dài dòng trong JavaScript thuần túy, sử dụng bộ chọn để tham chiếu trực tiếp đến một phần tử thay vì gọi document.querySelector () hoặc document.querySelectorAll () .
Bộ chọn jQuery làm giảm JavaScript querySelector() thành $() . Nó được gọi ngầm trên tài liệu thay vì rõ ràng, điều này cũng làm giảm mã bắt buộc.
Cú pháp bộ chọn jQuery
Cho đến nay chúng ta đã nói một cách trừu tượng về hàm bộ chọn jQuery. Bây giờ chúng ta biết rằng nó là một hàm tham chiếu trực tiếp đến một phần tử DOM được chỉ định. Tất cả những gì được yêu cầu là tên phần tử, lớp hoặc id. Tên cũng có thể được kết hợp với một lớp hoặc id tùy thuộc vào cách tổ chức HTML của bạn.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã 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 công việc đầu tiên của họ.
Bộ chọn có thể chung chung như chọn tất cả các phần tử trên trang:
$('*')
Sử dụng jQuery như thế này thường không được khuyến khích. Một thực tế phổ biến hơn là chọn một nhóm các phần tử giống nhau. Ví dụ:nếu chúng tôi muốn thay đổi tất cả các thành phần của đoạn văn, chúng tôi có thể chọn chúng trực tiếp:
$('p') Bây giờ chúng tôi đã chọn tất cả các thẻ
trên trang hiện tại. Từ đây, chúng tôi xâu chuỗi một phương thức jQuery để thực hiện thay đổi.
$('p').html('Replace original paragraph HTML with this.')
html() phương pháp thay thế các thuộc tính HTML của tất cả các thẻ
đã chọn.
Điều gì sẽ xảy ra nếu chúng ta chỉ muốn một phần tử đoạn văn cụ thể? Giả sử chúng ta có nhiều thẻ
. Một trong số họ có id là ‘new-content.’ Chúng tôi có thể chọn trực tiếp.
$('p#new-content')
Các bộ chọn jQuery sử dụng tham chiếu CSS đến các phần tử (# =id,. =Class). Bây giờ, chỉ phần tử đoạn văn có id là ‘new-content’ được chọn và sẵn sàng để thay đổi.
Cuối cùng cho phép chọn một phần tử với một lớp được chỉ định. Ứng dụng của chúng tôi có một số phần tử
$('div.main-content') Bây giờ tất cả nội dung được bao bọc trong
Kết luận
Hàm bộ chọn jQuery là hàm điều khiển thư viện. Điều cần thiết là phải biết cách làm việc với hàm selector và cách liên kết các phương thức jQuery với nó để nhận ra toàn bộ sức mạnh của jQuery. Chúng ta đã tìm hiểu bộ chọn jQuery là gì và cú pháp liên quan đến việc chọn các phần tử.
Đến đây, bạn đã hiểu rõ về jQuery selector là gì và cách sử dụng nó. Từ đây, hãy thực hành sử dụng bộ chọn và xâu chuỗi các phương thức jQuery với nó để có một chút thú vị thực sự! Chúc bạn viết mã vui vẻ!