jQuery для начинающих

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

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

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

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

&lt;head&gt;                                                               
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

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

Как получить элемент с помощью 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(){
    $(&quot;.btn-slide&quot;).click(function(){
        $(&quot;#panel&quot;).slideToggle(&quot;slow&quot;);
        $(this).toggleClass(&quot;active&quot;);
    });
});

Магические исчезновения

Этот пример покажет как можно красиво и легко ~~убирать~~ растворять элементы (см. пример):

Когда мы кликаем по картинке <img class=”delete”>, будет найден родительский элемент <div class=”pane”>, и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide:

$(document).ready(function(){
 
    $(&quot;.pane .delete&quot;).click(function(){
        $(this).parents(&quot;.pane&quot;).animate({ opacity: &quot;hide&quot; }, &quot;slow&quot;);
    });
 
});

Связанная анимация

Теперь пример посложнее, но он поможет Вам лучше понять 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(){
    $(&quot;.run&quot;).click(function(){
 
        $(&quot;#box&quot;).animate({opacity: &quot;0.1&quot;, left: &quot;+=400&quot;}, 1200)
        .animate({opacity: &quot;0.4&quot;, top: &quot;+=160&quot;, height: &quot;20&quot;, width: &quot;20&quot;}, &quot;slow&quot;)
        .animate({opacity: &quot;1&quot;, left: &quot;0&quot;, height: &quot;100&quot;, width: &quot;100&quot;}, &quot;slow&quot;)
        .animate({top: &quot;0&quot;}, &quot;fast&quot;)
        .slideUp()
        .slideDown(&quot;slow&quot;)
        return false;
    }); 
});

Гармошка #1

Пример реализации “гармошки”. (см. пример)

Теперь приступим к разбору полетов:
Первой строчкой мы добавляем класс “active” первому элементу <h3> внутри <div class=”accordion”> (класс”active” отвечает за позиционирования фонового рисунка – иконки со стрелочкой). Во второй строчке мы прячем все не первые <p> элементы внутри <div class=”accordion”>.
Когда происходит клик по заголовку <h3>, для следующего в нём элемента <p> будет применен эффект slideToggle, затем для всех остальных элементов <p> будет применен эффект slideUp. Следующие действие изменяет класс заголовка на “active”, затем ищем все остальные заголовки <h3> и убираем у них класс “active”

$(document).ready(function(){
    $(&quot;.accordion h3:first&quot;).addClass(&quot;active&quot;);
    $(&quot;.accordion p:not(:first)&quot;).hide();
 
    $(&quot;.accordion h3&quot;).click(function(){
 
        $(this).next(&quot;p&quot;).slideToggle(&quot;slow&quot;)
        .siblings(&quot;p:visible&quot;).slideUp(&quot;slow&quot;);
        $(this).toggleClass(&quot;active&quot;);
        $(this).siblings(&quot;h3&quot;).removeClass(&quot;active&quot;);
     });
  
 });

Гармошка #2

Этот пример схож с предыдущим, лишь отличается тем, что мы указываем открытую по умолчанию панельку. (см. пример)

В CSS у нас указано для всех элементов <p> display:none. Теперь нам необходимо открыть третью панель. Для этого мы можем написать следующее $(“.accordion2 p”).eq(2).show(), где eq обозначает равенство. Помните, что индексирование начинается с нуля:

$(document).ready(function(){
 
    $(&quot;.accordion2 h3&quot;).eq(2).addClass(&quot;active&quot;);
    $(&quot;.accordion2 p&quot;).eq(2).show();
 
    $(&quot;.accordion2 h3&quot;).click(function(){
        $(this).next(&quot;p&quot;).slideToggle(&quot;slow&quot;)
        .siblings(&quot;p:visible&quot;).slideUp(&quot;slow&quot;);
        $(this).toggleClass(&quot;active&quot;);
        $(this).siblings(&quot;h3&quot;).removeClass(&quot;active&quot;);
    });
 
});

Анимация для события hover #1

Данный пример поможет создать Вам очень красивую анимацию для события hover (надеюсь, Вы знаете что это?), (см. пример):

Когда Вы наводите мышкой на элемент меню (mouseover), происходит поиск следующего элемента <em>, и анимируется его прозрачность и расположение:

