Для чого необхідний і як записується jquery-селектор?
Відео: CSS3 для початківців | # 18 Селектор атрибута
Сучасний веб-дизайнер повинен не тільки володіти основами HTML, CSS і javascript, але і вміти працювати в бібліотеці JQuery, яка фокусується на взаємодії javascript з HTML-документами. Саме вона дозволяє швидко отримати доступ до будь-яких елементів DOM (програмний інтерфейс, що відкриває доступ до вмісту html-файлів) і маніпулювати ними. Основними структурними одиницями цієї бібліотеки є команди. Для того щоб застосувати ту чи іншу команду, потрібен JQuery-селектор.
Формула селектор в бібліотеці JQuery
Селектори в JQuery засновані на використовуваних в CSS. Вони необхідні для вибору елементів HTML-файлу, щоб з їх допомогою викликати ті чи інші методи маніпуляції ними (команди). Пошук по селектору здійснюється за допомогою функції $ (). Наприклад, $ ( `div`).
Селектори можна класифікувати в залежності від способу вибору елементів:
- основні;
- по атрибуту;
- за ієрархією;
- за змістом;
- за матеріальним становищем;
- вибір полів форми;
- інші.
Відео: 05. jQuery - Пишемо свій jQuery-плагін
Основні селектори
У 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 gt; li.light).
Другий випадок - більш загальний. Тут можуть бути обрані і непрямі нащадки якогось елементу. Наприклад, для вибору посилань всередині списку nav пропишемо: $ (ul # nav a).
Таким чином, в JQuery елементи можуть вибиратися різними способами з використанням таких параметрів, як клас, ID, атрибути, зміст або ієрархія елементів HTML-документа.
