Tại sao chúng ta cần và làm thế nào để ghi lại JQuery-selector?

nhà thiết kế web hiện đại nên không chỉ nắm vững những điều cơ bản của HTML, CSS và JavaScript, nhưng cũng có thể làm việc trong thư viện JQuery, trong đó tập trung vào sự tương tác của JavaScript với HTML-tài liệu. Nó cho phép truy cập nhanh đến bất kỳ phần tử DOM (giao diện lập trình ứng dụng cung cấp quyền truy cập vào nội dung html-files) và thao tác chúng. Các đơn vị cấu trúc chính của thư viện là đội. Để áp dụng một hoặc các đội bóng khác, bạn cần một JQuery-selector.

selectors thức trong thư viện JQuery

Các selectors trong JQuery dựa trên sử dụng trong CSS. Họ được yêu cầu để chọn các mục HTML-file, sử dụng chúng để gây ra những phương pháp khác hoặc thao túng họ (đội). Tìm kiếm được thực hiện thông qua selector $ () chức năng. Ví dụ, $ ( 'div').

Các bộ chọn có thể được phân loại tùy thuộc vào cách lựa chọn các yếu tố:

• cơ bản;
• bởi thuộc tính;
• hệ thống phân cấp;
• nội dung;
• về tình hình;
• lựa chọn các trường biểu mẫu;
• những người khác.

selectors chủ chốt

Trong 90% các trường hợp khi sử dụng thư viện này được sử dụng JQuery-selector thuộc nhóm chính. Tất cả trong số họ là khá đơn giản và rõ ràng. Chúng ta hãy xem xét từng trong số họ:

• * - chọn tất cả các yếu tố trang, trong đó có người đứng đầu, cơ thể, vv;.
• p / div / sidebar / ... - chọn tất cả các yếu tố liên quan đến từ khóa được xác định trước (ví dụ để p.div, sidebar, vv ...);
• .myClass / p.myClass - lựa chọn các yếu tố với tên lớp theo quy định;
• # Myid / p # myid -. Chọn bất kỳ một hạng mục với ID nhất định.

Dưới đây là một ví dụ. Hãy nói rằng chúng ta cần phải chọn tất cả các yếu tố trên trang với entry lớp mệnh sẽ như sau: (. Mệnh) $. Nếu chỉ có các yếu tố cần thiết p của lớp này, sau đó viết: $ (p.par).

thuộc tính selectors

Bạn có thể sử dụng JQuery chính-selector, nếu chúng ta cần phải chọn một mục thuộc bất kỳ lớp có ID hoặc chọn tất cả các yếu tố trên trang. Tuy nhiên, có những trường hợp khi một mục không có lớp hoặc ID. Đó là cho điều này và có những lựa chọn bởi thuộc tính. Chúng cho phép bạn tạo một vùng chọn trên một số thuộc tính của HTML-yếu tố, chẳng hạn như href hoặc src. Thuộc tính này được viết bằng dấu ngoặc vuông [].

Ví dụ đơn giản nhất: $ ([src]) - chọn tất cả các yếu tố có thuộc tính src. Có thể thu hẹp mẫu bằng cách xác định giá trị thuộc tính nhất định: $ ([src = 'http: // site / bài viết / 132.222 / giá trị']).

Bạn có thể sử dụng một số selectors JQuery nếu bạn muốn thu hẹp lĩnh vực lựa chọn. Ví dụ, $ (p [color = blue] [size = 12]) - được lựa chọn chỉ những yếu tố p, trong đó có một màu xanh và kích thước 12.

nội dung selectors

Trong trường hợp đó, nếu bạn không thể chọn các yếu tố dựa trên thuộc tính hoặc bộ chọn cơ bản, bạn nên tham khảo nội dung của họ. Trong tổng số có 4 selector thuộc loại này:

• : Chứa - chọn mục có chứa các văn bản quy định;
• : Có - lựa chọn các yếu tố có chứa các nguyên tố khác đặc trưng của dòng;
• : Mẹ - lựa chọn các yếu tố có chứa bất kỳ khác;
• : Hết - lựa chọn yếu tố mà không chứa bất kỳ khác.

Dưới đây là một ví dụ. Để chọn tất cả các yếu tố div, có chứa nội dung của Xin chào, bạn cần phải viết $ (div: chứa ( 'Hello')).

hệ thống cấp bậc selectors

Có một cách khác để chọn các yếu tố trong JQuery, cụ thể là - theo phân cấp của họ (có nghĩa là, tỷ lệ nhau trên trang HTML). Rất nhiều trong số họ, vì vậy chúng tôi trình bày hai trong số những phổ biến nhất, "trẻ em" và "hậu duệ".

Trong trường hợp đầu tiên các yếu tố được lựa chọn, đó là hậu duệ trực tiếp (trẻ em) của một nguyên tố (tổ tiên). Ví dụ, để chọn các phần tử của danh sách trong lớp ánh sáng đó là một danh sách nav đứa trẻ, sau đó bạn cần phải viết: $ (ul # nav> li.light).

Trường hợp thứ hai - một tổng quát hơn. Có thể được lựa chọn và con cháu gián tiếp của phần tử. Ví dụ, để chọn liên kết trong danh sách nav định: $ (ul # nav a).

Như vậy, trong JQuery yếu tố có thể được lựa chọn theo những cách khác nhau bằng cách sử dụng các thông số như một lớp, ID, thuộc tính, nội dung hay hệ thống các phần tử HTML-tài liệu.