Впечатляющие анимационные эффекты. Пример использования jQuery Jquery примеры
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 это великолепная библиотека. Она помогала отлично обойти все подводные камни IE6. В прошлые времена кроссбраузерность была большим вопросом, который стоял перед разработчиками. Jquery отлично справлялся со всеми расхождениями отображения верстки в различных браузерах.
На сегодня, браузеры имеют отличные унифицированные решения. Мы можем комфортно использовать все привилегии ES5, также в нашем распоряжении HTML5 API с которым гораздо легче обрабатывать DOM элементы. Разработчики стоят на грани забвения и ухода в сторону от jQuery для некоторых проектов. Особенно, в случае с микросервисами и не сложными программами.
Не поймите не правильно — Jquery все еще остается чудесной библиотекой, и конечно же, в 70% случаев вам придется использовать ее. Хотя для маленьких страничек с ограниченным JS, вы можете использовать VanillaJS или другой фреймворк. Таковы подойдут для мобильных приложений.
Что же, вот вам 10 примеров рабочего кода, с которым можно обойтись без jquery.
Отслеживание события завершения загрузки страницыПервая вещь, которой пользуются используя jQuery - это обвертка кода в $(document).ready() метод, чтобы знать когда DOM готов для манипуляций. Без Jquery, мы можем использовать DOMContentLoaded событие. Вот пример кода:
// Слушаем событие DOMContentLoaded для всего документа, анонимной функцией // Вы можете обвернуть свой код, в дужки этой функции // и она выполнится, когда страница будет загруженной. document.addEventListener("DOMContentLoaded", function () { // наш гавайский привет, будет показан в консоле console.log("Aloha"); });
Селекторы элементов без JqueryОднажды, нам придется выбирать элементы с помощью id, class или тэгов, и jQuery один из лучших. Селекторы которого полностью идентичны синтаксису CSS. На сегодня, браузеры презентовали два важнейших API - querySelector и querySelectorAll.
// Можно использовать document.querySelector чтобы получить первый элемент соответствующий критерию // принимает всего один аргумент - CSS селекторы. var lochNess = document.querySelector(".monsters"); console.log("It"s from Scotland - " + lochNess.textContent); // также можем получить коллекцию используя document.querySelectorAll. // возвращает список dom элементов, соответствующий критерию var scary = document.querySelectorAll(".monsters"); console.log("Hide and seek champions: "); for (var i = 0; i < scary.length; i++) { console.log(scary[i].innerHTML); }
- Nessy
- Big foot
- La chupacabra
Слушание событий, это фундаментальная часть построения веб приложений. Исторически произошло два больших лагеря — IE и остальные. Но сегодня, мы просто используем addEventListener
Var btn = document.querySelectorAll("button"), list = document.querySelector("ul"); // Вызываем addEventListener на желаемое событие. // запускает слежение за событием клика по элементу. btn.addEventListener("click", function () { // При нажатии кнопки, мы хотим инициировать событие масштаба нашего списка. // Для этого нам необходимо добавить событие в наш список, // чтобы при наведении мыши на элемент функция сработала. list.addEventListener("mouseover", enlarge); }); // Для отмены события масштабирования используем removeEventListener. btn.addEventListener("click", function () { // Удаление событий не будет работать с безымянными функциями, используйте только именованные list.removeEventListener("mouseover", enlarge); }); // Давайте создадим функцию, которая будет масштабировать. var enlarge = function () { // Добавляем класс для элементов list.classList.add("zoomed"); // когда курсор уйдет из списка, уберем класс, чтобы вернуться к обычному масштабу list.addEventListener("mouseout", function () { list.classList.remove("zoomed") }); }; // Теперь мы хотим подсветить имена при нажатии на них. // Когда клик сработает на элементе, он должен стать зеленым // Благодаря делегированию событий, мы можем просто добавить обработчик на родительский элемент // В этом способе, мы не будем создавать слушатели событий для каждого
- . list.addEventListener("click", function (e) { // подсвечиваем целевой элемент зеленым e.target.classList.add("green"); });
Enable zoom Disable zoom
Нажмите на имя, чтобы выделить его- Chewbacca
- Han Solo
- Luke
- Boba fett
Green { color: green; } .zoomed { cursor: pointer; font-size: 23px; }
addEventListener использовал третий аргумент, но это опционально. Как видите, код выглядит весьма похоже на jQuery.
Добавление, удаление классов без jQuery на чистом JSУправление классами элементов без jQuery было огромной проблемой в былые времена. Но больше нет. Благодаря свойству classList. А если необходимо изменять аттрибуты, можно использовать setAttribute.
Var btn = document.querySelectorAll("button"), div = document.querySelector("#myDiv"); btn.addEventListener("click", function () { // легкий способ получать аттрибуты элемента console.log(div.id); }); // Element.classList хранит все классы элемента из DOMTokenList. var classes = div.classList; btn.addEventListener("click", function () { console.log(classes); }); btn.addEventListener("click", function () { // Добавление и удаление классов classes.add("red"); }); btn.addEventListener("click", function () { // Переключение класса classes.toggle("hidden"); });
Display id Display classes Color red Toggle visibility
Square { width: 100px; height: 100px; margin-bottom: 20px; border: 1px solid grey; border-radius: 5px; } .hidden { visibility: hidden; } .red { background-color: red; }
Получение и изменение HTML контента элементаjQuery имеет удобные методы text() и html(). Вместо них, вы можете использовать textContent и innerHTML свойства, которые существовали еще задолго до появления jQuery.
Var myText = document.querySelector("#myParagraph"), btn = document.querySelectorAll("button"); // Так с легкостью можно узнать весь текст древа элементов var myContent = myText.textContent; console.log("textContent: " + myContent); // Используйте textContent для замены текста элемента // удаляет старый, замещая новым текстом btn.addEventListener("click", function () { myText.textContent = " Koalas are the best animals "; }); // Если нам нужен HTML элемента, используем innerHTML. var myHtml = myText.innerHTML; console.log("innerHTML: " + myHtml); // Для замены html, просто предоставьте новый btn.addEventListener("click", function () { myText.innerHTML = " Penguins are the best animals "; });
Which are the best animals?
Koalas
Penguins Вставка новых и удаление существующих элементовНе смотря на то, что Jquery значительно упрощает работу с добавлением и удалением элементов, никто не говорил, что этого не реально сделать на чистом JavaScript коде. Вот пример, как добавить, удалить или заменить элемент на странице.
Var lunch = document.querySelector("#lunch"); // Допустим у нас есть меню, нашего ланча // Давайте добавим в него что нибудь var addFries = function () { // Прежде создаем элемента, и наполняем контентом var fries = document.createElement("div"); fries.innerHTML = "
- Fries
"; // Когда это сделано, далее используем appendChild для вставки в страницу. // Наш элемент появится на странице в меню lunch.appendChild(fries); }; // Добавим сыр в наш бургер). var addCheese = function () { var beef = document.querySelector("#Beef"), topSlice = document.createElement("li"), bottomSlice = document.createElement("li"); bottomSlice.innerHTML = topSlice.innerHTML = "Cheese"; // Вставляем верхний срез: // Берем родительский элемент beef и используем insertBefore. // Первый аргумент в методе insertBefore это наш добавляемый элемент // Второй аргумент - элемент перед которым мы добавим создаваемый beef.parentNode.insertBefore(topSlice, beef); //Нижний срез: // Надо будет сделать маленький фокус! // Предоставьте следующий ближащий элемент как второй параметр в insertBefore, // таким способом мы вставляем содержимое "после" желаемого элемента. beef.parentNode.insertBefore(bottomSlice, beef.nextSibling); }; var removePickles = function () { // убираем элемент var pickles = document.querySelector("#pickles"); if (pickles) { pickles.parentNode.removeChild(pickles); } }; // Вкуснятина! var btn = document.querySelectorAll("button"); btn.addEventListener("click", addFries); btn.addEventListener("click", addCheese); btn.addEventListener("click", removePickles);Add fries to lunch Add cheese to sandwich Remove pickles My Lunch
- My sandwich
- Bread
- Pickles
- Beef
- Mayo
- Bread
→ Примеры jQuery для начинающих
jQuery - javascript библиотека, состоящая из кроссбраузерных функций - оплеток для манипулирования элементами DOM (Document Object Model - Объектная модель документа). Главный ее принцип это автоматическое применение нужного механизма, в зависимости от браузера. К примеру, получение элемента html документа по ID, в разных браузерах происходит по разному. До появления jquery, я использовал такую функцию:
Function getObj(objID){ if (document.getElementById) {return document.getElementById(objID);} else if (document.all) {return document.all;} else if (document.layers) {return document.layers;} }
Чтобы это же действие совершить в jquery, достаточно сделать так:
$("#objID") или jQuery("#objID")
Обращение к функции $() равносильно jQuery() , так как первая является алиасом для второй. Если Вы не используете других библиотек, подобных jquery, то можете смело обращаться к пространству имен через $(). В противном случае лучше использовать непосредственное имя объекта - jQuery. Далее, считаем что нет других библиотек.
Начало работы с jQueryИтак, начинаем работу. Первым делом необходимо получить новейшую версию библиотеки jquery с официального сайта проекта http://jquery.com/ или скачать jquery здесь. В архиве и на официальном сайте лежат две версии: сжатая и девелоперская. На сайте лучше использовать сжатую, а если захочется поэкспериментировать воспользуйтесь второй. Первым делом подключаем библиотеку jquery в тело страницы:
После этого пространство имен javascript, определено таким образом, что обращение к функции $() занято jquery и получить любой элемент документа html в виде объекта, можно выражением $("#objID") . Где objID - ID объекта.
jQuery и CSSВ качестве первого примера рассмотрим работу jquery и CSS. Существует два основных способа манипулирования CSS с помощью jquery: изменение одного атрибута или сразу нескольких. Выполняются они через функцию css() . Выглядит в теории это примерно так:
$("#objID").css("display","block") $("#objID").css({ display:"block, margin:"10px", color:"#ffffff" })
Пример изменения одного атрибута CSSПример изменения одного атрибута удался!
Исходный код:
Пример изменения одного атрибута удался!
Пример изменения нескольких атрибутов CSSПример изменения нескольких атрибутов!
Исходный код:
function demo_css(){ $("#span2").css({ color:"#ffffff", padding:"5px", background:"#980000" }); } Пример изменения нескольких атрибутов!
Изменение текста и htmlДля изменения текста или html кода существуют функции text() и html() .
$("#objID").text("Тру ля ля") $("#objID").html("
Тру ля ля
Причем, если попытаетесь с помощью функции text() вставить html код, то получите его в исходном виде. Функция text() все экранирует.
Пример использования text()Исходный код:
function set_text(){ $("#span3").text("Спасибо!"); }
Пример использования html()Исходный код:
function set_html(){ $("#span4").html("Спасибо! Так гораздо лучше."); }
Управление атрибутами с помощью jQueryФункция attr() манипулирует любыми атрибутами элемента. С ее помощью можно добавить или изменить title, href, value, src и так далее.
Пример использования attr()Исходный код:
function plus_ten(){ var cur_value = $("#text").attr("value"); cur_value = parseInt(cur_value) + 10; $("#text").attr("value",cur_value); }
Обработчики событий в jQueryПолный список доступен по адресу http://api.jquery.com/category/events/. Приведу лишь несколько примеров. Самый распространенный обработчик события onclick. В jQuery можно перехватить через функцию click() .
Пример использования click()Исходный код:
$("#butt").click(function(){ alert("Решили проверить?"); });
Пример использования keyup()Введите что-нибудь:
Вы ввели:
Исходный код:
Введите что-нибудь:
Пример использования bind()
Вы ввели: $("#text2").keyup(function(){ if ($("#text2").val()){ $("#text2_target").css({background:"#980000"}); } else { $("#text2_target").css({background:"#ffffff"}); } $("#text2_target").text($("#text2").val()); });Кликни по мне!
Исходный код:
div#log{ background:#1C93A5; width:300px; height:100px; padding:10px; color:#fff; } Кликни по мне!
Ну для начала Вам понадобиться сам фреймворк, его вы сможете скачать с домашней страницы проекта , затем проинициализировать:
$(document).ready(function() { $("#log").bind("click", function(e) { $("#coord").html("Координата X: "+ e.pageX + " Координата Y: " + e.pageY + ""); }); });
А основные моменты Вам поможет понять следующая диаграмма:- $("#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
Теги: Добавить метки
AJAX - группа технологий, которая используется в веб разработке для создания интерактивных приложений. AJAX позволяет передавать данные с сервера без перезагрузки страницы. Таким образом можно получать очень впечатляющие результаты. А библиотека jQuery существенно облегчает реализацию AJAX с помощью встроенных методов.
Для реализации технологии используется метод $.ajax или jQuery.ajax :
$.ajax(свойства) или $.ajax(url [, свойства])
Второй параметр был добавлен в версии 1.5 jQuery.
url - адрес запрашиваемой страницы;
properties - свойства запроса.
Полный список параметров приведен в документации jQuery.
В уроке мы используем несколько наиболее часто используемых параметров.
success (функция) - данная функция вызывается после успешного завершения запроса. Функция получает от 1 до 3 параметров (в зависимости от используемой версии библиотеки). Но первый параметр всегда содержит возвращаемые с сервера данные.
data (объект/строка) - пользовательские данные, которые передаются на запрашиваемую страницу.
dataType (строка) - возможные значения: xml, json, script или html. Описание типа данных, которые ожидаются в ответе сервера.
type (строка) - тип запроса. Возможные значения: GET или POST. По умолчанию: GET.
url (строка) - адрес URL для запроса.
Пример 1Простая передача текста.
$.ajax({ url: "response.php?action=sample1", success: function(data) { $(".results").html(data); } });
Для ответа имеется элемент div .result .
Ждем ответа
Сервер просто возвращает строку:
Echo "Пример 1 - передача завершилась успешно";
Пример 2Передаем пользовательские данные PHP скрипту.
$.ajax({ type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", success: function(data){ $(".results").html(data); } });
Сервер возвращает строку со вставленными в нее переданными данными:
Echo "Пример 2 - передача завершилась успешно. Параметры: name = " . $_POST["name"] . ", nickname= " . $_POST["nickname"];
Пример 3Передача и выполнение кода JavaScript
$.ajax({ dataType: "script", url: "response.php?action=sample3", })
Сервер выполняет код:
Echo "$(".results").html("Пример 3 - Выполнение JavaScript");";
Пример 4Используем XML. Пример можно использовать для работы с внешними XML, например, RSS фидом.
$.ajax({ dataType: "xml", url: "response.php?action=sample4", success: function(xmldata){ $(".results").html(""); $(xmldata).find("item").each(function(){ $(" ").html($(this).text()).appendTo(".results"); }); } });
Сервер должен возвращать XML код:
Header ("Content-Type: application/xml; charset=UTF-8"); echo
- кликабельными. Для начала привяжемся к событию click для элемента ".pane-list li"; когда пользователь будет кликать по элементу списка, наша функция произведет поиск тэга и сделает редирект на страницу указанную в атрибуте href.
- кликабельными. Для начала привяжемся к событию click для элемента “.pane-list li”; когда пользователь будет кликать по элементу списка, наша функция произведет поиск тэга и сделает редирект на страницу указанную в атрибуте href.
Похожие статьи
-
Как можно тремя способами установить Windows на Mac
Издавна специалисты в области компьютерных технологий отмечают приоритет именно компании Apple в области разработок персональных компьютеров. Начиная с середины 70-х годов прошлого столетия до сегодняшних дней, Apple уверенно конкурирует с...
-
Выделение, перенос, копирование
§5 . Работа с фрагментами изображения Прежде чем что-либо делать с фрагментом изображения, его необходимо выделить.Выделение фрагмента Фрагмент изображения выделяется с помощью инструмента «Выделение» (фигурные или прямоугольные...
-
Как работает видеосвязь в имо
Когда-то давно Imo.i, создал свой протокол. Потом преобразовал его из мессенджера в социальную сеть. Теперь мультипротокольный мессенджер перестал быть мультипротокольным. И мессенджером. Не работает Imo.im? Так и должно быть В...
-
Почему не открывается "Плей Маркет"?
Большинство владельцев устройств на базе Андроид сталкивались с тем, что какое-то приложение не запускается. Они либо вовсе не хотят запускаться, либо работают не так, как нужно. Это вызывает вопрос: «Почему не работают приложения на...
-
Как добавить аватарку к своим комментариям?
Социальная сеть ВКонтакте, как и совершенно любой другой аналогичный сайт, предоставляет своим пользователям возможности не только загружать и делиться какими-либо картинками и фотографиями, но и устанавливать их в качестве заглавного...
-
Прошивка HTC Sensation Официальной и Неофициальной Прошивкой Перепрошивка htc sensation xe z715e
HTC Sensation XE является тайваньским смартфоном, на который мы расскажем, как получить root права, сделать сброс настроек или графического ключа. Он работает под Android 2.3. Здесь есть инструкция и прошивка для этой модели ХТЦ. Кстати,...