Для чого необхідний і як записується 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-документа.