Вспомогательные функции и свойства

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

Функция $.each() — перебор элементов

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

$.each(<Массив или объект>, <Функция обратного вызова>);

В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата.

function <Название функции>([<Индекс или ключ>[, <Значение>]]) {
   // ...
}

Если параметры не указаны, то значение доступно через переменную this. В качестве примера выведем все элементы массива.

var arr = [ 1, 2, 3 ];
$.each(arr, function() {
   $("#div1").append(this + "<br>");
});

Теперь выведем элементы массива, указав индекс и значение.

var arr = [ 1, 2, 3 ];
$.each(arr, function(ind, val) {
   $("#div1").append(ind + " =&gt; " + val + "<br>");
});

Результат:

0 => 1
1 => 2
2 => 3

Перебрать элементы объекта можно следующим образом.

var obj = { "Один": 1, "Два": 2, "Три": 3 };
$.each(obj, function(key, val) {
   $("#div1").append(key + " =&gt; " + val + "<br>");
});

Результат:

Один => 1
Два => 2
Три => 3

Если необходимо досрочно прервать выполнение функции $.each(), то внутри функции обратного вызова следует вернуть значение false.

var obj = { "Один": 1, "Два": 2, "Три": 3 };
$.each(obj, function(key, val) {
   $("#div1").append(key + " =&gt; " + val + "<br>");
   if (val == 2) {
      return false;
   }
});

Результат:

Один => 1
Два => 2

Функция $.grep() — поиск в массиве

Функция $.grep() позволяет произвести поиск в массиве. Возвращает новый массив, элементы которого соответствуют условию. Применяется как обычная функция, объявленная в пространстве имен библиотеки jQuery. Имеет следующий синтаксис.

<Массив2> = $.grep(<Массив1>, <Функция обратного вызова>
                   [, <Инверсия>]);

В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата.

function <Название функции>(<Значение>[, <Индекс>]) {
   // ...
}

Если значение соответствует условию, то функция обратного вызова должна вернуть значение true, в противном случае — false. Предположим, есть массив, заполненный числами от 1 до 5. Создадим новый массив из исходного, в котором все элементы массива меньше или равны 3.

var arr = [ 1, 2, 3, 4, 5 ];
arr = $.grep(arr, function(val) {
   if (val <= 3) {
      return true;
   }
   else {
      return false;
   }
});
$("#div1").html(arr.join(", "));

Результат:

1, 2, 3

Если в функции $.grep() в параметре <Инверсия> указать значение true, то результат будет изменен на противоположный.

function check(val) {
   if (val <= 3) {
      return true;
   }
   else {
      return false;
   }
}
$(document).ready(function() {
   var arr = [ 1, 2, 3, 4, 5 ];
   arr = $.grep(arr, check, true);
   $("#div1").html(arr.join(", "));
});

Результат:

4, 5

Функция $.map() — преобразование массива

Функция $.map() позволяет изменить каждый элемент массива. Возвращает новый массив. Применяется как обычная функция, объявленная в пространстве имен библиотеки jQuery. Имеет следующий синтаксис.

<Новый массив> = $.map(<Массив>, <Функция обратного вызова>);

В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата.

function <Название функции>(<Значение>[, <Индекс>]) {
   // ...
}

Чтобы изменить текущее значение элемента массива, необходимо внутри функции обратного вызова вернуть новое значение. В качестве примера умножим все элементы массива на 2.

var arr = [ 1, 2, 3 ];
arr = $.map(arr, function(val) {
   return (val * 2);
});
$("#div1").html(arr.join(", "));

Результат:

2, 4, 6

Если в качестве значения вернуть null, то элемент не будет добавлен в новый массив. Для примера первый элемент массива удалим, второй элемент умножим на 2, а третий оставим без изменений.

var arr = [ 1, 2, 3 ];
arr = $.map(arr, function(val, ind) {
   if (ind == 1) {
      return (val * 2);
   }
   else if (ind == 0) {
      return null;
   }
   else {
      return val;
   }
});
$("#div1").html(arr.join(", "));

