Для чого необхідний і як записується JQuery-селектор?

Сучасний веб-дизайнер повинен не тільки володіти основами HTML, CSS і javascript, але і вміти працювати в бібліотеці JQuery, яка фокусується на взаємодії javascript з HTML-документами. Саме вона дозволяє швидко отримати доступ до будь-яких елементів DOM (програмний інтерфейс, що відкриває доступ до вмісту html-файлів) і маніпулювати ними. Основними структурними одиницями цієї бібліотеки є команди. Для того щоб застосувати ту чи іншу команду, потрібен JQuery-селектор.

Формула селекторів в бібліотеці JQuery

Селектори в JQuery засновані на використовуваних в CSS. Вони необхідні для вибору елементів HTML-файлу, щоб з їх допомогою викликати ті чи інші методи маніпуляції ними (команди). Пошук по селектору здійснюється за допомогою функції $ (). Наприклад, $ (`div`).

Селектори можна класифікувати залежно від способу вибору елементів:

• основние;
• по атрібуту;
• по іерархіі;
• по содержанію;
• по положенію;
• вибір полів форми;
• інші.

Основні селектори

У 90% випадків при роботі з даною бібліотекою використовується JQuery-селектор, що відноситься до основної групи. Всі вони досить прості і зрозумілі. Розглянемо кожен з них:

• * - Вибирає всі елементи сторінки, включаючи head, body і інших.;
• p / div / sidebar / ... - вибирає всі елементи, що відносяться до заданого тегом (т. е. до p.div, sidebar та ін.) ;
• .myClass / p.myClass - вибирає елементи з вказаним ім`ям класу;
• # MyID / p. # MyID - вибирає якийсь один елемент із заданим ID.

Наведемо приклад. Припустимо, нам необхідно вибрати всі елементи сторінки з класом par, запис буде виглядати наступним чином: $ (. Par). Якщо ж потрібні тільки елементи p цього класу, то пропишемо: $ (p.par).

Селектори атрибутів

Основний JQuery-селектор можна використовувати, якщо нам необхідно вибрати елемент, що відноситься до якогось класу, який має ID або ж вибрати всі елементи сторінки. Однак бувають випадки, коли потрібний елемент не має класу або ID. Саме для цього й існують селектори по атрибуту. Вони дозволяють робити вибірку по якомусь атрибуту HTML-елемента, наприклад, по href або src. Записується цей атрибут в квадратних дужках [].

Найпростіший приклад: $ ([src]) - вибір всіх елементів, що мають атрибут src. Можна звузити область вибірки, задавши атрибуту певне значення: $ ([src = `value`]).

Ви можете використовувати в JQuery кілька селекторів, якщо необхідно звузити область вибору. Наприклад, $ (p [color = blue] [size = 12]) - будуть обрані тільки ті елементи p, які мають блакитний колір і розмір 12.

Селектори за змістом

У тому випадку, якщо немає можливості вибрати елементи по атрибутам або за основними селекторам, то варто звернутися до їх змісту. Усього є 4 селектора даного виду:

• : Contains - вибирає елементи, що містять заданий текст;
• : Has - вибирає елементи, які містять інші елементи, характерні для даної строкі;
• : Parent - вибирає елементи, які містять будь-які інші;
• : Empty - вибирає елементи, що не містять ніяких інших.

Наведемо приклад. Для того, щоб вибрати всі елементи div, що містять текст Hello, потрібно записати $ (div: contains (`Hello`)).

Селектори по ієрархії

Є і ще один спосіб вибору елементів в JQuery, а саме - згідно їх ієрархії (тобто співвідношення один до одного на HTML-сторінці). Їх дуже багато, тому наведемо два найбільш популярних: "дитина" і "нащадок".

У першому випадку вибираються елементи, які є прямими нащадками (дитина) заданого елемента (предок). Наприклад, щоб вибрати елементи списку в класі light, які є дитиною списку nav, то потрібно записати: $ (ul # nav> li.light).

Другий випадок - більш загальний. Тут можуть бути вибрані і непрямі нащадки якогось елементу. Наприклад, для вибору посилань усередині списку nav пропишемо: $ (ul # nav a).

Таким чином, в JQuery елементи можуть вибиратися різними способами з використанням таких параметрів, як клас, ID, атрибути, зміст або ієрархія елементів HTML-документа.