Дата: 2014-09-25 Официально и так сказать "в полную силу" платежная система...
10 лет назад, когда jQuery только зарождалась, браузерная экосистема была очень разношерстной и каждый из существовавших тогда продуктов по своему боролся со сложностью управления DOM-элементами. Амбициозной задачей, которую поставили перед собой разработчики jQuery, была разработка универсального подхода к решению этих проблем и создание API, который бы одинаково хорошо работал в любой ситуации.
Насколько им это удалось судить вам, но спустя 10 лет своего существования, jQuery остается одной из самых популярных библиотек JavaScript.
Сам JavaScript сейчас совершенно зрелый продукт, хорошо документированный и поддерживаемый всеми современными браузерами. Современное браузерное сообщество тоже более консолидировано и, в большинстве случаев, можно быть уверенным, что если, скажем, страница корректно отображается в Crome, то так же она будет выглядеть и в Firefox. querySelectors тоже поддерживаются практически всеми современными браузерами.
Казалось бы, история развития jQuery движется к закату - зачем перегружать страницы и тратить лишние циклы процессора, если большинство задач можно решить стандартными средствами языка? С другой стороны, за такой долгий для компьютерной индустрии период разработано огромное количество решений, которые можно просто взять и использовать, здесь и сейчас.
Я думаю, этот выбор должен делать сам разработчик в каждой конкретной ситуации ориентируясь не на моду и тенденции, а на здравый смысл и перспективы развития своего творения.
В этом обзоре я собрал все известные мне бесплатные плагины jQuery , которые сейчас активно развиваются или которые хотя бы раз обновлялись за прошедший год. Некоторые из них я активно применял и применяю в своей практике, некоторые я знаю только поверхностно, но они впечатлили меня своими возможностями. Среди них есть исключительно неординарные, выполненные с большой фантазией. И даже если вы не найдете способ использовать их в своих проектах, быть может они вдохновят вас на создание своих собственных, еще более невероятных решений.
multiscroll.jsИнтересное решение привлечь внимание посетителя - скроллинг страницы выполнен в виде двух панелей, одна из которых скользит вверх, а вторая вниз , открывая следующий блок. Также отлично работает на всех, даже весьма устаревших браузерах.jquery.email-autocomplete.jsЭлектронные адреса приходится вводить очень часто и, несмотря на то, что это всего лишь полтора десятка символов, часто возникает желание ускорить этот процесс. jquery.email-autocomplete.js имеет собственный список доменов популярных почтовых сервисов на основании которого он предлагает автодополнение адреса. Пользователь может принять эту подсказку, нажав клавишу Tab или стрелку вправо, или же продолжить вводить дальше вручную. Плагин хорошо работает и в мобильных версиях сайта. Однако, придется немного допилить плагин, чтобы он начал работать с отечественными почтовыми сервисами.Весьма оригинальный плагин который, я думаю, понравится посетителям, если у вас много длинного текстового материала.
TooltipsterКлассическая всплывающая подсказка (tooltip) с большим набором функций и опций. Сам элемент может располагаться где угодно по отношению к родительскому элементу и содержать какие угодно элементы. Главное, не переборщить с его применением, используйте его только там где это действительно необходимо.AddelНесмотря на созвучное название, этот плагин не имеет никакого отношения к певице Адель. Его название происходит от английских слов ADd-DELete (добавить и удалить) и отражает его назначение - динамически добавлять или скрывать HTML-элементы , в первую очередь элементы форм. Управление гибкое и интуитивно понятное.Chart.jsАктивно развивающийся плагин, позволяющий выводить различные типы диаграмм (всего 8 типов, в том числе смешанные). Отлично работает на всех современных браузерах и имеет плавную и симпатичную анимацию при изменении данных.JQuery – это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение – лучше всего начинать с наглядных примеров, и они далее…
Материалы данной статьи включены в учебник « ». Учебник распространяется бесплатно, и сопровождается интерактивными .
Как же все-таки работает jQuery?Ну для начала Вам понадобится сам фреймворк, его вы сможете скачать с домашней страницы проекта , затем проинициализировать:
А основные моменты Вам поможет понять следующая диаграмма:
Как получить элемент с помощью jQuery?Для того чтобы понимать как работает селектор Вам все-же необходимы базовые знания CSS, т.к. именно от принципов CSS отталкивается селектор jQuery:
- $(“#header”) – получение элемента с id=”header”
- $(“h3”) – получить все элементы
- $(“div#content .photo”) – получить все элементы с классом =”photo” которые находятся в элементе div с id=”content”
- $(“ul li”) – получить все
- элементы из списка
- $(“ul li:first”) – получить только первый элемент
- из списка Выдвижная панель
Начнем с простенького примера – слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. )
Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между “active” и “btn-slide”), а панелька с id=”panel” будет выдвигаться/прятаться. (класс “active” изменяет позицию фонового изображения, см. CSS файл во вложении).$(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); }); });
Магические исчезновенияЭтот пример покажет как можно красиво и легко убирать растворять элементы (см. ):
Когда мы кликаем по картинке , будет найден родительский элемент , и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide:
$(document).ready(function(){ $(".pane .delete").click(function(){ $(this).parents(".pane").animate({ opacity: "hide" }, "slow"); }); });
Связанная анимацияТеперь пример посложнее, но он поможет Вам лучше понять jQuery. Всего несколько строк кода заставят квадрат двигаться, изменять размер и прозрачность. (см. ):
Line 0: когда прогрузилась страница (DOM готов к манипуляциям)
Line 1: привязываемся к событию click для элемента
Line 2: манипулируем элементом – уменьшаем его прозрачность до 0.1, наращиваем позицию left еще на 400px, со скоростью 1200 (milliseconds)
Line 3: затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20; скорость анимации указывается вторым параметром: “slow”, “normal”, “fast” или в миллисекундах
Line 4: затем opacity=1, left=0, height=100, width=100, скорость – “slow”
Line 5: затем top=0, скорость – “fast”
Line 6: затем slideUp (с дефолтной скоростью анимации – “normal”)
Line 7: затем slideDown, скорость – “slow”
Line 8: возвращаем false для того чтобы браузер не перешел по ссылке$(document).ready(function(){ $(".run").click(function(){ $("#box").animate({opacity: "0.1", left: "+=400"}, 1200) .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow") .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow") .animate({top: "0"}, "fast") .slideUp() .slideDown("slow") return false; }); });
Гармошка #1Пример реализации “гармошки”. (см. )
Теперь приступим к разбору полетов:
Первой строчкой мы добавляем класс “active” первому элементу внутри (класс”active” отвечает за позиционирования фонового рисунка – иконки со стрелочкой). Во второй строчке мы прячем все не первыеЭлементы внутри .
Когда происходит клик по заголовку , для следующего в нём элементаБудет применен эффект slideToggle, затем для всех остальных элементов
Будет применен эффект slideUp. Следующие действие изменяет класс заголовка на “active”, затем ищем все остальные заголовки и убираем у них класс “active”
$(document).ready(function(){ $(".accordion h3:first").addClass("active"); $(".accordion p:not(:first)").hide(); $(".accordion h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); }); });
Гармошка #2Этот пример схож с предыдущим, лишь отличается тем, что мы указываем открытую по умолчанию панельку. (см. )
В CSS у нас указано для всех элементов
Display:none. Теперь нам необходимо открыть третью панель. Для этого мы можем написать следующее $(“.accordion2 p”).eq(2).show(), где eq обозначает равенство. Помните, что индексирование начинается с нуля:
$(document).ready(function(){ $(".accordion2 h3").eq(2).addClass("active"); $(".accordion2 p").eq(2).show(); $(".accordion2 h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); }); });
Анимация для события hover #1Данный пример поможет создать Вам очень красивую анимацию для события hover (надеюсь, Вы знаете что это ?), (см. ):
Когда Вы наводите мышкой на элемент меню (mouseover), происходит поиск следующего элемента , и анимируется его прозрачность и расположение:
$(document).ready(function(){ $(".menu a").hover(function() { $(this).next("em").animate({opacity: "show", top: "-75"}, "slow"); }, function() { $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast"); }); });
Анимация для события hover #2Данный пример чуть-чуть посложней предыдущего примера: для формирования подсказки используется атрибут linktitle (см. )
Первым делом добавим тэг в каждый элемент . Когда произойдет событие mouseover, мы возьмем текст из атрибута “thetitle” и сохраним его в переменной “hoverText”, затем этот текст будет вставлен в тэг :$(document).ready(function(){ $(".menu2 a").append(""); $(".menu2 a").hover(function() { $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); var hoverText = $(this).attr("title"); $(this).find("em").text(hoverText); }, function() { $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); }); });
Кликабельные блокиЭтот пример демонстрирует как сделать кликабельным блок с текстом, а не только ссылку (см. ):
Создадим список- с классом class=”pane-list” и мы хотим сделать элементы
- кликабельными. Для начала привяжемся к событию click для элемента “.pane-list li”; когда пользователь будет кликать по элементу списка, наша функция произведет поиск тэга и сделает редирект на страницу указанную в атрибуте href.
$(document).ready(function(){ $(".pane-list li").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); });
Складывающиеся панелькиНу а теперь чуть-чуть скомбинируем предыдущие примеры и создадим ряд складывающихся панелек (наподобие как в Gmail организован inbox). (см. )
- скрываем все элементы после первого.
- скрываем все элементы
- после пятого
- клик по
- клик по
- клик по , так же вызывается метод slideDown для всех
- послепятого
- клик по – скрывает элемент, и отображает
Я думаю многие из читателей сталкивались с админской частью wordpress’a, точнее с редактирование комментариев. Попробуем сделать что-то подобное. Для анимации фонового цвета нам понадобиться соответствующий плагин для jQuery . (см. )
- добавим класс “alt” к каждому чётному элементу (данный класс изменяет цвет фона элемента)
- клик по инициирует появление сообщения (alert), так же происходит анимация фонового цвета и прозрачности (backgroundColor и opacity) для
- клик по – вызывает анимацию фона у (цвет изменяется на желтый и обратно) и добавляет класс “spam”
- клик по – вызывает анимацию фона у (цвет изменяется на зеленый и обратно) и удаляет класс “spam”
- клик по – вызывает анимацию фона у (цвет изменяется на красный), и изменяет параметр “opacity” на “hide”
Простейший пример реализации галереи, без перезагрузки страницы. (см. )
Для начала добавим тэг в заголовки
По клику на изображения вВыполняем следующие действия.
jQuery — это библиотека JavaScript, которая позволяет веб-разработчикам добавлять дополнительные функции на свои веб-сайты. Она доступна с и предоставляется бесплатно по лицензии MIT. В последние годы jQuery стала самой востребованной библиотекой JavaScript, используемой в веб-разработке.
Пример jQueryЧтобы реализовать jQuery, веб-разработчику нужно сослаться на JavaScript-файл в HTML-коде веб-страницы. На некоторых веб-сайтах размещается собственная локальная копия, в то время как другие просто ссылаются на библиотеку, размещенную Google или сервером. Например, веб-страница может загружать библиотеку jQuery, используя следующую строку в разделе HTML (пример jQuery и cookie):
Примеры jQuery и AjaxПосле загрузки библиотеки веб-страница может вызывать любую функцию, поддерживаемую библиотекой. Общие примеры включают в себя изменение текста, обработку данных формы, перемещение элементов на странице и выполнение анимаций. jQuery также может работать с Ajax-кодом и такими как PHP и ASP, для доступа к данным из базы данных. Поскольку jQuery выполняется на стороне клиента (а не на веб-сервере), она может обновлять информацию на веб-странице в реальном времени, не перезагружая страницу. Общим примером является автозаполнение, в котором форма поиска автоматически отображает общие данные при вводе запроса.
Преимущества библиотекиПомимо бесплатной лицензии, другой основной причиной, по которой jQuery завоевала такую популярность, является ее кросс-браузерная совместимость. Поскольку каждый браузер отображает и JavaScript по-разному, веб-разработчику может быть сложно сделать веб-сайт одинаковым во всех браузерах. Вместо того, чтобы писать пользовательские функции для каждого браузера, веб-разработчик может использовать одну функцию jQuery, которая будет работать в Chrome, Safari, Firefox и Internet Explorer. Поддержка нескольких браузеров заставила многих разработчиков перейти от стандартного JavaScript к jQuery, поскольку это значительно упрощает процесс кодирования.
ОписаниеСинтаксис jQuery используется для упрощения навигации по документу, выбора элементов DOM, создания анимаций, обработки событий и разработки приложений Ajax. jQuery также предоставляет разработчикам возможность создавать плагины поверх библиотеки JavaScript. Это позволяет программистам создавать абстрактные конструкции для взаимодействия и анимации на низком уровне, расширенные эффекты и высокоуровневые, тематические виджеты. Модульный подход к библиотеке jQuery позволяет создавать мощные динамические веб-страницы и веб-приложения.
Набор основных функций:
- выбор элементов DOM;
- обход и манипуляция с помощью механизма выбора;
- новый стиль программирования;
- алгоритмы слияния и структуры данных DOM.
Стиль повлиял на архитектуру других фреймворков JavaScript, таких как YUI v3 и Dojo, а также стимулировал создание стандартного API Selectors.
Microsoft и Nokia поставляют jQuery на своих платформах. Microsoft включает его с Visual Studio для использования в рамках ASP.NET AJAX и ASP.NET MVC, а Nokia интегрировала его в платформу разработки виджета веб-времени.
ОбзорjQuery представляет собой библиотеку элементов с объектной моделью документов (DOM). DOM представляет собой представление древовидной структуры всех элементов веб-страницы. jQuery упрощает синтаксис для поиска, выбора и управления этими элементами DOM. Библиотека может использоваться для поиска элемента в документе с определенным свойством (например, всех элементов с тегом h1), изменения одного или нескольких его атрибутов (цвета, видимости) или принятия ответа на событие (например, щелчком мыши).
РазработкаБиблиотека использует такие востребованные функции JavaScript, как fade ins и fade outs при скрытии элементов, анимации и работе с элементами jQuery CSS. jQuery также предоставляет парадигму для обработки событий, которая выходит за рамки выбора и манипуляции элементами DOM. Назначение события и определение функции обратного вызова выполняются одним шагом в одном месте в коде.
Принципы разработки с помощью jQuery (примеры):
- Разделение JavaScript и HTML — библиотека предоставляет простой синтаксис для добавления обработчиков событий в DOM с использованием JavaScript, вместо добавления атрибутов событий HTML для вызова функций JS. Таким образом, он поощряет разработчиков полностью отделять код JavaScript от разметки HTML.
- Краткость и ясность — способствует краткости и ясности с такими инструментами, как цепочки и сокращенные имена функций.
- Устранение кросс-браузерных несовместимостей — JavaScript-движки разных браузеров немного отличаются, поэтому код JS, который работает для одного браузера, может не работать для другого. Подобно другим инструментариям JavaScript, jQuery обрабатывает все эти кросс-браузерные несоответствия и обеспечивает согласованный интерфейс, который работает в разных браузерах.
- Расширяемость — новые события, элементы и методы могут быть легко добавлены, а затем повторно использованы как плагин.
jQuery был первоначально выпущен в январе 2006 года в BarCamp NYC Джоном Ресигом и находился под влиянием ранней библиотеки cssQuery Дина Эдвардса. В настоящее время он поддерживается командой разработчиков под руководством Тимми Уиллисона (с движком селектора jQuery — Sizzle, которым руководит Ричард Гибсон).
ОсобенностиБиблиотека включает в себя следующие функции:
- выбор элементов DOM с использованием многосерверного механизма селектора с открытым исходным кодом Sizzle;
- выделение проекта DOM-манипуляции на основе селекторов CSS, которая использует имена и атрибуты элементов, такие как id и class, как критерии для выбора узлов в DOM;
- мероприятия;
- эффекты и анимации;
- ajax;
- объекты отложенных и обещающих для контроля асинхронной обработки;
- разбор JSON;
- расширяемость через плагины;
- утилиты, такие как обнаружение функций;
- способы совместимости, которые изначально доступны в современных браузерах, но нуждаются в более ранних версиях, таких как inArray () и each (), мульти-браузер (не путать с кросс-браузером).
Библиотека jQuery представляет собой один файл JavaScript, содержащий все его общие функции DOM, события, эффекты и Ajax. Он может быть включен в веб-страницу путем ссылки на локальную копию или на одну из многочисленных копий, доступных на общедоступных серверах. Библиотека имеет сеть доставки контента (CDN), размещенную MaxCDN.
Пример jQuery в PHP:
СтилиjQuery имеет два стиля использования:
- Через функцию $, которая является фабричным методом для объекта jQuery. Эти функции, часто называемые командами, являются целыми, поскольку все они возвращают объекты jQuery.
- Через $ — префиксные функции. Это служебные функции, которые напрямую не действуют на объект.
Доступ к JQuery и управлеие несколькими узлами DOM обычно начинается с вызова функции $ с помощью строки Это возвращает объект jQuery, ссылающийся на все соответствующие элементы на странице HTML.
Бесконфликтный режимjQuery включает режим.noConflict (), который освобождает управление функцией $. Это полезно, если jQuery используется с другими библиотеками, которые также используют $ в качестве идентификатора. В режиме без конфликтов разработчики могут использовать библиотеки в качестве замены $ без потери функциональности.
Расширенный функционалФункции обратного вызова для обработки событий на элементах, которые еще не загружены, могут быть зарегистрированы внутри.ready () как анонимные функции. Эти обработчики будут вызываться только при срабатывании события. Например, следующий код добавляет обработчик для щелчка мыши на элемент изображения img:
$("img").on("click",function(){
//обрабатываем событие click на любом элементе img на странице
Некоторые функции возвращают определенные значения (например, $("#input-user-email").Val()). В этих случаях цепочка не работает, поскольку значение не ссылается на объект jQuery.
Создание новых элементовПомимо доступа к узлам DOM через иерархию объектов, также возможно создавать новые элементы, если строка, переданная как аргумент в $ (), выглядит как HTML. Например, строка находит элемент выбора HTML с идентификационными картами и добавляет элемент опции со значением VAG и текст Volkswagen:
$("# выберите carmakes")
Append($("")
Attr({значение:VAG})
Append (Volkswagen)).
УтилитыФункции jQuery с префиксом $ являются функциями полезности, которые влияют на глобальные свойства и поведение. В следующем примере используется функция each (), которая выполняет итерацию через массивы:
$.each(,function(){
console.log(это+1);
Данный пример post jQuery записывает 2, 3, 4 на консоль.
AjaxМожно выполнять Ajax с использованием $ .ajax () jQuery, примером которого могут служить связанные методы для загрузки и обработки удаленных данных:
url: "/process/submit.php",
имя: Джон,
местоположение: "Бостон",
}).done(function(msg){
alert("Data Saved:"+msg);
}).fail(function(xmlHttpRequest, statusText, errorThrown){
оповещение(
"Не удалось отправить ваше сообщение.\N\n"
+"XML Http Request:"+JSON.stringify(xmlHttpRequest)
+ ",\nStatus Текст:"+statusText
+ ",\nError Thrown:"+errorThrown);
В этом примере на сервере указано имя данных=John и location=Boston для /process/submit.php. Когда этот запрос завершается, функция вызывается, чтобы предупредить пользователя. Если запрос не удался, он предупредит пользователя об ошибке, состоянии запроса и конкретной ошибке.
ПлагиныАрхитектура jQuery позволяет разработчикам создавать подключаемый код для расширения различных функций. В интернете доступны тысячи подключаемых модулей, которые охватывают целый ряд функций, таких как помощники Ajax, веб-службы, динамические списки, инструменты XML и XSLT, перетаскивание, события, обработка файлов cookie и модальные окна.
Существуют альтернативные плагины для поисковых систем, такие как jquer.in, которые используют более специализированные подходы, такие как перечисление только плагинов, соответствующих определенным критериям (например, те, у которых есть общедоступный репозиторий кода). Разработчик предоставляет «Центр обучения» — ресурс jQuery для начинающих, который может помочь пользователям понять JavaScript и приступить к разработке плагинов.
jQuery UIjQuery UI представляет собой набор виджетов GUI, анимированных визуальных эффектов и тем, реализованных с помощью jQuery CSS (библиотеки JavaScript), каскадных таблиц стилей и HTML. Согласно службе аналитики JavaScript, Libscore, пользовательский интерфейс jQuery используется на более чем 197000 лучших веб-сайтах, что делает его второй по популярности библиотекой JS. Самые известные из них: Pinterest, PayPal, IMDb, The Huffington Post и Netflix.
jQuery UI являются бесплатным и открытым исходным кодом, распространяемым Foundation под лицензией MIT. Был впервые опубликован в сентябре 2007 года.
jQuery MobilejQuery Mobile — это веб-инфраструктура с сенсорной оптимизацией (также известная как мобильная инфраструктура). Основное внимание в разработке уделяется созданию инфраструктуры, совместимой с широким спектром смартфонов и планшетных компьютеров, необходимой для растущего рынка диджитал-техники. Совместим с другими платформами мобильных приложений такими, как PhoneGap, Worklight и многими другими.
Ну для начала Вам понадобиться сам фреймворк, его вы сможете скачать с домашней страницы проекта , затем проинициализировать:
А основные моменты Вам поможет понять следующая диаграмма:- $("#header") - получение элемента с id=«header»
- $(«h3») - получить все элементы
- $(«div#content .photo») - получить все элементы с классом =«photo» которые находятся в элементе div с id=«content»
- $(«ul li») - получить все
- элементы из списка
- $(«ul li:first») - получить только первый элемент
- из списка Выдвижная панель
Начнем с простенького примера - слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример)
Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между «active» и «btn-slide»), а панелька с id=«panel» будет выдвигаться/прятаться. (класс «active» изменяет позицию фонового изображения, см. CSS файл во вложении).$(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); }); });
Магические исчезновения Этот пример покажет как можно красиво и легко убирать растворять элементы (см. пример):Когда мы кликаем по картинке , будет найден родительский элемент , и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide:
$(document).ready(function(){ $(".pane .delete").click(function(){ $(this).parents(".pane").animate({ opacity: "hide" }, "slow"); }); });
Связанная анимация Теперь пример посложнее, но он поможет Вам лучше понять jQuery. Всего несколько строк кода заставят квадрат двигаться, изменять размер и прозрачность. (см. пример):
Line 0: когда прогрузилась страница (DOM готов к манипуляциям)
Line 1: привязываемся к событию click для элемента
Line 2: манипулируем элементом - уменьшаем его прозрачность до 0.1, наращиваем позицию left еще на 400px, со скоростью 1200 (milliseconds)
Line 3: затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20; скорость анимации указывается вторым параметром: «slow», «normal», «fast» или в миллисекундах
Line 4: затем opacity=1, left=0, height=100, width=100, скорость - «slow»
Line 5: затем opacity=1, left=0, height=100, width=100, скорость - «slow»
Line 6: затем top=0, скорость - «fast»
Line 7: затем slideUp (с дефолтной скоростью анимации - «normal»)
Line 8: затем slideDown, скорость - «slow»
Line 9: возвращаем false для того чтобы браузер не перешел по ссылке$(document).ready(function(){ $(".run").click(function(){ $("#box").animate({opacity: "0.1", left: "+=400"}, 1200) .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow") .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow") .animate({top: "0"}, "fast") .slideUp() .slideDown("slow") return false; }); });
Гармошка #1 Пример реализации «гармошки». (см. пример)
Теперь приступим к разбору полетов:
Первой строчкой мы добавляем класс «active» первому элементу внутри (класс«active» отвечает за позиционирования фонового рисунка - иконки со стрелочкой). Во второй строчке мы прячем все не первыеЭлементы внутри .
Когда происходит клик по заголовку , для следующего в нём элементаБудет применен эффект slideToggle, затем для всех остальных элементов
Будет применен эффект slideUp. Следующие действие изменяет класс заголовка на «active», затем ищем все остальные заголовки и убираем у них класс «active»
$(document).ready(function(){ $(".accordion h3:first").addClass("active"); $(".accordion p:not(:first)").hide(); $(".accordion h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); }); });
Гармошка #2 Этот пример схож с предыдущим, лишь отличается тем, что мы указываем открытую по умолчанию панельку. (см. пример)В CSS у нас указано для всех элементов
Display:none. Теперь нам необходимо открыть третью панель. Для этого мы можем написать следующее $(".accordion2 p").eq(2).show(), где eq обозначает равенство. Помните, что индексирование начинается с нуля:
$(document).ready(function(){ $(".accordion2 h3").eq(2).addClass("active"); $(".accordion2 p").eq(2).show(); $(".accordion2 h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); }); });
Анимация для события hover #1 Данный пример поможет создать Вам очень красивую анимацию для события hover (надеюсь, Вы знаете что это ?), (см. пример):Когда Вы наводите мышкой на элемент меню (mouseover), происходит поиск следующего элемента , и анимируется его прозрачность и расположение:
$(document).ready(function(){ $(".menu a").hover(function() { $(this).next("em").animate({opacity: "show", top: "-75"}, "slow"); }, function() { $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast"); }); });
Анимация для события hover #2 Данный пример чуть-чуть посложней предыдущего примера: для формирования подсказки используется атрибут linktitle (см. пример)
Первым делом добавим тэг в каждый элемент . Когда произойдет событие mouseover, мы возьмем текст из атрибута «thetitle» и сохраним его в переменной «hoverText», затем этот текст будет вставлен в тэг :$(document).ready(function(){ $(".menu2 a").append(""); $(".menu2 a").hover(function() { $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); var hoverText = $(this).attr("title"); $(this).find("em").text(hoverText); }, function() { $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); }); });
Кликабельные блоки Этот пример демонстрирует как сделать кликабельным блок с текстом, а не только ссылку (см. пример):
Создадим список- с классом class=«pane-list» и мы хотим сделать элементы
- кликабельными. Для начала привяжемся к событию click для элемента ".pane-list li"; когда пользователь будет кликать по элементу списка, наша функция произведет поиск тэга и сделает редирект на страницу указанную в атрибуте href.
$(document).ready(function(){ $(".pane-list li").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); });
Складывающиеся панельки Ну а теперь чуть-чуть скомбинируем предыдущие примеры и создадим ряд складывающихся панелек (наподобие как в Gmail организован inbox). (см. пример)- скрываем все элементы после первого.
- скрываем все элементы
- после пятого
- клик по
- клик по
- клик по , так же вызывается метод slideDown для всех
- послепятого
- клик по - скрывает элемент, и отображает
$(document).ready(function(){ //hide message_body after the first one $(".message_list .message_body:gt(0)").hide(); //hide message li after the 5th $(".message_list li:gt(4)").hide(); //toggle message_body $(".message_head").click(function(){ $(this).next(".message_body").slideToggle(500) return false; }); //collapse all messages $(".collpase_all_message").click(function(){ $(".message_body").slideUp(500) return false; }); //show all messages $(".show_all_message").click(function(){ $(this).hide() $(".show_recent_only").show() $(".message_list li:gt(4)").slideDown() return false; }); //show recent messages only $(".show_recent_only").click(function(){ $(this).hide() $(".show_all_message").show() $(".message_list li:gt(4)").slideUp() return false; }); });
Имитация Backend"a Wordpress"a Я думаю многие из читателей сталкивались с админской частью wordpress"a, точнее с редактирование комментариев. Попробуем сделать что-то подобное. Для анимации фонового цвета нам понадобиться соответствующий плагин для jQuery . (см. пример)- добавим класс «alt» к каждому чётному элементу (данный класс изменяет цвет фона элемента)
- клик по инициирует появление сообщения (alert), так же происходит анимация фонового цвета и прозрачности (backgroundColor и opacity) для
- клик по - вызывает анимацию фона у (цвет изменяется на желтый и обратно) и добавляет класс «spam»
- клик по - вызывает анимацию фона у (цвет изменяется на зеленый и обратно) и удаляет класс «spam»
- клик по - вызывает анимацию фона у (цвет изменяется на красный), и изменяет параметр «opacity» на «hide»
//don"t forget to include the Color Animations plugin $(document).ready(function(){ $(".pane:even").addClass("alt"); $(".pane .btn-delete").click(function(){ alert("This comment will be deleted!"); $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast") .animate({ opacity: "hide" }, "slow") return false; }); $(".pane .btn-unapprove").click(function(){ $(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast") .animate({ backgroundColor: "#ffffff" }, "slow") .addClass("spam") return false; }); $(".pane .btn-approve").click(function(){ $(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast") .animate({ backgroundColor: "#ffffff" }, "slow") .removeClass("spam") return false; }); $(".pane .btn-spam").click(function(){ $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast") .animate({ opacity: "hide" }, "slow") return false; }); });
Галерея изображений Простейший пример реализации галереи, без перезагрузки страницы. (см. пример)
Для начала добавим тэг в заголовки
По клику на изображения вВыполняем следующие действия:
- сохраняем значение атрибута «href» в переменной «largePath»
- сохраняем значение атрибута «title» в переменной «largeAlt»
- заменяем в элементе значение атрибута «scr» и «alt» значениями из переменных «largePath» и «largeAlt»
- так же присваиваем элементу «h2 em» значение из «largeAlt»
$(document).ready(function(){ $("h2").append("") $(".thumbs a").click(function(){ var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $("#largeImg").attr({ src: largePath, alt: largeAlt }); $("h2 em").html(" (" + largeAlt + ")"); return false; }); });
Стилизируем ссылки Большинство нормальных браузеров легко понимают когда мы хотим добиться от них стилизации ссылок для различного типа файлов, для это цели можно использовать следующее CSS правило: a {… }. Но как обычно IE6 отличается умом и сообразительностью, по этой причине будем ставить ему костыли используя jQuery. (см. пример)
Для начала добавим класс для каждой ссылки, в соответствии с типом файла.
Затем выберем все элементы которые не содержат ссылки на "http://www.webdesignerwall.com " и не начинающиеся на "#" в «href», затем добавим им класс «external» и устанавливаем target= "_blank".$(document).ready(function(){ $("a[@href$=pdf]").addClass("pdf"); $("a[@href$=zip]").addClass("zip"); $("a[@href$=psd]").addClass("psd"); $("a:not([@href*=http://www.webdesignerwall.com])").not("") .addClass("external") .attr({ target: "_blank" }); });
Так же Вы можете посмотреть все примеры или скачать jQuery tutorial for beginners .
Так же много полезных ссылок по jQuery найдете на следующей странице: http://blog.termit.name/jquery/
Может кому пригодиться еще библиотека jQuery-PHP
Теги: Добавить метки
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()); });
Результат .
- кликабельными. Для начала привяжемся к событию click для элемента ".pane-list li"; когда пользователь будет кликать по элементу списка, наша функция произведет поиск тэга и сделает редирект на страницу указанную в атрибуте href.
- кликабельными. Для начала привяжемся к событию click для элемента “.pane-list li”; когда пользователь будет кликать по элементу списка, наша функция произведет поиск тэга и сделает редирект на страницу указанную в атрибуте href.