Результат:

4, 3

Функция $.inArray() — поиск элемента в массиве

Функция $.inArray() позволяет произвести поиск элемента в массиве. Поиск производится с учетом регистра символов. Возвращает индекс первого найденного элемента или значение –1, если ничего не найдено. Применяется как обычная функция, объявленная в пространстве имен библиотеки jQuery. Имеет следующий синтаксис.

<Результат> = $.inArray(<Значение>, <Массив>);

Рассмотрим пример.

var arr = ["Один", "Два", 3, "Два"];
alert($.inArray("Два", arr));           // 1
alert($.inArray(4, arr));               // -1

Функция $.merge() — объединение массивов

Функция $.merge() позволяет объединить два массива в один. Возвращает новый массив. Применяется как обычная функция, объявленная в пространстве имен библиотеки jQuery. Формат функции:

<Новый массив> = $.merge(<Массив1>, <Массив2>);

Рассмотрим пример.

var arr = $.merge( [1,2,3], [1,2,3] );
alert(arr.join(", "));

Результат:

1, 2, 3, 1, 2, 3

Функция $.makeArray() — создание массива элементов

Функция $.makeArray() создает массив из выбранных DOM-элементов. Применяется как обычная функция, объявленная в пространстве имен библиотеки jQuery. Формат функции:

<Массив> = $.makeArray(<DOM-элементы>);

Пример использования функции $.makeArray() приведен в листинге 9.1.

Листинг 9.1. Функция $.makeArray()

<!doctype html>
<html>
<head>
<title>Функция $.makeArray()</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $("#div1").click(function() {
      var arr = $.makeArray($("p").get()).reverse();
      $("#div1").append(arr);
   });
});
</script>
</head>
<body>
<div id="div1">Нажмите здесь</div>
<p>Абзац1</p>
<p>Абзац2</p>
<p>Абзац3</p>
<p>Абзац4</p>
</body>
</html>

Функция $.unique() — удаление повторяющих элементов

Функция $.unique() позволяет удалить все повторяющиеся элементы из массива DOM-элементов. Возвращает новый массив. Применяется как обычная функция, объявленная в пространстве имен библиотеки jQuery. Имеет следующий синтаксис.

<Новый массив> = $.unique(<Исходный массив DOM-элементов>);

Рассмотрим пример использования функции $.unique() (листинг 9.2).

Листинг 9.2. Функция $.unique()

<!doctype html>
<html>
<head>
<title>Функция $.unique()</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   var arr1 = $("a[href$='.php']").get();
   var arr2 = $(".cls1").get();
   $("#div1").append("Элементов в arr1: " + arr1.length + "<br>");
   $("#div1").append("Элементов в arr2: " + arr2.length + "<br>");
   // Объединяем два массива
   var arr3 = arr1.concat(arr2);
   $("#div1").append("Элементов в arr3: " + arr3.length + "<br>");
   // Оставляем только уникальные значения
   arr3 = $.unique(arr3);
   $("#div1").append("Уникальных элементов: " + arr3.length + "<br>");
});
</script>
<style>
.cls1 { color:red; }
</style>
</head>
<body>
<div id="div1"></div>
<a href="link1.html" class="cls1">Ссылка 1</a><br>
<a href="link2.php" class="cls1">Ссылка 2</a><br>
<a href="link3.html">Ссылка 3</a><br>
<a href="link4.php">Ссылка 4</a><br>
<p class="cls1">Абзац</p>
</body>
</html>

Результат:

Элементов в arr1: 2
Элементов в arr2: 3
Элементов в arr3: 5
Уникальных элементов: 4

Итак, вначале находим все ссылки, которые имеют расширение .php. С помощью метода get() получаем массив DOM-элементов. Наш массив будет состоять из следующих элементов:

