Основы JQuery: подключение библиотеки и селекторы

Автор: Амадей Красавчик Дериглазов

Как я уже упомянул во введении, чтобы заставить работать на своём сайте JQuery-скрипты, необходимо подключить соответствующую библиотеку, что можно сделать двумя способами:

  • скачать библиотеку с официального сайта: https://jquery.com/download/ и разместить скаченный файл у себя на сервере. Соответственно каждая страничка сайта, которой потребуется использовать JQuery, в разделе должна будет иметь ссылку на неё, что-то типа: <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
  • использовать удалённый CDN сервер. CDN, кстати, кому интересно, расшифровывается, как Content Delivery Network. В этом случае можно ничего не копировать к себе на сервер, а в теге <script> указать в качестве источника адрес нужного файла на удалённом сервере.

Наиболее известными, популярными и надёжными хранилищами являются сервера Google и JQuery. А вот, полезные ссылки на официальные источники Google и JQuery, где можно найти ответы на все вопросы:

  • https://developers.google.com/speed/libraries/?hl=ru-RU&csw=1#libraries
  • http://code.jquery.com/

Селекторы JQuery

Далее, чтобы начать программировать на JQuery необходимо освоить селекторы – это можно сказать основополагающий базис этого тайного программистского знания. Под селектором в данном контексте понимается некая синтаксическая конструкция, которая позволяет задавать условия для поиска нужного элемента или нескольких однотипных элементов html-кода страницы. Чтобы селектор вернул нам объект содержащий найденный элемент, его надо выполнить с помощью команды $(). Чаще всего поиск элементов html-кода осуществляется по идентификатору id тега, по названию тега, классу или произвольному атрибуту. Вот основные примеры применения селекторов на JQuery:

$('#someId') – поиск объекта по идентификатору
$('.someClass') – поиск объектов по названию класса
$('[someAttribute=5]') – поиск объектов по значению атрибута

Условия поиска для селекторов могут быть и составные, например:

$('input.someClass[type=radio]') – такой селектор вернёт набор, в котором будут содержаться все поля ввода на странице с классом someClass и с типом radio.

Далее, получив доступ через селектор к элементам html-кода страницы, которые принято среди профессионалов называть DOM (Document Object Model), мы с этими элементами можем сделать всё, что заблагорассудится. В JQuery для этого есть полный набор инструментов для всевозможных манипуляций.

Начало статьи: Основные достоинства JQuery

Продолжение: Обзор основных методов манипуляций JQuery над элементами DOM

Дата публикации: 28.06.2016

К списку гламурных манифестов сообщества «Профессия – делать сайты»