$(document).ready(function(){
    $(&quot;.menu a&quot;).hover(function() {
        $(this).next(&quot;em&quot;).animate({opacity: &quot;show&quot;, top: &quot;-75&quot;}, &quot;slow&quot;);
    }, function() {
        $(this).next(&quot;em&quot;).animate({opacity: &quot;hide&quot;, top: &quot;-85&quot;}, &quot;fast&quot;);
    });
});

Анимация для события hover #2

Данный пример чуть-чуть посложней предыдущего примера: для формирования подсказки используется атрибут linktitle (см. пример)

Первым делом добавим тэг <em> в каждый элемент <a>. Когда произойдет событие mouseover, мы возьмем текст из атрибута “thetitle” и сохраним его в переменной “hoverText”, затем этот текст будет вставлен в тэг <em>:

$(document).ready(function(){
 
    $(&quot;.menu2 a&quot;).append(&quot;&amp;lt;em&amp;gt;&amp;lt;/em&amp;gt;&quot;);
 
    $(&quot;.menu2 a&quot;).hover(function() {
        $(this).find(&quot;em&quot;).animate({opacity: &quot;show&quot;, top: &quot;-75&quot;}, &quot;slow&quot;);
        var hoverText = $(this).attr(&quot;title&quot;);
        $(this).find(&quot;em&quot;).text(hoverText);
    }, function() {
        $(this).find(&quot;em&quot;).animate({opacity: &quot;hide&quot;, top: &quot;-85&quot;}, &quot;fast&quot;);
    });
 
});

Кликабельные блоки

Этот пример демонстрирует как сделать кликабельным блок с текстом, а не только ссылку (см. пример):

Создадим список <ul> с классом class=”pane-list” и мы хотим сделать элементы <li> кликабельными. Для начала привяжемся к событию click для элемента “.pane-list li”; когда пользователь будет кликать по элементу списка, наша функция произведет поиск тэга <a> и сделает редирект на страницу указанную в атрибуте href.

