Введение в jQuery

jQuery — javascript библиотека, использование которой делает разработку javascript кода намного быстрее, проще и приятнее.

Содержание

Небольшая подсказка

На данном сайте есть описание практически всех функций библиотеки jQuery, поэтому, если вам будет непонятна одна из функций в примерах, можно быстренько посмотреть ее описание. А чтобы не тратить время на ее поиск, воспользуйтесь поиском по ключам: начните вводить название интересующей вас функции в поле "по ключам".

Начнем

Потратив некоторое время на попытки привнести динамическую функциональность на страницы вашего сайта, вы обнаружите, что постоянно следуете одному и тому же шаблону: сначала находите один или несколько элементов страницы, а затем выполняете над ними некоторые действия, такие как скрытие, изменение размеров, положения, прозрачности и.т.д.

Используя обычный javascript для решения каждой из этих задач потребуется десятки строк программного кода (и много головной боли по поводу его правильной работы в разных браузерах). Автор jQuery разработал свою библиотеку таким образом, что наиболее общие задачи становятся тривиальными. Например, вот так, с помощью функции $() из библиотеки, можно находить элементы на странице по различным параметрам:

$("div") вернет все div-элементы на странице.
$(".someBlock") вернет все элементы с классом someBlock.
$("#content") вернет элемент с идентификатором content.
$("#content2 div.someBlock") вернет div-элементы с классом someBlock, которые находятся внутри элемента с идентификатором content2.
$("div:odd") вернет div-элементы, находящиеся на странице под нечетными номерами.
$("[value = 5]") вернет все элементы с атрибутом value, равным 5.

И это только малая часть всех возможностей для поиска элементов (полный список правил смотри в разделе селекторы). После выбора элементов, можно сразу же приступить к манипуляциями над ними, jQuery предоставляет для этого широкий ассортимент методов (см разделы манипуляции и эффекты). Приведем несколько наиболее востребованных:

$("#bigIt").css("height") возвратит значение высоты у элемента с идентификатором bigIt.
$("div").css("width", "20px") установит новое значение ширины всем div-элемента на странице.
$("#bigIt").attr("class") возвратит значение класса элемента с id = bigIt.
$("#bigIt").attr("class", "box") установит новое значение атрибута class у элемента с id = bigIt.
$("#bigIt")(<p>Новье!</p>) изменит все html-содержимое элемента с id = bigIt, на заданное в методе html.
$("#bigIt").text() возвратит текст, находящийся внутри элемента с id = bigIt.
$(".someBox").empty() очистить от содержимого элементы с классом someBox.

Таким образом, всего одной строкой кода, мы можем узнать или изменить css-значения, атрибуты, html и текстовое содержимое любых элементов на странице. Наличие только этих возможностей уже сделало бы jQuery незаменимой вещью. Однако эта библиотека позволяет делать гораздо больше, гораздо.

Функция $()

Функция с лаконичным именем $() является, пожалуй самой главной во всей библиотеке. С ее помощью можно находить элементы на странице (в чем вы уже убедились), добавлять "на лету" новый html:

// создадим div-элемент и добавим его в конец элемента с идентификатором content
$("<div><p>Ба-бах!</p></div>").appendTo("#content");

Кроме этого, $() позволяет привязать всю функциональность jQuery к уже существующим объектам DOM-элементов:

// найдем элемент с идентификатором some_id, средствами обычного javascript
var el = document.getElementById("some_id");
 
// установим у этого элемента новое значение css-свойства margin
$(el).css("margin", "5px");

Более подробно о функции можно посмотреть в специальной статье.

Начало работы скрипта

Прежде чем запускать js-скрипт, необходимо быть уверенным, что часть страницы, с которой этот скрипт будет работать уже загружена. Большинство программистов используют для этого событие onload, которое происходит по окончанию загрузки всей страницы:

window.onload = function(){
  // вызов нужных функций скрипта
}

Однако onload происходит после того, как страница сформирована полностью, включая загрузку всех изображений, флеш-баннеров и видеороликов. В то время как структура дерева DOM (элементов страницы), с которой обычно и работает скрипт, оказывается готова гораздо раньше. В результате скрипт запускается значительно позднее чем мог бы. На этот случай в jQuery есть метод ready, вызов которого осуществляется в момент готовности дерева DOM:

$(document).ready( function(){
  // вызов нужных функций скрипта
});

Цепочки методов

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

$("#bigIt").empty().attr("class", "noContent");
// в результате, у элемента с идентификатором bigIt будет удалено все содержимое, 
// после чего ему будет установлен класс noContent.

