Каталог статей

Что такое jQuery и как с ним работать  >  прочее




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$. При копировании указывать автора.

•    Получить ссылку

  В новом окне Просмотров:[916]Добавлено:17.07.2025 Подробнее