Как использовать библиотеку jQuery?

Как использовать библиотеку jQuery?

От автора: приветствую вас, друзья. Продолжаем изучение библиотеки jQuery. В прошлой статье мы узнали, что такое библиотека jQuery, рассмотрели некоторые преимущества ее использования перед нативным JavaScript, а также узнали способы подключения jQuery к веб-странице. В этой статье мы узнаем, как использовать jQuery. Начнем?

Итак, мы подключили библиотеку jQuery. К слову, если вы работаете на локальном сервере, тогда лучше подключать библиотеку jQuery локально, чтобы не тянуть ее из сети. Теперь давайте посмотрим, как же начать использование библиотеки, т.е. как начать с ней работу.

Вся работа с jQuery построена на использовании специальной функции – jQuery(). Также эта функция имеет короткий псевдоним — $(), который чаще всего и используют в коде. Давайте поместим на страницу заголовок H1 и попробуем его выбрать (еще говорят – выбрать в коллекцию). Как вы помните из предыдущей статьи, для выборки используется тот же синтаксис, что и в CSS. В CSS для стилизации заголовка мы бы использовали следующий селектор:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Собственно, также должно работать и в jQuery. Попробуем. Кстати, заодно рядом поместим вариант и на нативном JavaScript:

Теперь заглянем в консоль:

Как и ожидалось, мы получили пустую коллекцию элементов во всех трех случаях. Почему? Потому что JS код мы поместили в самое начало документа и скрипт выполняется слишком рано – искомого заголовка на момент выполнения скрипта в документе еще нет. Если мы его поместим перед закрывающим тегом body, тогда все сработает:

Но возможно нам потребуется подключить наш код JS в начало документа, как быть в этом случае? Библиотека jQuery имеет простое решение. Все, что нам нужно сделать, — обернуть наш код jQuery в специальную функцию:

Вот теперь выборка коллекции на jQuery отлично сработает. Выборка на JS по-прежнему вернет пустую коллекцию:

Конечно, подключать код JS в начало документа сейчас уже не принято, но тем не менее вполне возможно, и в этом случае jQuery нам поможет с работой, выполняя код только после загрузки всего документа.

Также вы можете встретить следующую конструкцию:

Эта запись является аналогом предыдущей, которая неявно вызывает метод ready, дожидающийся загрузки документа. Полная запись, с явным вызовом ready, на сегодня является уже устаревшим вариантом, который не рекомендуется использовать, поэтому используйте сокращенную запись.

На этом сегодня все. Исходники к уроку можно скачать по ссылке. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Полное руководство

Изучите самый популярный язык разработки и станьте высокооплачиваемым профи

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий