jQuery – это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение – лучше всего начинать с наглядных примеров, и они далее…
Как же все-таки работает jQuery?
Ну для начала Вам понадобится сам фреймворк, его вы сможете скачать с домашней страницы проекта, затем проинициализировать:
<head> <script type="text/javascript" src="jquery.js"></script> </head>
А основные моменты Вам поможет понять следующая диаграмма:
Как получить элемент с помощью jQuery?
Для того чтобы понимать как работает селектор Вам все-же необходимы базовые знания CSS, т.к. именно от принципов CSS отталкивается селектор jQuery:
- $(“#header”) – получение элемента с id=”header”
- $(“h3″) – получить все <h3> элементы
- $(“div#content .photo”) – получить все элементы с классом =”photo” которые находятся в элементе div с id=”content”
- $(“ul li”) – получить все <li> элементы из списка <ul>
- $(“ul li:first”) – получить только первый элемент <li> из списка <ul>
Выдвижная панель
Начнем с простенького примера – слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример)
Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между “active” и “btn-slide”), а панелька с id=”panel” будет выдвигаться/прятаться. (класс “active” изменяет позицию фонового изображения, см. CSS файл во вложении).
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});
});
Магические исчезновения
Этот пример покажет как можно красиво и легко убирать растворять элементы (см. пример):
Когда мы кликаем по картинке <img class=”delete”>, будет найден родительский элемент <div class=”pane”>, и его прозрачность будет медленно изменяться от 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 для элемента <a class=”run”>
Line 2: манипулируем элементом <div id=”box”> – уменьшаем его прозрачность до 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” первому элементу <h3> внутри <div class=”accordion”> (класс”active” отвечает за позиционирования фонового рисунка – иконки со стрелочкой). Во второй строчке мы прячем все не первые <p> элементы внутри <div class=”accordion”>.
Когда происходит клик по заголовку <h3>, для следующего в нём элемента <p> будет применен эффект slideToggle, затем для всех остальных элементов <p> будет применен эффект slideUp. Следующие действие изменяет класс заголовка на “active”, затем ищем все остальные заголовки <h3> и убираем у них класс “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 у нас указано для всех элементов <p> 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), происходит поиск следующего элемента <em>, и анимируется его прозрачность и расположение:
$(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 (см. пример)
Первым делом добавим тэг <em> в каждый элемент <a>. Когда произойдет событие mouseover, мы возьмем текст из атрибута “thetitle” и сохраним его в переменной “hoverText”, затем этот текст будет вставлен в тэг <em>:
$(document).ready(function(){
$(".menu2 a").append("<em></em>");
$(".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");
});
});
Кликабельные блоки
Этот пример демонстрирует как сделать кликабельным блок с текстом, а не только ссылку (см. пример):
Создадим список <ul> с классом class=”pane-list” и мы хотим сделать элементы <li> кликабельными. Для начала привяжемся к событию click для элемента “.pane-list li”; когда пользователь будет кликать по элементу списка, наша функция произведет поиск тэга <a> и сделает редирект на страницу указанную в атрибуте href.
$(document).ready(function(){
$(".pane-list li").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});
});
Складывающиеся панельки
Ну а теперь чуть-чуть скомбинируем предыдущие примеры и создадим ряд складывающихся панелек (наподобие как в Gmail организован inbox). (см. пример)
- скрываем все элементы <div class=”message_body”> после первого.
- скрываем все элементы <li> после пятого
- клик по <p class=”message_head”> – вызывает метод slideToggle для следующего элемента <div class=”message_body”>
- клик по <a class=”collpase_all_message”> – вызывает метод slideUp для всех <div class=”message_body”>
- клик по <a class=”show_all_message”> – скрывает элемент, и отображает <a class=”show_recent_only”>, так же вызывается метод slideDown для всех <li> послепятого
- клик по <a class=”show_recent_only”> – скрывает элемент, и отображает <a class=”show_all_message”>, так же вызывается метод slideUp для всех <li> после пятого
$(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” к каждому чётному элементу <div class=”pane”> (данный класс изменяет цвет фона элемента)
- клик по <a class=”btn-delete”> инициирует появление сообщения (alert), так же происходит анимация фонового цвета и прозрачности (backgroundColor и opacity) для <div class=”pane”>
- клик по <a class=”btn-unapprove”> – вызывает анимацию фона у <div class=”pane”> (цвет изменяется на желтый и обратно) и добавляет класс “spam”
- клик по <a class=”btn-approve”> – вызывает анимацию фона у <div class=”pane”> (цвет изменяется на зеленый и обратно) и удаляет класс “spam”
- клик по <a class=”btn-spam”> – вызывает анимацию фона у <div class=”pane”> (цвет изменяется на красный), и изменяет параметр “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;
});
});
Галерея изображений
Простейший пример реализации галереи, без перезагрузки страницы. (см. пример)
Для начала добавим тэг <em> в заголовки <h2>
По клику на изображения в <p class=thumbs> выполняем следующие действия:
- сохраняем значение атрибута “href” в переменной “largePath”
- сохраняем значение атрибута “title” в переменной “largeAlt”
- заменяем в элементе <img id=”largeImg”> значение атрибута “scr” и “alt” значениями из переменных “largePath” и “largeAlt”
- так же присваиваем элементу “h2 em” значение из “largeAlt”
$(document).ready(function(){
$("h2").append('<em></em>')
$(".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[href $='.pdf'] { … }. Но как обычно IE6 отличается умом и сообразительностью, по этой причине будем ставить ему костыли используя jQuery. (см. пример)
Для начала добавим класс для каждой ссылки, в соответствии с типом файла.
Затем выберем все элементы <a> которые не содержат ссылки на “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("[href^=#]")
.addClass("external")
.attr({ target: "_blank" });
});
Так же Вы можете посмотреть все примеры или скачать jQuery tutorial for beginners.
Вольный перевод: http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
Так же много полезных ссылок по jQuery найдете на следующей странице: http://blog.termit.name/jquery/
Может кому пригодиться еще библиотека для PHP: http://anton.shevchuk.name/php/php-library-for-jquery/
Цикл статей
This entry was posted
on Monday, March 3rd, 2008 at 17:32 and is filed under HTML and CSS, JavaScript.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Хороший перевод.
У тебя на первой картинке в первом зеленом блоке опечатка вместо “class” написано “claaa”
to Termit:
спасибо, исправил…
Огромное тебе спасибо за перевод!
Подписан и не жалею, продолжай в том же духе :)
Большое спасибо за статью. Давно такое искал. буду ждать продолжения :)
Очень доходчиво и понятно. жКвери одна их лучших библиотек.
А! Спасибо добр человек :)
Давно хотел узнать, что же это за библиотека. Теперь знаю :)
Ты монстр, чувак! :)
Спасибо за перевод. Отлично!
> Но изучение надо с чего начинать
тут, похоже, очипятка. Похоже, должно звучать так:
> Но изучение надо с чего-то начинать
Спасибо всем за комментарии, в дальнейшем постараюсь порадовать еще интересными статьями и переводами…
to Kuzma:
спс, исправил…
Сам недавно открыл для себя jQuery – теперь наслаждаюсь…
Этот фреймворк переплюнет все остальные!!!
Я прямо в шоке :)
jquery – это супер!!!
“Анимация для события hover #1″ под ие6 не отображается задний фон =(
Отлично получается всё – спасибо ! респект !
Спасибо за перевод. Отличная работа.
Любопытно!
Очень Любопытно!
Необходим jQuery
Хорошая статья и перевод
Здравствуйте
посмотрите “фишку” от CameronMoll
на сайте http://www.dietswomen.info
(“you toolbox”)
код открытый 8)
С Уважением
[...] статья. Еще можно посмотреть “похожие статьи”. Хороший перевод “jQuery для начинающих”. Спасибо [...]
Отлично!
До прочтения всяких спецификаций, ничего толком не было понятно. На примерах понял весь принцип и можно теперь читать всякие спецификации. )
Спасибо!!!
Большое спасибо за перевод, всё понятно. Единственное что осталось для меня загадкой — это в первом примере переключение класа с btn-slide на active. Зачем это, и вообще обязательно?
С классом active связан фон элемента – т.е. когда клацаешь на панельку – изменяется картинка со стрелочкой…
Это то понятно, но вот, зачем? Визуально то этого никак не будет видно, это ведь надо по вертикали сдвигать. Или это какаято фишка, без которой не работает всё это дело?
Вот ещё вопрос (по первому примеру) — почему если ставишь сразу вот так:
$(document).ready(function(){
$(“.btn-slide”).mouseover(function(){
$(“#panel”).slideToggle(“slow”);
});
$(“.btn-slide”).mouseout(function(){
$(“#panel”).slideToggle(“slow”);
});
});
то в ИЕ6 слишком силно вылазиет, тоесть если я поставлю высоту 5 пикселей, то эта панель вылезает гдето на 30. Почему так? Может потомучто убрал этот .active?
[...] визуальных эффектов в jQuery) статья Шевчука Антона “jQuery для начинающих” (рекомендую читать после статьи на [...]
Спасибо за перевод статьи. Очень полезно тем, кто пытается изучить jQuery!
Отличнейший пост о библиотеке, довольно полезная информация как для новичков в работе с этим фреймворком, так и для опытных пользователей.
а как в гармошку вставить таблицу?
Vielen vielen Dank!!!
[...] http://anton.shevchuk.name/javascript/jquery-for-beginners/ – jQuery для начинающих. [...]
Огромное спасибо…
Просто афигенный перевод и для начинающих самое понятное!!! ааааааааа спасиб…
[...] jQuery для начинающих- 4 746 – 00:03:54 [...]
Респект тебе чувак!
оГРОМНОЕ СПАСИБО ТЕБЕ ЗА ПРОДЕЛАННУЮ РАБОТУ!
Антон, я сейчас просмотрел все ваши примеры – ни один из низ не работает.
Браузер – Firefox 3.0
@gmile:
Проверил в FF3 – все ок…
Антон, статья отличная. Я То с jQuery знаком давно, но я даже не знал, что инфы о ней, именно в РУ нете – крохи (у самого с Англ. проблем нет, чего и всем советую). И я понял, что нужно делать некоммерческий проект, посвященный jQuery. Выложить все описание API, примеры и все что будет полезно людям. И мне очень бы хотелось знать, полезен ли будет такой проект?
@Aleksey:
Я думаю полезен, т.к. англ. для многих является проблемой, так что могу пожелать успехов в Ваших начинаниях, а со своей стороны постараюсь написать/перевести еще пару статей посвященных jQuery…
Здравствуйте, у меня вопрос по примеру “Анимация для события hover #2″, как его изменить чтоб он просто в подсказке выводил не title и не href,а текст ссылки?
Просто пробую подставлять href, но тогда ссылка выводяться в подсказке.
@sociosam:
Замените:
var hoverText = $(this).attr("title");на следующий код:
спасибо за статью. нашел в ней именно то что искал. с jQuerry познакомился тока вчера, интересу нет предела. Не посоветуете где еще пожно по ней инфу почитать лучше на русском ?
Спасибо за то что не проигнорили мой вопрос, я очень признателен) но чего то не роботает :)
вот что получаеться у меня http://samiro.ru/up/jquery.jpg
вот код
@sociosam:
Действительно – поспешил я с ответом-то, не проверил, вот true способ:
$(document).ready(function(){ $(".menu2 a").hover(function() { var hoverText = $(this).html(); $(this).append("<em></em>"); $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); $(this).find("em").text(hoverText); }, function() { $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); $(this).find("em").remove(); }); });спасибо) теперь все отлично, для одной задумки не хватало.
Может вы еще в sIFR знаете как фильтр применить?)) извените за наглость)
Спасибо еще раз за помощь
@sociosam:
Пример использования приведен в статье Гламурная галерея картинок на CSS
Жаль, что анимация ограничена всего несколькими эффектами
$(".blockPage").click(function(){ $("#inactivePage").animate({opacity: 0.5}, 1) .animate({opacity: "show", width: $(document).width(), height: $(document).height()}, 1200); $("#popupDiv").animate({opacity: 1.0}, 1) .animate({opacity: "show", left: ($(window).width()-$("#popupDiv").width())/2, top: ($(window).height()-$("#popupDiv").height())/2}, 1200); return false; });Извините за спам =), недописал прошлое сообщение. Проблема в том, что анимация обоих дивов начинается одновременно, как можно сделать чтобы сначала выполнилась анимация на #inactivePage и после завершения #popupDiv?
И спасибо за статью!
[...] первой части были рассмотрены базовые принципы работы селекторов [...]
[...] http://anton.shevchuk.name/javascript/jquery-for-beginners/ [...]
Блин :) попался.
Вторая попытка…
<em></em> вместо <em></em>
А можно сделать чтобы панель задвигалась вправо (1пример)?
А где можно посмотреть css-файл : “см. CSS файл во вложении”