jQuery - Функция jQuery() или $()

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

Функция jQuery() в зависимости от значения аргумента(ов) может выполнять различные действия:

  • ищет на основе селектора (строки, не начинающейся с <тег...) элементы в DOM-дереве, а затем возвращает их в виде объекта jQuery.

  • оборачивает DOM-элементы, указанные в качестве аргумента, в объект jQuery.

  • создаёт DOM-элементы в памяти (на "лету") посредством HTML-строки, переданной в качестве аргумента данной функции.

  • выполняет указанную функцию, после того как DOM-дерево будет окончательно загружено браузером.

  • оборачивает простой JavaScript объект, содержащий ноль или более пар "ключ-значение", в объект jQuery.

  • клонирует объект jQuery (создаёт копию), если его передать в качестве аргумента данной функции.

  • если аргументы не указывать, то функция jQuery() возвращает пустой jQuery объект.

jQuery - функция jQuery()

Функция jQuery(селектор[,контекст]) предназначена для выполнения поиска элементов в DOM-дереве на основании селектора, указанного в качестве 1 аргумента. По умолчанию поиск элементов функция jQuery начинает с корня DOM-дерева (если 2 аргумент не указан). Если же Вам необходимо выполнить поиск элементов внутри определённого контекста, то его необходимо указать во 2 аргументе. В качестве результата данная функция возвращает объект jQuery, содержащий найденные DOM-элементы.

Этот вариант функции jQuery() имеет 2 аргумента:

  • селектор (обязательный, тип: Selector) - строка содержащая выражение для выбора элементов из DOM-дерева;
  • контекст (необязательный, тип: Element или jQuery) - DOM-элемент, документ или объект jQuery, который выступает в качестве контекста.

Например, выберем элементы div с class="alert" в документе:

$("div.alert");

Найти все элементы input с type="radio", расположенные внутри первой формы документа:

$("input:radio",document.forms[0]);
Узнать количество DOM-элементов в объекте jQuery можно с помощью свойства length. Если значения свойства length некоторого объекта jQuery равно 0, то это значит, что данный объект является пустым, т.е. он не содержит DOM-элементы.

Функция jQuery(элемент) предназначена для того, чтобы обернуть элемент в объект jQuery. Это используется для того, чтобы к DOM-элементу можно было применить различные методы jQuery.

Этот вариант функции jQuery() имеет 1 аргумент:

  • элемент (обязательный, тип: Element) - DOM-элемент, который необходимо обернуть в объект jQuery.

Например:

//добавить к первому элементу документа р класс lead с помощью метода jQuery addClass():
$(document.getElementsByTagName("P")[0]).addClass("lead");

Функция jQuery(мaccив_элементов) предназначена для того, чтобы обернуть массив, содержащий набор DOM-элементов, в объект jQuery. Это используют для того, чтобы к набору DOM-элементов можно было применять различные методы jQuery.

Этот вариант функции jQuery() имеет 1 аргумент:

  • массив_элементов (обязательный, тип: Array) - массив, содержащий набор DOM-элементов, которые необходимо обернуть в объект jQuery.

Например, изменить цвет текста у всех элементов p в документе на красный:

//массив, содержащий набор DOM-элементов Р
myArrayP = document.getElementsByTagName("P");
//обернуть массив в объект jQuery и применить к нему метод jQuery css()
$(myArrayP).css("color","red");

Функция jQuery(oбъeкт) предназначена для того, чтобы обернуть простой объект JavaScript (PlainObject), содержащий ноль или более пар "ключ-значение", в объект jQuery.

Этот вариант функции jQuery() имеет 1 аргумент:

  • объект (обязательный, тип: PlainObject) - простой объект JavaScript, содержащий ноль или более пар "ключ-значение" {key1:value1, key2:value2,...}.

В jQuery для простых объектов JavaScript (PlainObject) можно использовать следующие операции: .data(), .prop(), .on(), .off(), .trigger() и .triggerHandler(). При использовании метода jQuery .data() (или любого другого метода, использующего .data()) на простой объект (PlainObject) Вы получите результат в виде нового свойства объекта, которое будет иметь вид jQuery{rundomNumber) (например, jQuery 123456789).

Например:

//определение простого объекта
var myPlainObject = {key1: "value1", key2: "value2"};
//передать простой объект в функцию jQuery (оборачивание PlainObject)
var $myPlainObject = $(myPlainObject);
//получить у объекта значения свойства key1
$myPlainObject.prop("key1");//value1
//установить свойству key1 новое значение 
$myPlainObject.prop("key1","newValue1");
//теперь $myPlainObject содержит новое свойство jQuery{rundomNumber}
$myPlainObject.data("key3","value3");
console.log($myPlainObject); 
//привязать к объекту событие
$myPlainObject.on("eventName", function() { 
  console.log("eventName was called");
});
//вызвать событие eventName у объекта $myPlainObject
$myPlainObject.trigger("eventName");
Примечание: Метод .trigger() не проверяет, является ли значение, которое ему передали в качестве параметра, функцией или нет. Чтобы эту возможность использовать, необходимо применять метод .triggerHandler("eventName").
$myPlainObject.triggerHandler("eventName"); 

