Изучаем Java

Вы здесь: Главная >> Jquery-учебник >> Основные функции и свойства в jQuery

Обучающие курсы:

Курс обучения профессии "Программист Java"

Основные функции и свойства в jQuery


В данной главе мы разберем основные функции и свойства в jQuery.

 

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

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

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

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

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

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

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

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

Теперь выведем элементы массива, указав индекс и значение.
var arr =[1,2,3];
$.each(arr,  function(ind, val)   {
$("#divl").append(ind + " = >  " + val + "
");
});

Результат:
0 => 1
1 => 2
2 => 3

Перебрать элементы объекта можно следующим образом.
var obj  =  {   "Один":   1,   "Два":  2,   "Три":  3  
}; $.each(obj,  function(key, val)   {
$ ("#divl").append(key + " =>  " + val + "
");

Результат:
Один => 1 Два => 2 Три => 3

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

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

Результат:
Один => 1
Два => 2         У

 

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

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

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

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

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

Если значение соответствует условию, то функция обратного вызова должна вернуть значение 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;
}
});
$("#divl").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); $("#divl").html(arr.join(",  
»));
});

Результат: 4,   5

 

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

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

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

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

var arr =  [1,2,3]; arr = $.map(arr, 
function(val)   { return  (val * 2);
});
$("#divl").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;
}
});
$("#divl").html(arr.joint",   "));

Результат: 4, 3

 

 

 

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

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

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

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

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(11, "));

Результат: 1, 2, 3, 1, 2, 3

 

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

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

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

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

<html>
<head>
<title>Функция $.makeArray()</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() {
   $("#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).

<html>
<head>
<title>Функция $.unique()</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() {
   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>

Результат:
Элементов в агг1: 2
Элементов в агг2: 3
Элементов в аггЗ: 5
Уникальных элементов: 4

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

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

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

<а href = "linkl .html" class= "clsl">Ссылка l</a><br>
<a href = "link2 .php" class="clsl">Ссылка 2</a><br>
<p class="clsl">A63au</p>

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

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

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

<а href = "link2 .php" class = "clsl">Ссылка 2</a><br>
<a href = "link4 .php" >Ссылка 4</a><br>
<a href = "linkl .html" class= "clsl">Ссылка l</a><br>
<p class="clsl">Абзац</р>

 

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

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

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

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

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

В результате получим следующее.
До:` Строка с пробелами `
После: `Строка с пробелами`

 

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

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

$.data(DОМ-элемент [, <Название[, 3начение]])

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

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

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

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

Получить данные можно следующим образом.
var elem = $("#divl").get(0);
alert("Данные: " + $.data(elem, "myData"));

Теперь сохраним объект,
var elem = $("#divl").get(0);
$.data(elem, "myData", { ell:"Строка1", el2:"Строка2" });

Получить данные можно так.
var obj = $.data($("#divl").get(0), "myData");
alert("ell: " + obj.ell + "\n" + "el2: " + obj.el2);

Сохраним массив,
var elem = $("#divl").get(0);
$.data(elem, "myData", ["Строка!", "Строка2"]);

Получим такие данные.
var arr = $.data($("#divl").get(0), "myData");
alert(arr[0] + "\n" + arr[l]);

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

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

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

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

<html>
<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() {
   $("#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 {Название [, 3начение] )

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

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

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

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

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

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

<html>
<head>
<title>Методы data() и removeData()</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() {
   $("#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) {
$("#divl").append(key + " = > " + val + "br");
});

 

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

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

Обратите внимание

Начиная с версии jQuery 1.3 свойство $.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>

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

Обратите внимание
Начиная с версии jQuery 1.3 свойство $ .boxModel признано устаревшим и не рекомендуется к использованию. Вместо $.boxModel следует использовать свойство $.support.boxModel.

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

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

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


Партнеры сайта