jQuery — это JavaScript-фреймворк, предлагающий мощные инструменты для работы с DOM, AJAX и многим другим. Анимация, "общение" с сервером при помощи AJAX, выборка элементов по имени тега, атрибуту, индексу — на чистом JavaScript это заняло бы не одну страницу кода, но при помощи jQuery это можно сделать одной строчкой кода. Слоган jQuery — "Пиши меньше, делай больше" — говорит сам за себя.
С чего начать? Конечно же, с функции $(), в которой, при помощи простых и мощных селекторов можно выбрать элемент для дальнейшей работы с ним.
Функция имеет два аргумента — selector и context. Разберём selector:
В ней реализованы селекторы из CSS3 и XPath. Для поиска по тегу используйте имя тега, для поиска по id — символ решётки (#), по классу — точку. Для наглядности приведу несколько примеров:
$('div') — выбрать все элементы DIV.
$('.myClass') — выбрать все элементы с классом myClass
$('#myid') — выбрать все элементы с id myid
$('input[name="a"]') — выбрать все input'-ы с name="a"
$('input[name*="nn"]') — выбрать все input'-ы, содержащие в name nn
$('input[name$="nn"]') — выбрать все input'-ы, у которых name заканчивается на nn
$('input[name^="nn"]') — выбрать все input'-ы, name которых начинается с nn
Также есть следующие селекторы:
:visible — выбрать все видимые элементы
:hidden — выбрать все скрытые элементы
:radio — выбрать все радио-кнопки
:checkbox — выбрать все чекбоксы
:text — выбрать все текстовые поля
:password — выбрать все поля для паролей
:reset — выбрать все кнопки сброса формы
:button — выбрать все кнопки
:submit — выбрать все кнопки для отправки формы
:disabled — выбрать все неактивные элементы
:enabled — выбрать все активные элементы
:checked — выбрать все отмеченные элементы
:eq(index) — выбрать элементы с определённым индексом
:first — выбрать первый элемент
:last — выбрать последний элемент
Также эта функция умеет создавать новые элементы на лету:
$('<div/>'); // создан новый DIVС аргументом context всё просто — он указывает, где искать элемент. По умолчанию это document.
В jQuery 1.4 в context можно передавать значения атрибутов, если selector используется для создания элемента:
$('<div/>', {id: 'myid'}); // создан новый DIV, имеющий id myid.
Для манипулирования с элементами есть следующие методы:
html(value) — устанавливает содержимое элемента. Если value пуст, то возвращается текущее содержание элемента
text(value) — устанавливает текст элемента (символы <,>,',",& заменяются на буквенные акронимы). Использовать аналогично методу html()
val(value) — устанавливает value элемента. Использовать аналогично методу html()
attr(attribute, value) — устанавливает значение тега. Если value пуст, то возвращается текущее значение атрибута. Если надо установить несколько атрибутов, то их можно заносить в объект:
$(elem).attr({attr1: value1, attr2: value2});css(param, value) — устанавливает CSS-свойства элемента. Использовать аналогично методу attr()
parent() — возвращает родительский элемент
child() — возвращает дочерний элемент
next() — возвращает следующий элемент
prev() — возвращает предыдущий элемент
before(html) — вставляет HTML перед выбранным элементом
after(html) — вставляет HTML после выбранного элементом
hide() — скрывает элемент
show() — показывает элемент
remove() — удаляет элемент
find(selector) — осуществляет поиск элемента. Работает примерно также, как и $(). Но может выполнять функции, которые не выполнить при помощи $(). Например:
$(elem).parent().find('a');Тут parent() фокусирует this на родительский элемент, прописанный в селекторе, и ищет в нём ссылки.
each(fn) — возвращает все элементы. В fn можно прописать функцию, в которой this будет фокусироваться на каждом элементе (через цикл). Это главное преимущетсво each().
bind(event, fn) — вешает обработчики событий на элемент. event — имя обработчика (click, mouseover и т.д.), fn — функция, выполняющаяся при событии. this опять же фокусируется на каждом из элементов. В jQuery 1.4 появилась возможность вешать сразу несколько обработчиков событий, указывая их в объекте.
Анимация одной строчкой
В jQuery присутствуют несколько методов для работы с анимацией:
slideToggle() — плавно опускает/поднимает элемент
slideUp() — плавно поднимает элемент
slideDown() — плавно опускает элемент
toggle() — показывает/скрывает элемент. Не анимация, но может пригодиться
fadeIn() — плавно проявляет элемент
fadeOut() — плавно растворяет элемент
И, конечно же, самый главный метод — animate(). Имеет четыре аргумента: params (манипулируемые свойства CSS), ease (ускорение/замедление анимации: easeIn или easeOut), speed (время выполнения) и callback (функция, выполняющаяся при завершении анимации).
params представляет собой объект, в который записываются манипулируемые свойства CSS. Например, этот код:
$(elem).animate({height: '200px', marginTop: '300px'}, 1000);В течении одной секунды плавно изменит высоту элемента до 200 пикселей и опустит его вниз на 300 пикселей.
! 1.Манипулировать можно только теми параметрами, которые принимают числовые значения.
! 2. При записи параметров используйте названия объектной модели CSS (не пишите margin-top, а пишите marginTop)
Остановить анимацию можно методом stop().
В jQuery 1.4 появился метод delay(time), который делает задержку перед выполнением анимации (возня с setTimeout отменяется)
Общаемся с сервером при помощи AJAX
Как известно, имеются два вида запросов — get (получить данные) и post (отправить данные). О них сейчас и пойдёт речь.
Для получения данных есть метод $.get. Имеет три аргумета: url (запрашиваемый URL), succes (получение и вывод данных) и callback (функция, выполняющаяся при успешном завершении запроса).
В функцию succes передаётся аргумент, который позволяет искать элементы на другой страницы (вспоминаем про context в $()). Для наглядности приведу пример:
$.get('/index.php', function (data) {
alert($('a:first', data).text());
});Выведет в алерте текст первой ссылки на странице index.php.
Также можно использовать метод load(). Он менее функционален, но короче. Имеет один аргумент, в который записывается сначала URL, а потом селектор:
$(elem).load('/index.php a:first');Загрузит в элемент elem содержимое первой ссылки на странице index.php
Для отправки данных используется метод $.post(). Имеет те же параметры, что и $.get. Разница в том, что succes — не функция, а объект, в который нужно занести отправляемую информацию (name элемента формы и его значение). А в аргумент функции callback передаётся ответ сервера.
Пример:
$.post('/index.php', {
e: 2,
a: 'text'
}, function (data) {
alert(data);
})Передаст на страницу index.php данные, и выведет ответ сервера в алерте.
Также есть метод $.ajax() и другие, но пока мы не будем их рассматривать.
Автор статьи — $USERNAME$ aka. exec.
При копировании указывать автора.