Функция jQuery(html[,ownerDocument]) создаёт DOM-узлы в памяти (на "лету") на основе HTML-строки, переданной ей в качестве аргумента. В качестве результата функция jQuery() или её псевдоним $() возвращает объект jQuery, содержащий эти созданные DOM-узлы.

Этот вариант функции jQuery() имеет 2 аргумента:

  • html (обязательный, тип: htmlString) - строка, содержащая HTML-код.
  • ownerDocument (необязательный, тип: document) - документ, в котором новые элементы должны быть созданы.
Принцип работы функции jQuery(html[,ownerDocument]):

Работа функции jQuery всегда начинается с анализа значения аргумента. Если он выглядит как код HTML (т.е. она начинается с "<тег..."), то функция jQuery попытается его разобрать с помощью метода $.parseHTML(). После разбора HTML строки начинается процесс создания DOM-узлов. В большинстве случаев для этого используется браузерный механизм .innerHTML. В конечном итоге функция jQuery(html[,ownerDocument]) вернёт объект jQuery, который будет содержать созданные DOM-узлы.

$("<p id='test'>I <em>love</em> jQuery</p>").appendTo("body");
По умолчанию, элементы создаются для текущего документа. Если Вам необходимо создать элементы для другого документа, то его необходимо передать в качестве второго параметра.

Функция jQuery(html,attributes) предназначена для создания DOM-элемента с атрибутами. Элемент, который необходимо создать, указывается в первом аргументе посредством HTML-строки (например: "<div></div>"). Атрибуты к создаваемому элементу указываются во 2 аргументе посредством объекта JavaScript (PlainObject) в следующем виде: {id:"myDiv", "class":"alert alert-warning"}.

Этот вариант функции jQuery() имеет 2 аргумента:

  • html (обязательный, тип: htmlString) - строка, содержащая DOM-элемент.
  • attributes (необязательный, тип: PlainObject) - объект, содержащий атрибуты, события и методы, которые необходимо добавить к создаваемому элементу.

Например, создадим элемент <div id="myDiv" class="alert alert-warning">:

//переменная myDiv содержит объект div с атрибутами id="myDiv" и class="alert alert¬warning".
var myDiv = $("<div></div>", {id:"myDiv", "class" :"alert alert-warning"});
//не забываем, что созданный элемент находится в памяти браузера
//если мы хотим его добавить к документу, то нужно воспользоваться одним из соответствующих методов
//например, добавим его в конец элемента body
myDiv.appendTo("body");
Примечание: jQuery требует, чтобы HTML-строка начиналась с < (т.е. HTML-строка не может начинаться с текстовых узлов). В объекте PlainObject имя "class" должно быть заключено в кавычки, т.к. class - это зарезервированное слово JavaScript. Имя "className" тоже не может быть использовано, так как оно относится к свойству DOM, а не к атрибуту.

Функция jQuery(callback) выполняет функцию (анонимную или именованную), указанную в качестве аргумента после того, как загрузка DOM-дерева будет завершена браузером.

Этот вариант функции jQuery() имеет 1 аргумент:

  • callback (тип: Function()) - функция, которая выполнится, когда загрузка DOM-дерева будет завершена браузером.
Примечание: Функция $(function(){...}); ведёт себя также как и $(document).ready(function(){...});. Т.е. её можно использовать для оборачивания других операций $() на странице, которым для выполнения необходимо, чтобы DOM-дерево было полностью построено браузером.

Например, выполнить функцию после того, как DOM-дерево станет доступно для использования:

$(function() {
  //DOM-дерево готово
});

Например, для безопасного выполнения jQuery кода Вы можете использовать следующую конструкцию:

jQuery(function($) {
  //DOM-дерево готово
});

В этой конструкции в качестве функции jQuery используется $. Безопасность выполнения этого сценария заключается в том, что код jQuery, находящейся в этой конструкции не будет конфликтовать с другими библиотеками JavaScript, в которых в качестве псевдонима тоже используется знак $. Кроме этого этот сценарий также не будет зависеть от переменной, которая установлена в качестве глобального псевдонима функции jQuery.



   JavaScript и jQuery 0    3848 0

Комментарии (2)

  1. александр # 0
    Маленькая ошибочка скорее стилистическая а не синтаксическая в бежевой таблице создать DOM-узлы на основе html-строки (3-я ячейка): class там пишется без кавычек.
    1. Александр Мальцев # 0
      Да, действительно может немного некрасиво выглядеть, но в строке
      $("<div></div>",$({id:"myID","class":"alert"}));
      
      выражение является объектом.
      {id:"myID","class":"alert"}
      
      А в объекте имена свойств можно указывать как в кавычке, так и без неё (если имя свойства соответствует правилам именования переменных в JavaScript).

    Вы должны авторизоваться, чтобы оставлять комментарии.