<a href="link2.php" class="cls1">Ссылка 2</a><br>
<a href="link4.php">Ссылка 4</a><br>

Далее мы получаем все элементы с классом cls1 и с помощью метода get() преобразуем их в массив DOM-элементов. Массив будет состоять из следующих элементов:

<a href="link1.html" class="cls1">Ссылка 1</a><br>
<a href="link2.php" class="cls1">Ссылка 2</a><br>
<p class="cls1">Абзац</p>

После объединения массивов получаем повторяющийся элемент.

<a href="link2.php" class="cls1">Ссылка 2</a><br>

Функция $.unique() оставит этот элемент в единственном числе, и в результате мы получим четыре элемента вместо пяти.

<a href="link2.php" class="cls1">Ссылка 2</a><br>
<a href="link4.php">Ссылка 4</a><br>
<a href="link1.html" class="cls1">Ссылка 1</a><br>
<p class="cls1">Абзац</p>

Функция $.trim() — удаление пробельных символов

Функция $.trim() позволяет удалить пробельные символы в начале и конце строки. Возвращает новую строку. Применяется как обычная функция, объявленная в пространстве имен библиотеки jQuery. Имеет следующий синтаксис.

<Новая строка> = $.trim(<Исходная строка>);

Рассмотрим пример.

var str = "     Строка с пробелами     ";
alert("До: '" + str + "'");
alert("После: '" + $.trim(str) + "'");

Результат:

До: '     Строка с пробелами     '
После: 'Строка с пробелами'

Функции $.data() и $.removeData() — работа с данными

Функция $.data() предназначена для сохранения и получения данных, имеет следующий формат.

$.data(<DOM-элемент>[, <Название>[, <Значение>]])

Если указан только первый параметр, то функция возвращает уникальный идентификатор элемента. Выведем значение идентификатора.

alert($.data($("#div1").get(0)));

В параметре <Название> можно указать название данных, а в параметре <Значение> — данные, которые должны быть сохранены. Формат сохраняемых данных может быть любым. Сохраним строку под названием "myData" в элементе с идентификатором div1.

var elem = $("#div1").get(0);
$.data(elem, "myData", "Строка с данными");

Получить данные можно следующим образом.

var elem = $("#div1").get(0);
alert("Данные: " + $.data(elem, "myData"));

Теперь сохраним объект.

var elem = $("#div1").get(0);
$.data(elem, "myData", { el1:"Строка1", el2:"Строка2" });

Получить данные можно так.

var obj = $.data($("#div1").get(0), "myData");
alert("el1: " + obj.el1 + "\n" + "el2: " + obj.el2);

Сохраним массив.

var elem = $("#div1").get(0);
$.data(elem, "myData", ["Строка1", "Строка2"]);

Получить данные можно так.

var arr = $.data($("#div1").get(0), "myData");
alert(arr[0] + "\n" + arr[1]);

Функция $.removeData(), предназначенная для удаления данных, имеет следующий формат.

$.removeData(<DOM-элемент>[, <Название>])

Если второй параметр не указан, то будут удалены все данные. Пример сохранения, получения и удаления данных приведен в листинге 9.3.

Листинг 9.3. Сохранение, получение и удаление данных

<!doctype html>
<html>
<head>
<title>Сохранение, получение и удаление данных</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $("#btn1").click(function() {
      var elem = $("#div1").get(0);
      $.data(elem, "myData", $("#txt1").val());
      $("#div2").text("Данные сохранены");
   });
   $("#btn2").click(function() {
      var elem = $("#div1").get(0);
      $("#div2").text("Данные: " + $.data(elem, "myData"));
   });
   $("#btn3").click(function() {
      var elem = $("#div1").get(0);
      $.removeData(elem, "myData");
      $("#div2").text("Данные удалены");
   });
});
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div><br>
<input type="text" id="txt1">
<input type="button" value="Сохранить" id="btn1">
<input type="button" value="Получить" id="btn2">
<input type="button" value="Удалить" id="btn3">
</body>
</html>

Вместо функций $.data() и $.removeData() можно использовать методы data() и removeData(). Формат метода data():

data(<Название>[, <Значение>])

Если параметр <Значение> не указан, то функция возвращает текущие данные первого элемента коллекции. Если же параметр указан, то данные будут сохранены во всех элементах коллекции.

Для удаления данных предназначен метод removeData(). Формат метода:

removeData([<Название>])

Если параметр не указан, то будут удалены все данные.

Переделаем наш предыдущий пример и используем методы data() и removeData() вместо функций $.data() и $.removeData() (листинг 9.4).

Листинг 9.4. Методы data() и removeData()

<!doctype html>
<html>
<head>
<title>Методы data() и removeData()</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1").data("myData", $("#txt1").val());
      $("#div2").text("Данные сохранены");
   });
   $("#btn2").click(function() {
      $("#div2").text("Данные: " + $("#div1").data("myData"));
   });
   $("#btn3").click(function() {
      $("#div1").removeData("myData");
      $("#div2").text("Данные удалены");
   });
});
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div><br>
<input type="text" id="txt1">
<input type="button" value="Сохранить" id="btn1">
<input type="button" value="Получить" id="btn2">
<input type="button" value="Удалить" id="btn3">
</body>
</html>

Свойство $.browser — определение типа и версии браузера

Определить тип и версию браузера позволяет свойство $.browser. Оно возвращает несколько свойств: safari, opera, msie и mozilla. В зависимости от типа браузера, соответствующее свойство будет содержать значение true, а все остальные свойства — значение false. Это позволяет определить тип браузера следующим образом.

if ($.browser.msie) {
   alert("Это Internet Explorer");
}

Версия браузера доступна через свойство version.

if ($.browser.msie) {
   alert("Это Internet Explorer " + $.browser.version);
}

Вывести значения всех свойств можно с помощью функции $.each().

$.each($.browser, function(key, val) {
   $("#div1").append(key + " =&gt; " + val + "<br>");
});

Вот вывод для браузера Internet Explorer 7.

version => 7.0
safari => false
opera => false
msie => true
mozilla => false

Свойство $.boxModel — определение блочной модели

Свойство $.boxModel позволяет определить, какой тип блочной модели применяет браузер. Возвращает значение true, если блочная модель соответствует стандартам консорциума W3C, и false — если браузер использует простой режим (так называемый режим Quirks). В основном, это касается браузера Internet Explorer, который использует простой режим в случае, если отсутствует заголовок DOCTYPE, и строгий режим — при его наличии. Из этого правила могут быть исключения. Например, в Internet Explorer 6, если перед заголовком DOCTYPE указан XML-пролог

<?xml version="1.0" encoding="utf-8"?>

браузер перейдет в простой режим. В браузере Internet Explorer 7 это поведение было изменено.

Рассмотрим определение блочной модели на примере (листинг 9.5).

Листинг 9.5. Определение блочной модели

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Определение блочной модели</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   if ($.boxModel) {
      $("#div1").html("Строгий режим");
   }
   else {
      $("#div1").html("Простой режим");
   }
});
//-->
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

В этом примере мы указали заголовок:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Это обязывает браузер соответствовать стандартам консорциума W3C. Браузер Internet Explorer 7 в этом случае выведет надпись "Строгий режим". Если убрать заголовок DOCTYPE и обновить страницу, то надпись изменится на "Простой режим".

Для версии jQuery 1.3 наш код следует переписать следующим образом.

$(document).ready(function() {
   if ($.support.boxModel) {
      $("#div1").html("Строгий режим");
   }
   else {
      $("#div1").html("Простой режим");
   }
});

Свойство $.support содержит еще несколько свойств, позволяющих учитывать нюансы различных браузеров. Более подробную информацию о свойстве $.support можно получить на странице http://docs.jquery.com/Utilities/jQuery.support.

Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF