Jquery примеры. Впечатляющие анимационные эффекты. Анимация для события hover #1

10.03.17 14K

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

Синтаксис функции jQuery .each()

В следующем примере мы выбираем на веб-странице все элементы div и выводим индекс и идентификатор каждого из них. Возможный результат: “div0:header ”, “div1:body ”, “div2:footer ”. В примере используется функция jQuery each() , а не вспомогательная:

// Элементы DOM $("div").each(function (index, value) { console.log("div" + index + ":" + $(this).attr("id")); });

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

// Массивы var arr = [ "один", "два", "три", "четыре", "пять" ]; $.each(arr, function (index, value) { console.log(value); // Выполнение останавливается после "три" return (value !== "три"); }); // Результат: один два три

В последнем jQuery each примере я хочу представить циклы через свойства объекта:

// Объекты var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 }; $.each(obj, function (index, value) { console.log(value); }); // Результат: 1 2 3 4 5

Все это сводится к формированию надлежащего обратного вызова. Контекст обратного вызова this будет равен второму аргументу, который является текущим значением. Но поскольку контекст всегда будет объектом, то простые значения должны быть «обернуты ». Поэтому строгое равенство между значением и контекстом не может быть задано. Первый аргумент — текущий индекс, который является числом для jQuery each array или строкой (для объектов ).

  • Основной пример использования функции jQuery .each ()

    • Давайте посмотрим, как функция each() применяется в сочетании с объектом jQuery . В первом примере выбираются все элементы a на странице, и выводится их атрибут href :

    $("a").each(function (index, value){ console.log($(this).attr("href")); });

    Во втором примере использования jQuery each object выводятся все внешние href на веб-странице (при условии, что используется протокол HTTP ):

    $("a").each(function (index, value){ var link = $(this).attr("href"); if (link.indexOf("http://") === 0) { console.log(link); } });

    Предположим, что на странице есть следующие ссылки:

    JQUERY4U PHP4U BLOGOOLA

    Второй код выдаст:

    http://jquery4u.com http://www.phpscripts4u.com http://www.blogoola.com

    Элементы DOM из объекта jQuery при использовании внутри each() необходимо снова «обернуть ». Потому что сам jQuery — это фактически контейнер для массива элементов DOM . С помощью jQuery each function этот массив обрабатывается так же, как и обычный. Поэтому мы не получаем обернутые элементы сразу после обработки.

  • Пример массива jQuery.each()

    • Еще раз рассмотрим, как можно обрабатывать обычный массив:

    var numbers = ; $.each(numbers , function (index, value){ console.log(index + ":" + value); });

    Результат выполнения кода: 0:1, 1:2, 2:3, 3:4, 4:5 и 5:6.

    Массив содержит числовые индексы, поэтому мы получаем числа, начиная с 0 и до N — 1 , где N — количество элементов в массиве.

  • Пример JSON JQuery.each()

    • У нас могут быть более сложные структуры данных, такие как массивы в массивах, объекты в объектах, массивы в объектах или объекты в массивах. Давайте рассмотрим, как jQuery find each может применяться в подобных сценариях:

    var json = [ { "red": "#f00" }, { "green": "#0f0" }, { "blue": "#00f" } ]; $.each(json, function () { $.each(this, function (name, value) { console.log(name + "=" + value); }); });

    Результат выполнения кода: red=#f00, green=#0f0, blue=#00f.

    Мы обрабатываем структуру с помощью вложенного вызова each() . Внешний вызов обрабатывает массив переменной JSON , внутренний вызов обрабатывает объекты. В этом примере каждый jQuery each element имеет только один ключ. Но с помощью представленного кода может быть присвоено любое количество ключей.

  • Пример класса jQuery.each()

    • В этом примере показано, как перебрать каждый элемент с классом productDescription :

    Красный Розовый Оранжевый Синевато-зеленый Зеленый

    Вместе с селектором мы используем вспомогательную функцию each() вместо метода each() :

    $.each($(".productDescription"), function (index, value) { console.log(index + ":" + $(value).text()); });

    Результат использования jQuery each function будет следующим: 0:Красный , 1: Оранжевый , 2:Зеленый .

    Нам не нужно использовать индекс и значение. Это параметры, которые помогают определить, какой элемент DOM в настоящее время обрабатывается циклом. Кроме этого в сценарии можно использовать более удобный метод each() :

    $(".productDescription").each(function () { console.log($(this).text()); });

    Результат .

    JQuery – это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение – лучше всего начинать с наглядных примеров, и они далее…

    Материалы данной статьи включены в учебник « ». Учебник распространяется бесплатно, и сопровождается интерактивными .

    Как же все-таки работает jQuery?

    Ну для начала Вам понадобится сам фреймворк, его вы сможете скачать с домашней страницы проекта , затем проинициализировать:

    А основные моменты Вам поможет понять следующая диаграмма:

    Как получить элемент с помощью jQuery?

    Для того чтобы понимать как работает селектор Вам все-же необходимы базовые знания CSS, т.к. именно от принципов CSS отталкивается селектор jQuery:

    Рекомендуем другие статьи
    Рейтинг лучших смартфонов Xiaomi: решения на любой вкус
    Рейтинг лучших смартфонов Xiaomi: решения на любой вкус
    CorelDRAW: Мифы и реальность управления цветом
    CorelDRAW: Мифы и реальность управления цветом
    Обзор смартфона Blackberry Z10 – первый QNX телефон
    Обзор смартфона Blackberry Z10 – первый QNX телефон