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 — выбрать последний элемент

html(value) — устанавливает содержимое элемента. Если value пуст, то возвращается текущее содержание элемента
val(value) — устанавливает value элемента. Если value пуст, то возвращается текущее value элемента
attr(attribute, value) — устанавливает значение тега. Если value пуст, то возвращается текущее значение атрибута. Если надо установить несколько атрибутов, то их можно заносить в объект:

css(param, value) — устанавливает CSS-свойства элемента. Использовать аналогично методу attr()

parent() — возвращает родительский элемент
child() — возвращает дочерний элемент
find(selector) — осуществляет поиск элемента. Работает примерно также, как и $(). Но может выполнять функции, которые не выполнить при помощи $(). Например:

Тут 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. Например, этот код:

В течении одной секунды плавно изменит высоту элемента до 200 пикселей и опустит его вниз на 300 пикселей.

! 1.Манипулировать можно только теми параметрами, которые принимают числовые значения.
! 2. При записи параметров используйте названия объектной модели CSS (не пишите margin-top, а пишите marginTop)

В jQuery 1.4 появился метод delay(time), который делает задержку перед выполнением анимации (возня с setTimeout отменяется)

Общаемся с сервером при помощи AJAX

Как известно, имеются два вида запросов — get (получить данные) и post (отправить данные). О них сейчас и пойдёт речь.

Для получения данных есть метод $.get. Имеет три аргумета: url (запрашиваемый URL), succes (получение и вывод данных) и callback (функция, выполняющаяся при успешном завершении запроса).

В функцию succes передаётся аргумент, который позволяет искать элементы на другой страницы (вспоминаем про context в $()). Для наглядности приведу пример:

Выведет в алерте текст первой ссылки на странице index.php.

Для отправки данных используется метод $.post(). Имеет те же параметры, что и $.get. Разница в том, что succes — не функция, а объект, в который нужно занести отправляемую информацию (name элемента формы и его значение). А в аргумент функции callback передаётся ответ сервера.

Пример:

Передаст на страницу index.php данные, и выведет ответ сервера в алерте.

Также есть методы load(), $.ajax() и другие, но пока мы не будем их рассматривать.

Автор статьи — $USERNAME$

В моей практике было множество сайтов и множество решений в раскрутке.
Хочу поделится очень хорошей информацией и с вами.
Есть такой способ который дает небольшой траф, немного, но приятно.
Рассмотрим подробно: