JavaScript для верстальщика. Урок 03. Селекторы
http://api.jquery.com/ - сайт документации по работе с jQuery.
Раздел Selectors - получение доступа к элементам.
Основные селекторы - селекторы по классу и по id.
Важно! Нежелательно привязывать js к классам, отвечающие за стилевое оформление.
Если к элементу привязывается js-функция, добавляем ему класс, начинающийся с префикса js-
Селектор по классу:
$ (".js-get-started")
Проверяем, правильно ли мы получили доступ:
$ (".js-get-started").text("Test");
Надпись на кнопке изменилась на Test.
Если для стилизации селекторы по id крайне не рекомендуются, до для js они используются очень часто, тем более, что выборка по id работает быстрее.
Ограничение - id на странице может быть только один.
Селектор по id:
$ ("#js-get-started")
Контекстный селектор - выберет все ссылки вложенные в меню:
$ ("#js-nav a")
Дочерний селектор - выберет только ссылки первого уровня вложенности:
$ ("#js-nav > a")
Выбор первого элемента:
$ ("#js-nav a:first-child")
Вывод: создавайте отдельные классы или отдельные id для элементов, которые будете использовать в js
Раздел Selectors - получение доступа к элементам.
Основные селекторы - селекторы по классу и по id.
Важно! Нежелательно привязывать js к классам, отвечающие за стилевое оформление.
Если к элементу привязывается js-функция, добавляем ему класс, начинающийся с префикса js-
Селектор по классу:
$ (".js-get-started")
Проверяем, правильно ли мы получили доступ:
$ (".js-get-started").text("Test");
Надпись на кнопке изменилась на Test.
Если для стилизации селекторы по id крайне не рекомендуются, до для js они используются очень часто, тем более, что выборка по id работает быстрее.
Ограничение - id на странице может быть только один.
Селектор по id:
$ ("#js-get-started")
Контекстный селектор - выберет все ссылки вложенные в меню:
$ ("#js-nav a")
Дочерний селектор - выберет только ссылки первого уровня вложенности:
$ ("#js-nav > a")
Выбор первого элемента:
$ ("#js-nav a:first-child")
Вывод: создавайте отдельные классы или отдельные id для элементов, которые будете использовать в js