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