эти цепочки могут состоять из гораздо большего числа методов. Для удобочитаемости, цепочки часто пишут "в столбик":

$("div")                // найдем все div-элементы
.parent()               // найдем их родительские элементы
.css("heigth", "10px")  // установим последним высоту в 10 пикселей
.fadeTo(0, 0.5)         // установим им (родителям div'ов) прозрачность в 50%
.addClass("divOwner");  // добавим им же класс divOwner

Таким образом, можно легко описать все действия, происходящие с выбранными элементами, избежав использования большого числа временных переменных.

Работа с набором элементов

Помимо манипуляций с выбранными элементами, jQuery позволяет работать с самим набором: изменять его, а так же работать с элементами по отдельности. Продемонстрируем часть возможностей:

$("div").parent() вернет родительские элементы всех div-ов.
$("div").children() вернет дочерние элементы всех div-ов.
$("#someId").next() вернет элемент, лежащий сразу после someId.
$("div").prev() вернет элементы, лежащие перед div'ами.
$("div").eq(i) вернет div-элемент, с индексом i в наборе.
$("div").get(i) вернет DOM-объект div'а, с индексом i.
$("div").get() вернет массив DOM-объеков всех div-ов.
$("div").size() вернет размер набора (количествово div-ов).

На самом деле, методов работающих с набором гораздо больше, их полный список можно найти в соответствующем разделе.

Отметим различия методов get(i) и eq(i). Первый возвращает непосредственно DOM-объект элемента, идущего под номером i в наборе (кстати, нумерация начинается с 0). К такому элементу вы не сможете применить методы jQuery, зато сможете применить стандартные javascript методы. Метод eq(i) наоборот, возвращает i-й элемент в таком виде, что к нему можно применять методы jQuery. Вообще, для того, чтобы к элементам можно было применять методы библиотеки jQuery, они должны находиться в так называемом объекте jQuery, именно его возвращает функция $().

Рассмотрим отдельно метод .each(), предназначенный для поэлементной обработки набора. В качестве параметра, этот метод принимает пользовательскую функцию, которая будет автоматически вызвана, для каждого элемента набора:

var heights = [];  // переменная, которая будет хранить высоты элементов
 
$("div").each(function(indx, element){ // indx - номер элемента в наборе, element - сам элемент
  heights.push($(element).height());
});
 
// в итоге, в переменную heights будут помещены значения высот всех div-элементов

Анимационные эффекты

Умело изменяя свойства элементов, можно заставить их делать различные эффекты, такие как перетаскивание, сворачивание и разворачивание, плавное изменение прозрачности и.т.д. Функционал jQuery позволяет делать это максимально просто (список всех методов в разделе эффекты).

Ключевым методом, на которой базируются все остальные, является метод animate(), с помощью которого можно задавать плавное изменение различных CSS-свойств:

 .animate(properties, [duration], [easing], [callback])
properties — список CSS-свойств, участвующих в анимации и их конечных значений. Задаются объектом, в формате {ключ:значение}, например:{opacity: 50, width: 100, height: 200}.
duration — продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд).
easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). Задается строковым значением: "linear" и "swing" (для равномерной анимации и анимации с ускорением). Другие варианты можно найти в плагинах.
callback — функция, которая будет вызвана после завершения анимации.

Пример. Пусть у нас есть элемент div с каким-нибудь текстом. Мы хотим плавно скрыть этот элемент, заменить текст, и плавно сделать элемент видимым:

$("#mydiv")
  .animate({height: "hide"}, 300)
  .text("Новый текст")
  .animate({height: "show"}, 300);

значения "hide", "show" означают исчезновение и появление элемента, за счет параметра, к которому они применены.

Существуют отдельные методы, позволяющие скрывать и показывать элементы, а так же, изменять их прозрачность. Все эти методы можно найти в разделе эффекты. Необходимо также заметить, что при одновременном вызове нескольких эффектов, применительно к одному элементу, их выполнение будет происходить не одновременно, а поочередно. Например при выполнении следующих команд:

  $("#my-div").animate({height: "hide"}, 1000);
  $("#my-div").animate({height: "show"}, 1000);

элемент с идентификатором my-div, в начале будет плавно исчезать с экрана, а затем начнет плавно появляться вновь. Однако, анимации, заданные на разных элементах, будут выполняться одновременно:

  $("#my-div-1").animate({height: "hide"}, 1000);
  $("#my-div-2").animate({height: "show"}, 1000);

Ajax

