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 — выбрать все чекбоксы
:button — выбрать все кнопки
:submit — выбрать все кнопки для отправки формы
:eq(index) — выбрать элементы с определённым индексом
:first — выбрать первый элемент
:last — выбрать последний элемент
С параметром context всё просто — он указывает, где искать элемент. По умолчанию это document.
Для манипулирования с элементами есть следующие методы: html(value) — устанавливает содержимое элемента. Если value пуст, то возвращается текущее содержание элемента
val(value) — устанавливает value элемента. Если value пуст, то возвращается текущее value элемента
attr(attribute, value) — устанавливает значение тега. Если value пуст, то возвращается текущее значение атрибута. Если надо установить несколько атрибутов, то их можно заносить в объект: Code $(elem).attr({attr1: value1, attr2: value2}); css(param, value) — устанавливает CSS-свойства элемента. Использовать аналогично методу attr() parent() — возвращает родительский элемент
child() — возвращает дочерний элемент
find(selector) — осуществляет поиск элемента. Работает примерно также, как и $(). Но может выполнять функции, которые не выполнить при помощи $(). Например: Code $(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. Например, этот код: Code $(elem).animate({height: '200px', marginTop: '300px'}, 1000); В течении одной секунды плавно изменит высоту элемента до 200 пикселей и опустит его вниз на 300 пикселей. ! 1.Манипулировать можно только теми параметрами, которые принимают числовые значения.
! 2. При записи параметров используйте названия объектной модели CSS (не пишите margin-top, а пишите marginTop) В jQuery 1.4 появился метод delay(time), который делает задержку перед выполнением анимации (возня с setTimeout отменяется)
Общаемся с сервером при помощи AJAX Как известно, имеются два вида запросов — get (получить данные) и post (отправить данные). О них сейчас и пойдёт речь. Для получения данных есть метод $.get. Имеет три аргумета: url (запрашиваемый URL), succes (получение и вывод данных) и callback (функция, выполняющаяся при успешном завершении запроса). В функцию succes передаётся аргумент, который позволяет искать элементы на другой страницы (вспоминаем про context в $()). Для наглядности приведу пример: Code $.get('/index.php', function (data) {
alert($('a:first', data).text());
}); Выведет в алерте текст первой ссылки на странице index.php.
Для отправки данных используется метод $.post(). Имеет те же параметры, что и $.get. Разница в том, что succes — не функция, а объект, в который нужно занести отправляемую информацию (name элемента формы и его значение). А в аргумент функции callback передаётся ответ сервера. Пример: Code $.post('/index.php', {
e: 2,
a: 'text'
}, function (data) {
alert(data);
}) Передаст на страницу index.php данные, и выведет ответ сервера в алерте.
Также есть методы load(), $.ajax() и другие, но пока мы не будем их рассматривать.
Автор статьи — $USERNAME$. При копировании указывать автора.
| 
