Главная > jQuery > Как работает jQuery

Как работает jQuery

Основы jQuery:

Статья создана для того, чтобы помочь начинающим использовать jQuery.

Загрузить саму библиотеку можно здесь jQuery.

Для начала создадим тестовую HTML-страничку со следующим содержимым:

Измените значение атрибута src в теге

так, что бы он указывал на Вашу копию библиотеки jquery.js. Если jquery.js расположен в той же директории, что и Ваш HTML-файл, то оставьте src = “jquery.js”

Внимание: Если страница подключается с помощью PHP функций include() или require(), убедитесь, что данный код расположен внутри , а не внутри  .  Подключение скрипта jQuery внутри  не будет работать.

Запуск кода по событию Document Ready

Первая вещь, которую делают большинство Javascript программистов – это добавление подобного кода в их программу:

Внутри которого располагается код, который должен выполняться сразу после загрузки страницы. Проблема в том, что этот код Javascript не выполнится пока все изображения не загрузятся (включая баннеры).

Для обхода этой проблемы в jQuery есть простое выражение, которое проверяет документ и ожидает, когда он будет готов к каким-либо действиям. Это выражение известно, как событие ready.

Внутри события ready добавим обработчик клика по ссылке:

Сохраните HTML файл и перезагрузите Вашу тестовую страницу в браузере. Теперь, перед переходом по ссылке браузер покажет alert с сообщением.

Для события  click и большинства других событий, вы можете не допустить поведение по умолчанию, вызвав event.preventDefault() в обработчике события:

Завершенный пример

Ниже представлен пример того, как должен выглядеть HTML файл нашего примера. Обратите внимание, что здесь идет ссылка на Google’s CDN для загрузки библиотеки jQuery. И пока что скрипт расположен в , но в будущем размещайте его в отдельном файле, а этот файл подключайте с помощью атрибута src тега

.

Добавление и удаление CSS класса

Важно: Все следующие примеры  jQuery должны быть расположены внутри события event, для того чтобы они выполнялись, когда документ готов к работе. См. выше “Запуск кода по событию Document Ready”.

Одна из стандартных задач – добавление (удаление) CSS класса.

Для начала, добавим некоторую информацию, касающуюся стиля, в  Вашего документа:

Теперь добавим вызов addClass в скрипт:

И все Ваши элементы стали “жирными”.

Для удаления класса используйте removeClass

Специальные эффекты

Библиотека jQuery предоставляет различные удобные эффекты.

Например, попробуйте следующий код:

Теперь, если вы кликните по ссылке, то она медленно исчезнет.

Колбэки и функции

Колбэк – это функция, которая передается в качестве аргумента другой функции и выполняется после того, как родительская функция завершила свое выполнение.

Колбэк без аргументов:

Колбэк с аргументами:

Неправильно:

В данном случае сначала будет выполнена функция myCallBack, а потом её результат передан функции $.get() в качестве параметра.

Правильно:

По материалам статьи: Tutorials: How jQuery Works



  1. Комментариев пока нет.
  1. Трекбеков пока нет.