В jQuery реализована возможность выполнения запросов к серверу без перезагрузки страницы, так называемая технология ajax. Базовыми функциями для ее работы являются post() и get() (есть еще более низкоуровневая, ajax(), но мы ее не будем рассматривать):

$.post(url, [params], [callback], [dataType])
$.get(url, [params], [callback], [dataType])
url — url-адрес, по которому будет отправлен запрос.
data — данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: {fName1:value1, fName2:value2, ...}.
callback() — пользовательская функция, которая будет вызвана после ответа сервера.
dataType — ожидаемый тип данных, которые пришлет сервер в ответ на запрос (подробности тут).


Рассмотрим примеры с методом get, использование второго метода аналогично. Сделаем простейший ajax-запрос: отправим пустой запрос к серверу и не будем обрабатывать ответ. Это может быть использовано, например для подсчета количества наведений курсора на баннер (при каждом наведении серверу будет отправляться сигнал).

$.get("/plusOne.php");


Теперь, отправим данные на сервер и обработаем их. Javascript будет выглядеть следующим образом:

// На сервер будет отправлен запрос страницы http://hostname/ajaxtest.php и указаны два параметра.  
// После получения ответа от сервера будет вызвана функция onAjaxSuccess, которая выведет 
// на экран сообщение с данными, присланными сервером.
$.get(
  "/ajaxtest.php",
  {
    param1: "param1",
    param2: 2
  },
  onAjaxSuccess
);
 
function onAjaxSuccess(data)
{
  // Здесь мы получаем данные, отправленные сервером и выводим их на экран.
  alert(data);
}

На сервере, обработка Ajax запроса ничем не отличается от обработки обычного запроса (как когда вызывается главная страница сайта):

<?php
  echo "I get param1 = ".$_GET['param1']." and param2 = ".$_GET['param2'];
?>

В результате этого запроса, на странице появится табличка с текстом "I get param1 = param1 and param2 = 2"

С помощью этих методов можно запрашивать XML, который потом без проблем можно будет обработать привычными методами jQuery. Допустим, что на сервере у нас есть следующая страница, генерирующая XML:

<?php
  header("Content-Type: text/xml; charset=utf-8");
?>
<list>
  <item id="1">
    Item 1 
  </item>
  <item id="2">
    Item 2 
  </item>
</list>

Запросив эту страницу методом get или post, полученные данные можно будет легко обработать:

$.get(
  "/ajaxtest.php",
  {},
  onAjaxSuccess
);
 
function onAjaxSuccess(xml)
{
  var items = $("item", xml); // так можно получить коллекцию всех элементов item из полученного xml
  var item = $("#1", xml);    // а так, найти item с id="1"
  alert(item.html());     // и извлечь из него текст
}

Помимо рассмотренных методов, существует и методы с более узкой направленностью: load() запрашивает html-текст и автоматически вставляет его в выбранные элементы, $.getScript() делает запрос javascript-файла и автоматически его выполняет. Эти и другие функции можно найти в разде Ajax.

Разные плюшки

Помимо возможностей, о которых уже было сказано, существуют и другие, о которых охота упомянуть, но сложно отнести в какой то конкретный раздел.

$.browser поможет узнать тип браузера.
$.support поможет узнать конкретные особенности браузера.
.offset() и .position() позволят узнать или изменить позицию выбранного элемента.
.width() и .height() позволят узнать или изменить размеры выбранного элемента.
.scrollTop() и .scrollLeft() позволят работать с прокруткой.
Функции из раздела события позволят обрабатывать различные события, происходящие на странице.

В разделе «Рецепты» вы сможете найти удачные решения многих задач средствами jQuery.

Подключение jQuery к вашему сайту

Для того, чтобы функциональность библиотеки jQuery стала доступной на страницах вашего сайта, необходимо скачать файл с библиотекой на официальном сайте jquery (ссылка с текстом "Download the compressed, production jQuery", чтобы скачать библиотеку, необходимо кликнуть по ссылке правой клавишей мыши и выбрать "Сохранить ссылку как.."). Полученный файл нужно будет загрузить на сервер, где лежит ваш сайт, и подключить этот js-файл на страницы сайта:

Тонкости подключения jQuery к сайту можно почерпнуть здесь.

Титры

Часть текста в данной статье позаимствована из статьи "Query – Javascript нового поколения" журнала RSDN. Это одна из первых статей по jQuery, благодаря которой о библиотеке узнало, наверное, наибольшее число русскоязычных программистов. Однако, на данный момент, часть информации в ней уже не актуальна.