$(document).ready(function(){
 
    $(&quot;.pane-list li&quot;).click(function(){
        window.location=$(this).find(&quot;a&quot;).attr(&quot;href&quot;); 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
    $(&quot;.message_list .message_body:gt(0)&quot;).hide();
 
    //hide message li after the 5th
    $(&quot;.message_list li:gt(4)&quot;).hide();
 
    //toggle message_body
    $(&quot;.message_head&quot;).click(function(){
        $(this).next(&quot;.message_body&quot;).slideToggle(500)
        return false;
    });
 
    //collapse all messages
    $(&quot;.collpase_all_message&quot;).click(function(){
        $(&quot;.message_body&quot;).slideUp(500)
        return false;
    });
 
    //show all messages
    $(&quot;.show_all_message&quot;).click(function(){
        $(this).hide()
        $(&quot;.show_recent_only&quot;).show()
        $(&quot;.message_list li:gt(4)&quot;).slideDown()
        return false;
    });
 
    //show recent messages only
    $(&quot;.show_recent_only&quot;).click(function(){
        $(this).hide()
        $(&quot;.show_all_message&quot;).show()
        $(&quot;.message_list li:gt(4)&quot;).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(){
 
    $(&quot;.pane:even&quot;).addClass(&quot;alt&quot;);
 
    $(&quot;.pane .btn-delete&quot;).click(function(){
        alert(&quot;This comment will be deleted!&quot;);
 
        $(this).parents(&quot;.pane&quot;).animate({ backgroundColor: &quot;#fbc7c7&quot; }, &quot;fast&quot;)
        .animate({ opacity: &quot;hide&quot; }, &quot;slow&quot;)
        return false;
    });
 
    $(&quot;.pane .btn-unapprove&quot;).click(function(){
        $(this).parents(&quot;.pane&quot;).animate({ backgroundColor: &quot;#fff568&quot; }, &quot;fast&quot;)
        .animate({ backgroundColor: &quot;#ffffff&quot; }, &quot;slow&quot;)
        .addClass(&quot;spam&quot;)
        return false;
    });
 
    $(&quot;.pane .btn-approve&quot;).click(function(){
        $(this).parents(&quot;.pane&quot;).animate({ backgroundColor: &quot;#dafda5&quot; }, &quot;fast&quot;)
        .animate({ backgroundColor: &quot;#ffffff&quot; }, &quot;slow&quot;)
        .removeClass(&quot;spam&quot;)
        return false;
    });
 
    $(&quot;.pane .btn-spam&quot;).click(function(){
        $(this).parents(&quot;.pane&quot;).animate({ backgroundColor: &quot;#fbc7c7&quot; }, &quot;fast&quot;)
        .animate({ opacity: &quot;hide&quot; }, &quot;slow&quot;)
        return false;
    });
});

Галерея изображений

Простейший пример реализации галереи, без перезагрузки страницы. (см. пример)

Для начала добавим тэг <em> в заголовки <h2>
По клику на изображения в <p class=thumbs> выполняем следующие действия:

сохраняем значение атрибута “href” в переменной “largePath”
сохраняем значение атрибута “title” в переменной “largeAlt”
заменяем в элементе <img id=”largeImg”> значение атрибута “scr” и “alt” значениями из переменных “largePath” и “largeAlt”
так же присваиваем элементу “h2 em” значение из “largeAlt”

$(document).ready(function(){
 
    $(&quot;h2&quot;).append('&lt;em&gt;&lt;/em&gt;')
 
    $(&quot;.thumbs a&quot;).click(function(){
 
        var largePath = $(this).attr(&quot;href&quot;);
        var largeAlt = $(this).attr(&quot;title&quot;);
 
        $(&quot;#largeImg&quot;).attr({ src: largePath, alt: largeAlt });
 
        $(&quot;h2 em&quot;).html(&quot; (&quot; + largeAlt + &quot;)&quot;); return false;
    });
  
 });

Стилизируем ссылки

Большинство нормальных браузеров легко понимают когда мы хотим добиться от них стилизации ссылок для различного типа файлов, для это цели можно использовать следующее CSS правило: a[href $=’.pdf’] { … }. Но как обычно IE6 отличается умом и сообразительностью, по этой причине будем ставить ему костыли используя jQuery. (см. пример)

Для начала добавим класс для каждой ссылки, в соответствии с типом файла.
Затем выберем все элементы <a> которые не содержат ссылки на “http://www.webdesignerwall.com” и не начинающиеся на “#” в “href”, затем добавим им класс “external” и устанавливаем target= “_blank”.

$(document).ready(function(){
 
    $(&quot;a[href$=pdf]&quot;).addClass(&quot;pdf&quot;);
 
    $(&quot;a[href$=zip]&quot;).addClass(&quot;zip&quot;);
 
    $(&quot;a[href$=psd]&quot;).addClass(&quot;psd&quot;);
 
    $(&quot;a:not([href*=http://www.webdesignerwall.com])&quot;).not(&quot;[href^=#]&quot;)
      .addClass(&quot;external&quot;)
      .attr({ target: &quot;_blank&quot; });
 
});

Так же Вы можете посмотреть все примеры или скачать 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/

Цикл статей

426 thoughts on “jQuery для начинающих”

Live says:

2010-02-15 at 11:48

подскажите, как сделать следующее:
у меня меню в виде списка, где у списка задан ид
нужно что бы при нахождении в данном разделе из меню, элементу списка присваивался определеный класс?

Reply
Denis says:

2010-02-15 at 22:28

Здравствуйте. У меня контакт форма с jquery валидацией. Если в форме что-то не заполнено,то при нажатии на сабмит выскакивает сообщение с ошибкой без перезагрузки страницы. Если при этом поле не заполнить и ещё раз нажать сабмит,то страница перезагружается и показывается уже сообщение об ошибке заданое в php. С чем может быть связана перезагрузка страницы при повторной ошибке? Если я не ошибаюсь, то для предотвращения перезагрузки добавляется return false в конце скрипта. В файле она есть. Спасибо!

Reply
1. 1allen says:
  
  2010-10-09 at 05:09
  
  вероятно, ошибка в js коде?
  
  Reply
clgs says:

2010-03-03 at 16:44

Подскажите как получить определенный по счету элемент. К приверу: знаю id списка ul, в ul х элементов li, как получить id z-того элемента li?

1
2
3
4
5
<ul id="qwe">
<li id="asd">...</li>
...
<li id="zxc">...</li>
</ul>

Reply
1. Anton Shevchuk says:
  
  2010-03-03 at 16:47
  
  1
  var id = $('#qwe li:eq(2)').attr('id');
  
  Reply
clgs says:

2010-03-03 at 16:57

Извините. А если не немного сложнее? Зная id=qwe, получить z-тый элемент li списка ul

1
2
3
4
5
6
<li id="qwe">
<ul>
<li id="asd">...</li>
...
<li id="zxc">...</li>
</li>

Reply
1. Котик says:
  
  2010-03-05 at 06:06
  
  z-тый это как понять?
  
  Reply

Определенный по счету элемент li. Абсолютно таже самая задача, но
только вложенность другая. Используется jquery-1.4.2.min. Мне нужно
получить id элемента li в дереве simpleTree с подгрузкой веток на
ajax. В нем при перемещении показывает позицию, а мне id элемента,
следующего или предыдущего.

var simpleTreeCollection;
$(document).ready(function(){
       simpleTreeCollection = $(".simpleTree").simpleTree({
               ...
               afterMove:function(destination, source, pos){
                       //destination - в какую папку
                       //source - что
                       //pos - позиция
                       var id=$(destination).attr("id");
                       alert("destination-"+id+" source-"+$(source).attr("id")+"
pos-"+pos+" "+$("#"+id+" li:eq("+pos+")").attr("id"));
               },
               ...
       });
});

sergey says:

2010-03-06 at 22:40

скажите, а если мы используем выдвижную панель, то в целом страница будет индексироваться? не хотелось бы терять возможность индексации по ключевым словам..

Reply
1. clgs says:
  
  2010-03-07 at 15:40
  
  Смотря как построена эта панель. Отключите в браузере JS и посмотрите будет ли выводится ссылки и будут ли они активны, если да то нечего беспокоится =)
  
  Reply
sergey says:

2010-03-07 at 19:20

спасибо автору за посты!
очень бы хотелось узнать технологию создания вот таких хеадеров:

http://kursksu.ru/

там наверно используется схожий механизм создания галереи, как описнао в статье? только как вот быть с радиокнопками?

Reply
1. beebop says:
  
  2010-12-02 at 10:39
  
  плагин slider какой-нить скачайте, благо их в избытке
  
  Reply
Sania says:

2010-03-16 at 12:37

Здравствуйте! Подскажите пожалуйста как реализовать следующее: имеется страничка (типа инет магазина) с некоторым количеством продуктов, при загрузке отображаются все позиции “All Products”. Всего есть три ссылки “Analyzer”, “Accessories”, “Reels”, “All Products”. Как сделать так чтобы при клике допустим на ссылку “Accessories” оставались позиции только из этой категории а остальные скрывались и соотвественно при нажатии на “All Products” вновь показывались все продукты.

Спасибо.

Reply
1. Anton Shevchuk says:
  
  2010-03-16 at 16:38
  
  Советую обратить внимание на плагин http://www.newmediacampaigns.com/page/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours, думаю подобная реализация вам и нужна…
  
  Reply
Sania says:

2010-03-21 at 09:47

Антон, спасибо большое, это то что я искал!

Reply
Nata says:

2010-04-24 at 21:08

Подскажите, как пользоваться функциями jQuery в прикладном файле myscript.js ? Я подключила myscript.js и jquery.js к html, а код в myscript полностью на классическом javascript.

Reply
1. Matskoff-Lion says:
  
  2010-05-09 at 21:55
  
  Ну все очень просто:
  1) Подключаете jQuery перед myscript
  2) Используете в myscript все, что нужно из jQuery
  
  И еще, было сказано, что файл во втором файле на чистом джава скрипте. Т.е. если я правильно понял – он уже написан и работает? Тогда чего вы хотите добиться?
  
  Reply
Северянин says:

2010-05-05 at 23:15

Выдвижная панель на локалхост и на сервере – нормально работает: по клику на ссылку скрипта вида http://site.ru/# выдвигается панель. Но стоит на сервере включить SEF, ссылка получается вот такая: http://site.ru/страница.html/#
в итоге панель не выдвигается, а страница просто поднимается вверх.
Что тут можно сделать?

Reply
1. Matskoff-Lion says:
  
  2010-05-09 at 22:08
  
  Радикальный метод – использовать в атрибуте href значение “javascript:void(0);”
  
  Reply

Подскажите пожалуйста ошибку, не работает простой скрипт.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    alert($("#testId").className);
});
</script>
<title>
Test
</title>
<style>
a:hover {
    background-color: red;
}
</style>
<body>
<a id="testId" href="#" class="testClass">Click me!</a>
</body>
</html>

При загрузке alert показывает undefined. Вообще не находит по ид элемент. Спасибо.

SaDSHEeP says:

2010-05-17 at 12:52

To Alex
ты забыл голову закрыть =D
после на следующей строке вставь в всё заработает)

Reply
Serg Pau says:

2010-06-03 at 02:37

А не подскажите, как решить такую задачу:
Берём за основу Гармошку #1. Только неактивные пункты должны не прятаться полностью, а отображаться в сокращённом варианте – первые две-три строки.

Reply
archik says:

2010-06-04 at 10:27

Подскажите плиз реально ли через jquery сделать эффект скролинга картинки во вложеном диве ? Например ведем мышью влево а картинка двигается вправо и наоборот ! То есть нужно чтобы вычислялись _x и _y координаты курсора (думаю через плагин hover). натолкните плиз на мысль (с jquery пока еще не знаком но думаю это вопрос пяти минут ))))

Reply
1. Anton Shevchuk says:
  
  2010-06-04 at 11:03
  
  Вот ссылочка на плагин: http://4coder.info/smart3d-jquery-plugin/
  
  P.S. Ваш комментарий я чутка подправил…
  
  Reply
Andre says:

2010-06-23 at 11:35

Здравствуйте !
Помогите плз

1
2
3
4
5
6
<style>
.MyClass{
width:10;//это значение
}
</style>
$('.MyClass').animate({width:20});

так можно изменить значение c 10 на 20, предположим. А как можно получить его из .MyClass ?

P.S. кстати респект Антон, я на Вашем сайте суть JQuery, уловил никуда больше не залезая )

Reply
Anton Shevchuk says:

2010-06-23 at 11:57

Не совсем уловил суть проблемы – если необходимо получить ширину элемента, то следует использовать функцию width:

1
var width = $('.MyClass').width();

Если же надо получить исходное значение – то лучший способ сохранить width до каких либо изменений.

Reply
1. Andre says:
  
  2010-06-23 at 12:56
  
  Спасибо ! Решили кучу проблем )
  
  Reply
Andre says:

2010-06-23 at 13:13

А кстати, а как же тогда получить позицию left,например ?
То, что Вы мне посоветовали :

1
alert( $('.MyClass').width());

работает, а выражения :

1
2
3
alert( $('.MyClass').left());
alert( $('.MyClass').background-color());
alert( $('.MyClass').position());

почему-то не верны, хотя записанны в моих CSS стилях 0_о..

Reply
1. Anton Shevchuk says:
  
  2010-06-23 at 15:07
  
  Нет таких функций, для определения позиции используй position; для получения CSS свойств функцию css
  
  Reply
Артур says:

2010-07-02 at 04:48

Я сохраняю первый пример на рабочий стол и он не работает, почему так?

Reply

Здравствуйте. Ваша статья просто супер! Доступно и понятно.
Хотел спросить по поводу связанной анимации.
Допустим так , жду на Run и анимация проходит и должен показывать уже текст.
Приведу Ваш код:

<script type="text/javascript">
$(document).ready(function(){
    $(".run").click(function(){
        $("#box").animate({opacity: "0.1", left: "+=300"}, 1200)
        .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
        .animate({opacity: "1", left: "0", height: "800", width: "800"}, "slow")
        .animate({top: "0"}, "fast")
        .slideUp()
        .slideDown("slow")
        return false;
    }); 
});
</script>

<a href="index.php" class="run">Главная</font> </a>
<div id="box">
блабла!
</div>

Здесь допустим главное меню. и в анимированном тексте будет написан “блабла!”
Далее захожу в другую ссылку

<a href="about.php" class="run">О себе</font> </a>
<div id="box">
ля-ля!
</div>

и тут будет в анианимированном тексте будет написан “ля-ля!”
как сделать?!

KuPbI4 says:

2010-07-05 at 11:43

или плохо я задал вопрос?

Reply
1. KuPbI4 says:
  
  2010-07-05 at 20:57
  
  Разобрался. =)

Pingback: Слайд панель с закладками в социальные сети в стиле mashable.com | Web-Sence - под влиянием интернета
Pingback: Источники JavaScript | Blog.1Q1A.info
Андрей says:

2010-07-15 at 15:50

нужна помощь, может кто подкинет идею как можна воспользоваться джквери так чтобы при клике на одну из рубрик базы вытягивались по айди категории рубрики аджаксно в то же время при клике на категорию аджаксно вытягивались записи к категории.

Reply

Гармошка, более лаконичный вариант:

     
$('#box p:eq(0)').show();
 
$('h2').click(function() {
    $('p:not(' + $('h2').index(this) + ')').slideUp('slow');
    $('p:eq(' + $('h2').index(this) + ')').slideToggle('slow');
}).hover(function() {
    $(this).toggleClass('active');
});

Северянин says:

2010-07-22 at 14:13

Добрый день! Не работает “Анимация для события hover #1” вместе с плугином
YOOtooltip (всплывающие подсказки). Если плугин выключить – анимация работает.
Как это можно исправить?

Reply
1. Виталий says:
  
  2010-07-31 at 14:43
  
  Попробуйте переименовать “#1”
  
  Reply
Виталий says:

2010-07-31 at 14:42

Благодарю!

Reply
Северянин says:

2010-07-31 at 17:02

дело в том что этот плугин тоже подгружает jquery.js и наверно они как-то конфликтуют при этом…
можно ли использовать код для “Анимация для события hover #1″ но чтобы сам скрипт jquery.js подгружался плугином YOOtooltip (Cms Joomla)

Reply
maks_programmist says:

2010-08-09 at 14:52

Благодарю за полезные статьи.Все просто и доходчиво.

Reply
Abrogen says:

2010-08-18 at 10:09

Как получить в переменную текст между тегами?

1
<div>My text</div>

Reply
1. Alexander Boridko says:
  
  2010-12-17 at 15:44
  
  1
  2
  var myText = $('div').text();
  var myHTML = $('div').html();
  
  но луче дать дивнику идентификатор или указать класс
  например:
  
  1
  <div class="demo-container">My text</div>
  
  тогда скрипт, для получения содержимого получится таким:
  
  1
  2
  var myText = $('div.demo-container').text();
  var myHTML = $('div.demo-container').html();
  
  Статьи по теме:
  http://api.jquery.com/html/
  http://api.jquery.com/text/
  
  Reply
Abrogen says:

2010-08-18 at 12:13

Хотя, я уже решил этот вопрос. Меня другой вопрос беспокоит. Как вставить текст в выделенный участок?

Reply
Алексей says:

2010-08-23 at 20:20

Если не секрет, то чьи работы вы использовали для оформления галереи изображений?
Уж больно понравились. Стиль кажется одинаковый?

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

Спасибо заранее.
За чётко изложенный материал кстати, тоже. Да и у сайта дизайн весьма приятный.

Reply

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

<script type="text/javascript">
  $(function(){
    $('.zoom1').hover(function(){
      $(this).children('img').stop()
            .animate({width:"190px",height:"190px",left:"-33px",top:"-20px"}, 500);
    },
        function(){
            $(this).children('img').stop()
        .animate({width:"90px",height:"90px",left:"0",top:"0"}, 500);
        });
  });
  </script>

Пример с этим кодом вот: http://webostrovok.ru/demo/jqueryzoom/zoom.html
Чтобы картинка увеличивалась как бы из центра задал отрицательные отступы, увеличивается вроде красиво, но когда курсор уводишь – картинка резко прыгает вправо и потом уменьшается, для маленьких картинок с маленьким отрицательным отступом это не очень страшно, но для больших получается совсем не красиво. И, если курсор с увеличенной картинки уводишь вправо или вниз – картинка начинает дёргаться.
Подскажите пожалуйста как можно реализовать чтоб картинка начинала уменьшаться без скачка вправо, как бы с того места где она сейчас увеличенная? И что может быть причиной дёргания картинки когда курсор уводишь вправо или вниз? Я что-то никак не могу разобраться.

Anton Shevchuk says:

2010-08-25 at 17:52

Попробуйте использовать метод stop с параметрами

1
$(this).children('img').stop(true,true)

Reply
1. Вячеслав says:
  
  2010-08-25 at 20:12
  
  К сожалению это не помогло, очень хочется во всей этой красоте хорошо разбираться, но пока сложновато.

Вячеслав says:

2010-08-25 at 23:59

Ничего у меня не получилось, пришлось убрать отступы, может когда нибудь решу эту задачу.

Reply
Nill says:

2010-09-30 at 23:47

Здравствуйте! Помогите решить проблему, а то никак не получается.
Сайт использует загрузку данных с помощью AJAX. Данные загружаются в .
Хотелось бы сделать чтобы высота автоматически регулировалась в зависимости от подгружаемого текста. Как это сделать. Спасибо.

Пока все выглядит так http://sunstudio.host-ed.net/index2.php
то есть сначала закрывается потом открывается. Но это не удобно.

Reply
Barmen says:

2010-10-19 at 17:17

Почему когда к странице подключаю посторонний скрипт, то jQuery перестаёт работать, а по отдельности всё отлично работает. В чем проблема, как решить???

Reply
Marina says:

2010-10-27 at 20:17

Здравствуйте!а как можно сделать так, чтобы в галерее при нажатии на большое изображение оно открывалось в новом окне еще больше(или в этом же, поверх)?только надо что бы все изображение так делали, а то у меня получается только первое(которое изначально большое). Заранее спасибо)

Reply
1. Anton Shevchuk says:
  
  2010-10-29 at 12:25
  
  Можно добавить ссылку на большем изображении и так же подменять у него href:
  
  1
  <p><a id="origImg" href="images/img1-orig.jpg"><img id="largeImg" src="images/img1-lg.jpg" alt="Large image" /></a></p>
  
  Остается придумать лишь каким образом сохранить путь к большему размеру, можно его конечно в дата атрибут засунуть согласно HTML5
  
  Reply

Добрый день, Антон!
Подскажите, плис, голову сломала, пытаясь понять как сделать следующее:
1. Выводится в цикле a href товара с каталога
2. По нажатию на наименование должно открыться модальное окно с подробным описанием и input кол-ва + кнопка “в корзину”.
3. По кнопке “В корзину” идет переход на эту же страницу, там в сессию добавится нужный товар с нужным количеством.
4. Окно Диаога с подробным описанием должно оставаться открытым, пока не нажмут close (крестик)

У меня не получается реализовать пункт 2 и 4.
Испольщую

$(function(){
      $("#dialog").dialog({
        autoOpen: false,
        modal: true  
      });
      $(".openD").click(function(){
        $("#dialog").dialog("open");
      });
      $(".closeD").click(function(){
        $("#dialog").dialog("close");
      });
    });

И все. дальше затык. Не понимаю, как в цикле она может работать…
Помогите мыслью-идеей. Туплю над этим уже 2-й день…
Спасибо заранее
Наталья

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
<script type="text/javascript">
$(function(){
      $("#dialog").dialog({
        autoOpen: false,
        modal: true   
      });
      $(".openD").click(function(){
        $("#dialog").dialog("open");
      });
      $(".closeD").click(function(){
        $("#dialog").dialog("close");
      });
    });
</script>
<?
$id = $_GET['param'];
for ($i=0; $i<7;$i++)
{
    if ($id==$i) $openD = "openD"; else $openD = "prostotak".$i;
    echo '<a class="'.$openD.'" href="dialogopen1.php?param='.$i.'">Открыть подробнее по товару с номером - '.$i.'</a><br>';
}
?>
<div id="dialog" title="Диалоговое окно">
<?
echo    '<form action="dialogopen1.php?lang='.$lang.'&page='.$page.'&param='.$param.'&all_art='.$all_art.'&get_poisk='.$poisk.'" method=post>';
echo    'Введите кол-во';
echo        '<input class="input" name="kolvo" value="" size="8" maxlength="10">';
echo        '<input type="hidden" name="id_tovar" value="'.$id_tovar.'">';
echo        '<input type="image" src="/images/inkorzina.gif" name="submit" align="middle">';
echo    '</form>';
?>
</div>

Anton Shevchuk says:

2010-11-03 at 17:21

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

Reply

Kira says:

2010-11-04 at 11:57

Антон, спасибо Вам большое за такую доходчивую статью!

Reply
Елена says:

2010-11-25 at 01:17

Здравствуйте.
Подскажите, пожалуйста, где можно прочесть о том, как делать циклические карусели?

Reply
lexx says:

2010-11-30 at 12:50

спасибо, реально понятная статья, хорошо обьясняете :)

Reply
kinder999 says:

2010-12-18 at 00:02

Всем привет.
Есть пункты меню
Пункт 1 | пункт 2 | Пункт 3

Как сделать так, что бы по наведению мышки на пункт 1 меню выезжала панель (как в примере “Выдвижная панель”) с элементами меню второго уровня для 1 пункта. Когда наводишь мышку на 2 пункт – та панель закрывалась, а открывалась панель 2 пункта.

Заранее спасибо…

Reply
Memet says:

2010-12-18 at 14:54

:)=-
Добрый день, подскажите пожалуйста, как переключить класс и сохранить его при перезагрузке страницы.
Дело в, что надо менять картинку, при смене направления сортировки. Как в примере гармошки1.

Reply
Memet says:

2010-12-18 at 14:56

:)=-

kinder999, используй вместо экшина click, экшин hover.

Reply
Alex says:

2010-12-18 at 17:14

Я новичок в jQuery и сейчас делаю только первые шаги, поэтому возможно мои вопросы
покажутся найвными, но для меня они очень важны.
Не могли бы вы обьяснить что нужно поменять что бы в примере “Выдвижная панель”
панель находилась бы в нижнем правом углу экрана и выдвигалась бы не сверху вниз а снизу
вверх, что для этого угла как бы и естественно.
Заранее благодарю.

Reply
1. Anton Shevchuk says:
  
  2010-12-21 at 20:22
  
  Думаю стоит начать с CSS, необходимо для панели прописать стиль вроде следующего:
  
  1
  2
  3
  bottom: 0;
  position: fixed;
  z-index: 2999;
  
  JS думаю останется без изменений
  
  Reply
Pingback: Gorchakoff.com » Blog Archive » Как работает jQuery

Здравствуйте.
Подскажите можно ли написать приведённый ниже код компактнее?

jQuery(document).ready(function() {
    if(jQuery("li.#widget1").hasClass("closed"))
        jQuery(".widget1image").addClass("addAppwidget1");
    if(jQuery("li.#widget2").hasClass("closed"))
        jQuery(".widget2image").addClass("addAppwidget2");
    if(jQuery("li.#widget3").hasClass("closed"))
//...
//... и т.д. по возрастающей вплоть до 30
//...
    if(jQuery("li.#widget30").hasClass("closed"))
        jQuery(".widget30image").addClass("addAppwidget30");
});

Код не проверял, но должен работать:

$('li[id^=widget]').each(function(){
    if ($(this).hasClass('closed')) {
        var index = $(this).attr('id').substr(7);
        $(".widget"+index+"image").addClass("addAppwidget"+index);
    }
})

Нет, не сработало.
Вот на всякий случай html разметка:

<ul id="column1" class="column">
    <li class="widget color-orange closed" id="widget1">...</li>
    <li class="widget color-orange" id="widget2">...</li>
    ...
    ...
</ul>
<ul id="column2" class="column">
    ...
    <li class="widget color-orange" id="widget15">...</li>
    ...
</ul>
<ul id="column3" class="column">
    ...
    ...
    <li class="widget color-orange closed" id="widget30">...</li>
</ul>

Я уже и так попробовал:

<script language="javascript">
$(document).ready(function() {
    $('ul.column li[id^=widget]').each(function(){
    if ($(this).hasClass('closed')) {
        var index = $(this).attr('id').substr(7);
        $(".widget"+index+"image").addClass("addAppwidget"+index);
    }
})
});
</script>

Вот так заработало:

<script language="javascript">
 
$(document).ready(function() {
     $('li[id^=widget]').each(function(){
    if ($(this).hasClass('closed')) {
        var id = $(this).attr('id');
        $("."+id+"image").addClass("addApp"+id);
    }
  })
});
 
</script>

Denys says:

2011-02-11 at 16:49

Здравствуйте, скажите пожалуйста, стиль active в примере с гармошкой имеет такой код приблизительно?
.active
{
list-style-image:url(loading.gif);
}

.active h3 {
background: url(‘zoom.png’);
padding: 3px 0 3px 9px;
margin: 0;
}

.active h3 IMG {
margin-bottom: -6px;
}

Или как? Спасибо

Reply
Denys says:

2011-02-11 at 17:00

Нашел цсс в штмл страничке, но вот беда, изображения которые переворачиваются при клике на h3 .Можно подробнее о использовании изображений как фоновых рисунков для примера с гармошкой!

Reply
Vlad says:

2011-02-17 at 19:18

Антон, отличная статья, большое спасибо тебе за нее.
Подскажи пожалуйста, использую упрощенную версию кода с движущимся квадратом. Код вот такого вида:

$(document).ready(function(){
$(“#sidebar ul a”).click(function(){
$(“#sidebar”).animate({opacity: “1”, left: “+=240”}, 1200)
});
});

Вопрос такой, если ставить, как в этой статье return false; то перехода по ссылке не происходит. А мне нужно чтобы происходил, но после полного выполнения скрипта, как это сделать? А то переходит, когда ему вздумается) Заранее большое спасибо за ответ.

Reply
Юрий says:

2011-02-28 at 12:34

Замечательная статья! Спасибо!
Также рекомендую видеокурс по jQuery, нашел на просторах инета:

1
<a href="http://www.info-dvd.ru/a/194018">http://www.info-dvd.ru/a/194018</a>

Творческих успехов Вам!

Reply