Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Вспомогательные функции и свойства
Кроме уже рассмотренных методов, библиотека 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 + " => " + val + "<br>");
});
Результат:
0 => 1
1 => 2
2 => 3
Перебрать элементы объекта можно следующим образом.
var obj = { "Один": 1, "Два": 2, "Три": 3 };
$.each(obj, function(key, val) {
$("#div1").append(key + " => " + val + "<br>");
});
Результат:
Один => 1
Два => 2
Три => 3
Если необходимо досрочно прервать выполнение функции $.each()
, то внутри функции обратного вызова следует вернуть значение false
.
var obj = { "Один": 1, "Два": 2, "Три": 3 };
$.each(obj, function(key, val) {
$("#div1").append(key + " => " + 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()
работает только с массивами 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 + " => " + val + "<br>");
});
Вот вывод для браузера Internet Explorer 7.
version => 7.0
safari => false
opera => false
msie => true
mozilla => false
$.browser
признано устаревшим и не рекомендуется к использованию. Вместо $.browser
следует использовать свойство $.support
.Свойство $.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
и обновить страницу, то надпись изменится на "Простой режим".
$.boxModel
признано устаревшим и не рекомендуется к использованию. Вместо $.boxModel
следует использовать свойство $.support.boxModel
.Для версии 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
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов