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

jQuery – функции

jQuery(expression, [context])

возвращает: jQuery
Функция принимает строку, содержащую CSS селектор, который используется, чтобы создать набор элементов. Функциональность ядра jQuery сосредотачивается вокруг этой функции. Аргумент expression – строка с «поисковым» выражением. Опциональный аргумент [context] – элемент DOM, Document или объект jQuery.

Ищем все элементы p, которые являются дочерними по отношению к элементу div.

$("div > p").css("border", "1px solid #ccc");

В этом выражении использован CSS-синтаксис. Здесь мы устанавливаем серую рамку шириной 1px. Но подробнее об этом мы будем говорить позже.

Ищем все элементы input типа radio внутри первой формы в документе.

$("input:radio", document.forms[0]);

Ищем все элементы div внутри документа XML, который вернулся в качестве ответа от сервера на AJAX-запрос.

$("div", xml.responseXML);

jQuery(html)

возвращает: jQuery
На лету создает DOM элементы из данных, предоставленных в виде строки или необработанного HTML. Аргумент html – строка HTML-кода, который должен быть создан «на лету». Можно использовать простой HTML-код, написанный вручную, или созданный с помощью шаблонных движков или плагинов, или загруженный через AJAX. Существуют ограничения при создании элементов input (см. пример). Когда используется строка, которая может содержать слэши (например путь к файлу картинки), необходимо экранировать их. Когда создается одиночный элемент необходимо использовать закрывающий тэг в XHTML-формате. Например чтобы создать элемент span сделайте

$("<span/>");
// или
$("<span></span>");

Динамически создаем элемент div (вместе с его внутренним содержимым), и добавляем его в элемент body.

$("<div><p>Hello</p></div>").appendTo("body");

Не создавайте элементы <input> без атрибута type.

// не работает в IE:
$("<input/>").attr("type", "checkbox");
// работает в IE:
$("<input type="checkbox" />");

jQuery(elements)

возвращает: jQuery
«Обертывает» функциональность jQuery вокруг одного или многих элементов DOM. Аргумент elements – элемент или массив элементов DOM, которые будут представлены как объект jQuery. Эта функция может также принимать XML документы и объекты window как валидные аргументы, даже если они не представляют собой элементы DOM.

Устанавливаем значение black свойству background для элемента body. Если по-русски – делаем страницу черного цвета.

$(document.body).css( "background", "black" );

Скрываем все элементы внутри формы.

$(myForm.elements).hide();

jQuery(callback)

возвращает: jQuery
Короткая запись $(document).ready(). Аргумент callback – функции, которые будут выполнены, когда будет готова объектная модель документа (DOM). Вы можете иметь столько $(document).ready событий на странице, сколько Вам необходимо.

Выполняет функцию когда DOM готова к использованию.

$(function(){
    // документ готов
    alert("Документ готов!");
});

Доступ к объекту jQuery

each(callback)

возвращает: jQuery
Выполняет функцию в пределах контекста каждого элемента определенного в наборе.

Клик мышкой в любом месте элемента body* приведет к тому, что будут отобраны все принадлежащие ему элементы div. Затем для каждого из них css свойство color будет установлено в значение blue. Если же свойство color очередного элемента уже имеет значение blue, оно будет сброшено (будет установлен изначально красный цвет шрифта).

$(document.body).click(function () {
  $("div").each(function (i) {
    if (this.style.color != "blue") {
      this.style.color = "blue";
    } else {
      this.style.color = "";
    }
  });
});

* – примите во внимание – пример демонстрируется во фрейме.
Откройте пример в отдельном окне и посмотрите исходный код.

size()

возвращает: Number
Количество элементов в объекте jQuery.

Подсчитываем количество элементов div в объекте jQuery. Каждым кликом добавляем еще один элемент div. Size() делает практически тоже самое, что и length, только немного медленнее.

$(document.body).click(function () {
  $(document.body).append($("<div/>"));
  var n = $("div").size();
  $("span").text("Объект jQuery содержит " +
  n + " элементов div." +
  "Кликни, чтобы добавить еще.");
}).click();

Откройте пример в отдельном окне и посмотрите исходный код.

length

возвращает: Number
Количество элементов в объекте jQuery.

Подсчитываем количество элементов div в объекте jQuery. Каждым кликом добавляем еще один элемент div.

$(document.body).click(function () {
  $(document.body).append($("<div/>"));
  var n = $("div").length;
  $("span").text("Объект jQuery содержит " + n +
  " элементов div." + "Click to add more.");
}).trigger('click');

Откройте пример в отдельном окне и посмотрите исходный код.

eq(position)

возвращает: jQuery
Сокращает набор элементов до единственного элемента. Нумерация элементов в наборе начинается с 0. Если еще понятнее – позволяет обратиться к единственному элементу из набора, используя его индекс.
Выбираем все элементы p, обращаемся ко второму элементу в наборе, для которого устанавливаем красный цвет шрифта.

