Статьи по jQuery

Добро пожаловать в мир jQuery!

jQuery — это JavaScript-библиотека, обеспечивающая кроссбраузерную поддержку приложений. Автор библиотеки Джон Резиг (John Resig) впервые представил свое творение в январе 2006 года на компьютерной конференции в Нью-Йорке, а в августе того же года была выпущена первая стабильная версия библиотеки. За прошедшие годы библиотека претерпела множество изменений и на текущий день содержит функционал, полезный для максимально широкого круга задач. Она имеет небольшой размер и не засоряет глобальное пространство имен тривиальными идентификаторами.

jQuery logo

Основы jQuery

Подключение библиотеки jQuery
Определение готовности документа
Обработка конфликтных ситуаций
Форматы функции $()

Селекторы

Часто используемые селекторы
Группирование селекторов
Привязка к элементам документа
Привязка к параметрам тегов
Псевдоклассы

Перебор элементов

Доступ к элементу по индексу
Метод each()

Изменение коллекции элементов

Добавление и фильтрация элементов
Привязка поиска к другим элементам
Метод map()

Манипуляции с элементами

Изменение содержимого элементов
Добавление содержимого перед элементом или после него
Вложение элементов
Перемещение и клонирование элементов
Очистка содержимого и удаление элемента
Замена элемента
Изменение атрибутов CSS
Управление классами стилей
Доступ к параметрам тегов
Вычисление положения элементов

Обработка событий

События документа
События мыши
События клавиатуры
События формы
Универсальные обработчики событий
Методы live() и die()
Всплывание событий
Действия по умолчанию и их отмена

Эффекты и анимация

Управление отображением элемента
Изменение прозрачности элемента
Создание анимации
Прерывание анимации
Управление очередью анимаций

Обработка данных формы

Текстовое поле и поле ввода пароля
Поле для ввода многострочного текста
Список с возможными значениями
Флажок и переключатели
Обработка щелчка на кнопке
Получение всех значений формы

Вспомогательные функции и свойства

Функция $.each() — перебор элементов
Функция $.grep() — поиск в массиве
Функция $.map() — преобразование массива
Функция $.inArray() — поиск элемента в массиве
Функция $.merge() — объединение массивов
Функция $.makeArray() — создание массива элементов
Функция $.unique() — удаление повторяющих элементов
Функция $.trim() — удаление пробельных символов
Функции $.data() и $.removeData() — работа с данными
Свойство $.browser — определение типа и версии браузера
Свойство $.boxModel — определение блочной модели
Создание собственных модулей

Основы технологии AJAX

Обмен данными с помощью тега <iframe>
Объект XMLHttpRequest
Обмен данными в текстовом формате
Обмен данными в формате XML
Обмен данными в формате JSON

Поддержка AJAX в jQuery

Метод load()
Функция $.getJSON()
Функция $.getScript()
Функция $.get()
Функция $.post()
Функция $.ajax()
Глобальные обработчики событий AJAX

Потрясающие возможности механизма селекторов, позволяющие легко получить доступ к любому элементу объектной модели документа, сделали библиотеку jQuery очень популярной. Судите сами. Чтобы получить ссылку на DOM-элемент с помощью JavaScript обычно используется метод getElementById(). Например, изменим HTML-код элемента с идентификатором div1.

document.getElementById("div1").innerHTML = "Новый текст";

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

$("#div1").html("Новый текст");

Конечно, ради одной этой строки не имеет смысла подключать целую библиотеку. Но все дело в том, что функционал селекторов далеко не ограничивается одним идентификатором. Возможности селекторов можно сравнить разве что с регулярными выражениями языка Perl. В качестве примера изменим цвет текста во всех элементах A, в параметре href которых содержится ссылка на HTML-документ, причем элемент A должен быть расположен внутри элемента DIV, имеющего стилевой класс cls1.

$("div.cls1 a[href$='.html']").css("color", "red");

Попробуйте выполнить аналогичную операцию с помощью JavaScript. Для этого понадобится далеко не одна строка кода.

Еще одной отличительной особенностью библиотеки jQuery является возможность составлять цепочки из вызовов методов, так как большинство методов jQuery возвращает объект, с которым можно производить дальнейшие манипуляции.

$("#message")         // Получили ссылку на элемент с id=message
   .html("Сообщение") // Изменили текст внутри элемента
   .parent()          // Получили ссылку на родительский элемент
   .css("background-color", "#fff4dd") // Задали цвет фона
   .width(300)        // Ширина
   .height(200)       // Высота
    // Плавно отобразили элемент за счет изменения прозрачности
   .fadeIn(3000);

Библиотека jQuery не оставила без внимания и технологию AJAX, позволяющую обмениваться данными с сервером без перезагрузки веб-страницы. Мы изучим базовые свойства и методы объекта XMLHttpRequest и рассмотрим очень удобный интерфейс доступа к AJAX, предоставляемый библиотекой jQuery.

jQuery UI logo

Большой популярности jQuery способствовали также дополнительные модули, реализующие готовые компоненты или добавляющие новую функциональность. Мы рассмотрим библиотеку визуальных компонентов пользовательского интерфейса jQuery UI. Эта библиотека предоставляет готовые решения, которые может использовать практически любой разработчик, даже не владея основами jQuery и JavaScript. Без особого труда можно создать компонент "Аккордеон", панель с вкладками, различные пользовательские диалоговые окна, вставить в веб-страницу календарь. Библиотека jQuery UI добавляет возможность перемещения и изменения размеров любых элементов с помощью мыши, позволяет сортировать и выделять элементы, а также предоставляет множество визуальных эффектов, которые сделают ваш сайт более привлекательным.

Библиотека jQuery UI

Модуль UI Draggable — перемещение элементов
Модуль UI Droppable — "сбрасывание" элементов
Модуль UI Sortable — сортировка элементов
Модуль UI Selectable — выделение элементов
Модуль UI Resizable — изменение размеров
Модуль UI Accordion — компонент "Аккордеон"
Модуль UI Tabs — панель с вкладками
Модуль UI Dialog — диалоговые окна
Модуль UI Datepicker — календарь
Модуль UI Progressbar — индикатор хода процесса
Модуль UI Slider — шкала с бегунком
Модуль UI Effects — визуальные эффекты
Плавное изменение цвета
Управление классами стилей
Методы, позволяющие использовать эффекты
Эффекты

Благодаря своей универсальности библиотека jQuery будет полезна практически любому разработчику. Она подходит новичку, так как позволяет забыть о проблеме с кроссбраузерностью приложения (вышел новый веб-браузер — сменил версию библиотеки и все опять работает). Библиотека идеальна для профессионалов, так как позволяет сократить код минимум в три раза. А это в свою очередь позволит написать очень сложный код с минимальными усилиями и потерей времени.

Желаю приятного изучения и надеюсь, что статьи помогут Вам реализовать как самые простые, так и самые сложные приложения.

Для понимания материала Вам потребуются знания по основам HTML, JavaScript и PHP в объеме книги HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера.

HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. 5-е изд.

Подробное описание книги "HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. 5-е изд."

  Все статьи Следующая статья