$("p").eq(1).css("color", "red");

Откройте пример в отдельном окне и посмотрите исходный код.

get()

возвращает: Array
Обеспечивает доступ ко всем выбранным элементам DOM. Служит обратно совместимым способом, позволяя обратиться ко всем элементам набора, если Вы работаете непосредственно с элементами DOM, не используя встроенные функции jQuery.

Выбираем все элементы div в документе и возвращаем набор элементов DOM как массив, затем используем встроенный метод, чтобы этот массив перевернуть.

function disp(divs) {
  var a = [];
  for (var i = 0; i < divs.length; i++) {
    a.push(divs[i].innerHTML);
  }
  $("span").text(a.join(" "));
}
disp( $("div").get().reverse() );

Откройте пример в отдельном окне и посмотрите исходный код.

get(index)

возвращает: Element
Обеспечивает доступ к единственному элементу из набора элементов DOM по его индексу. Это позволит извлечь актуальный элемент DOM и работать с ним непосредственно, не используя функциональность jQuery. Эта функция, вызванная как $(this).get(0) является эквивалентом использования квадратных скобок в нотации объектов jQuery, например $(this)[0].

Отдает имя тэга на котором был совершен клик.

$("*", document.body).click(function (e) {
  e.stopPropagation();
  var domEl = $(this).get(0);
  $("span:first").text("Кликнули на - " + domEl.tagName);
});

Откройте пример в отдельном окне и посмотрите исходный код.

index(subject)

возвращает: Number
Ищет элемент в наборе элементов объекта и возвращает его индекс, если найден. Возвращает -1, если не найдено. Отсчет ведется от 0.

По клику возвращает индекс выбранного элемента div.

$("div").click(function () {
  var index = $("div").index(this);
  $("span").text("Это div с индексом #" + index);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Манипуляции с данными

data(name)

возвращает: Any
Эта функция используется, чтобы получить данные «хранящиеся» в элементе под соответствующим именем. Наверное немного непонятно, но пример должен будет все прояснить.

$("button").click(function(e) {
  var value;
  switch ($("button").index(this)) {
    case 0 :
    value = $("div").data("blah");
    break;
    case 1 :
    $("div").data("blah", "hello");
    value = "Stored!";
    break;
    case 2 :
    $("div").data("blah", 86);
    value = "Stored!";
    break;
    case 3 :
    $("div").removeData("blah");
    value = "Removed!";
    break;
  }
  $("span").text("" + value);
});

При щелчке мышью на одном из четырех элементов button получим индекс этого элемента и проанализируем его в swith.
case:0 – в переменную value получим данные, названные как «blah» и принадлежащие элементу div.
case:1 – запомним в элементе div данные с именем «blah» и значением «hello». Заметьте, это строка. В переменную value запишем значение «Stored!».
case:2 – запомним в элементе div данные с именем «blah» и значением 86. Это уже число. В переменную value также запишем значение «Stored!».
case:3 – удалим из элемента div данные с именем «blah». В переменную value запишем значение «Removed!».

Откройте пример в отдельном окне и посмотрите исходный код.

data(name, value)

возвращает: Any
«Сохраняет» данные в элементе под определенным именем и также возвращает значение. Функция очень полезна для «прикрепления» данных к элементу. К тому же значения могут иметь любой формат!

Сохраняет, а затем получает значения из элемента div.

$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);

Откройте пример в отдельном окне и посмотрите исходный код.

removeData(name)

возвращает: jQuery
Удаляет данные с соответствующим именем из элемента. Эта функция дополняет $(…).data(name, value). Пример ее использования Вы могли видеть чуть выше.

jQuery – дополнения

jQuery.fn.extend(object)

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

jQuery.fn.extend({
  check: function() {
    return this.each(function() {
      this.checked = true;
    });
  },
  uncheck: function() {
    return this.each(function() {
      this.checked = false;
    });
  }
});

jQuery.extend(object)

Расширяет возможности jQuery. Может использоваться, чтобы добавить функции в пространство имен jQuery. Принимает объект, который должен быть объединен с объектом jQuery.
Добавляем две функции в пространство имен jQuery.

jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});

Функциональная совместимость

jQuery.noConflict()

возвращает: jQuery
Выполните эту функцию, чтобы передать контроль над переменной $ любой другой библиотеке, которая используется ранее. Это гарантирует, что jQuery не будет конфликтовать с $ другой используемой библиотеки. Используя эту функцию Вы сможете осуществить доступ к jQuery только через переменную ‘jQuery’. Например, где Вы использовали $(«div p»), теперь должны использовать jQuery(«div p»).

jQuery.noConflict(extreme)

возвращает: jQuery
Это сверхэкстримальная версия простого метода noConflict возвращает контроль над переменными $ и jQuery их владельцу. Использовать с осторожностью! Аргумент необходимо установить в true, чтобы осуществить возврат к jQuery и переменным.