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 для начинающих”

Юрий says:

2011-02-28 at 12:36

И классный дизайн у сайта: минималистично и глаз радует. +++

Reply
1. Александра says:
  
  2012-08-06 at 14:13
  
  Да, дизайн тоже радует! Класс!
  
  Reply

столкнулся с такой проблемой

var all = {"1148":"All American Hockey League ","1131":"American Hockey League","1146":"Central Hockey League ","1144":"East Coast Hockey League","1130":"National Hockey League","1147":"Southern Professional Hockey League "};
 for (id in all) {
     console.log(id+'-'+all[id]);
 }

в ff3.5 печатает правильно, а в chrome сначала сортирует, а потом выводит.
попробывал через jquery – тоже самое
$.each(all, function(id, title) {
console.log(id+’-‘+title);
});
Как заставить соблюдать порядок?

Dmitriy Barbul says:

2012-05-11 at 21:45

Порядок перечисления свойств не определен.

(http://javascript.ru/for..in)

Reply

Гость says:

2011-03-08 at 21:28

Ох, спасибище огромное за статью!
Для новичка просто шикарно!

Reply
Олег says:

2011-03-11 at 11:15

Спасибо огромное! Статья супер!

Reply
Евгений says:

2011-03-25 at 12:16

Здравствуйте! Пока не смог оценить Ваши уроки. Причина в том, что не могу скачать jquery.js
При попытке установки я получаю сообщение о том, что элемент “window” не известен.
В связи с этим у меня два вопроса
1. Как все же установить jquery?
2. В одной из директорий моего компьютера(ICQ Xtraz) я обнаружил файл jquery.gs. Можно ли им воспользоваться? Нужно ли для этого перенести его в директорию, где находится мой проект?

Reply
1. Александр says:
  
  2011-03-26 at 15:57
  
  Женя ну ты даёшь. Или ты притворяешься? Какая директория компьютера? Этот файл просто загружается на хостинг в папку js если она там имеется или в любую другую и подгружается как написано в статье.
  
  Reply
  1. Евгений says:
    
    2011-03-28 at 12:36
    
    Ага. Это я сообразил. Я думал, что нужно инсталлировать FrameWork и для этого нужен какой-то файл типа exe или setup.
    Теперь второй вопрос. У вас сказано, что файл CSS находится во вложении. Где это? Я не смог его найти.
Alex says:

2011-03-25 at 22:57

Статья просто великолепная. Очень помог разобраться.

Reply
Рафо says:

2011-03-27 at 19:02

Подскажите с вкладками на shopcms не работают :(

Reply
Aurochs says:

2011-03-31 at 12:37

Да, толково написано, спасибо. Хотя у начинающих пожалуй есть пара вопросов. Буду добивать их в англ мануалах наверное.
Например мне кажется в начале, вводной части надо было пояснить зачем и как используется $(this).

Reply
Николай says:

2011-04-05 at 12:01

Здравствуйте, Антон! Спасибо за хорошую вводную статью.
Возник следующий вопрос. Реализовывая “гармошку” не могу понять, как вы сделали, чтобы картинка указателя активного заголовка меняла свое направление. Судя по коду, картинка вызывается только 1 раз. В чем секрет?
Спасибо!

Reply
Aurochs says:

2011-04-07 at 22:33

Николай. Картинка меняется через css – в активной позиции в css класс .active получает background-position: bottom; ну или иным образом бекграунд прилегает к нижней а не к верх части

Reply
1. Николай says:
  
  2011-04-10 at 00:24
  
  Спасибо.
  
  Reply
Наташа says:

2011-05-02 at 12:58

Доброго дня! может я что-то не понимаю (что скорее всего), но не получается у меня сделать на 1 странице и слайдер и лайтбокс…

Reply
александр says:

2011-05-26 at 20:48

К счастью, CSS3 сейчас справляется с 99% операций jquery гораздо лучше и красивее, не нагружая так процессор. Да и код проще в разы:)))

Reply
1. Ains says:
  
  2011-06-13 at 11:44
  
  js не серверный а клиентский язык, нагружать сервер он не может. Только конечно если не использовать ajax query.
  
  Reply

Добрый день,
подскажите, пожалуйста, как к этому коду прикрутить “+” – при скрытом блоке и “-” – при ооткрытом блоке:

function facechange (objName) {
  if ( $(objName).css('display') == 'none' ) {
        $(objName).animate({height: 'show'}, 400);
  } else {
        $(objName).animate({height: 'hide'}, 200);
  }
}

Вызываю так:

<a href="#" onclick="facechange('#div1'); return false">+ Текст</a>
<div id="div1" style="display: none;">
Текст в скрытом слое <br>
</div>
<a href="#" onclick="facechange('#div2'); return false">+ Текст2</a>
<div id="div2" style="display: none;">
Текст2 в скрытом слое <br>
</div>

Vitalik says:

2011-06-21 at 17:22

Спасибо огромное, статьи супер! всё просто и понятно!!! добавил в закладки)

Reply
Colin says:

2011-06-24 at 10:23

Спасибки, помогло. Но один вопрос:

В первом примере кнопка “Slide-panel” двигается вместе с
самой панелью, а мне нужно, что-бы по нажатию на кнопку панель просто выезжала из неё. Заранее спасибо.

Reply
Nek. says:

2011-07-05 at 23:00

Огромное спасибо! Самая шикарная статья для новичков.

Reply
Узуми says:

2011-07-23 at 10:16

Большое спасибо, очень полезный ресурс. В избранном)

Reply
Иван says:

2011-07-26 at 10:36

Спасибо, большое! Есть в интернете настоящие мужики!

Reply
Pingback: Слайд панель с закладками в социальные сети в стиле mashable.com | SAP R/3 готовые решения – коллективный блог специалистов SAP
Денис says:

2011-07-27 at 15:15

А как сделать, чтобы у “гармошки” при нажатии на уже открытую вкладку она НЕ закрывалась?

Очевидно, лучше завести для неё новый класс или проверять через булеву переменную. Но с синтаксисом JS мало знаком, как реализовать не знаю. Подскажешь?

Reply
Pavel says:

2011-08-11 at 12:32

А как в Вашем слайдер добавить элементы управления? вперед назад?

Reply
Сергей says:

2011-08-15 at 11:12

Денис, надо забрать .sibling, а перед ним поставить точку с запятой

Reply
Alex says:

2011-08-26 at 06:50

как завтсвить это работать в версии jquery 1.6.2 ??

1
$('#id').animate({backgroundPosition: '100px 0px'},1000 );

Нет ни ошибок , не движения бекграунда. В более старых версиях jquery все работает хорошо.
Запрос на официальный сайт ничего не дал. В документации по этому поводу ничего нет. Вот и остается лишь использовать старые версии или использовать отдельный скриптик backgroundposition.js

Reply
woody says:

2011-09-16 at 12:04

Добрый день. Не даёт покоя следующий вопрос.
Например, есть . Далее, при определённом событии, скрипт изменяет параметр src для этого изображения на ‘src=’2.gif’. К данному изображению подключен плагин lightbox. Когда он срабатывает – в увеличенном изображении отображается по прежнему 1.gif. Я так понимаю, всё логично, т.к. в DOM с которым работает lightbox по прежнему для изображения id=’pic’ путь содержит ‘1.gif’.
Интересует вопрос, как всё же реализовать вывод нужного изображения через lightbox, путь к которому изменяется динамически.

В приведённом ниже примере, по клику изменяется путь к изображению, после чего инициализирую плагин lightbox(вариант не проходит).
показать чистый исходник в новом окнеСкрыть/показать номера строкпечать кода с сохранением подсветки
01 $(function() {
02
03 $(“.items img”).click(function() {
04 // calclulate large image’s URL based on the thumbnail URL (flickr specific)
05 var url = $(this).attr(“src”).replace(“_t”, “”);
06
07 // get handle to element that wraps the image and make it semitransparent
08 var wrap = $(“#image_wrap”).fadeTo(“medium”, 0.5);
09
10 // the large image from flickr
11 var img = new Image();
12
13 // call this function after it’s loaded
14 img.onload = function() {
15
16 // make wrapper fully visible
17 wrap.fadeTo(“fast”, 1);
18
19 // change the image
20 wrap.find(“img”).attr(“src”, url);
21
22 };
23
24 // begin loading the image from flickr
25 img.src = url;
26
27 // activate item
28 $(“.items img”).removeClass(“active”);
29 $(this).addClass(“active”);
30
31 //инициализируем lightbox
32 jQuery(“.light”).lightBox({
33 //overlayBgColor: ‘#FFF’,
34 overlayOpacity: 0.6,
35 show_info:true,
36 containerResizeSpeed: 350
37 //txtImage: ‘Изображение’,
38 //txtOf: ‘из’
39 });

Reply
Женя says:

2011-10-05 at 12:05

Мне не очень дизайн сайта. А информация очень хорошая. Спасибо.

Reply
Денис says:

2011-10-06 at 21:05

Пожалуйста помогите:
имею див в нём две ссылки, хочу чтобы при нажатии на ссылку менялся класс дива (на другой класс другие стили в CSS) – всё довольно таки просто, но класс не меняеться:

Тест-тест

$(document).ready(function(){
$(“.blog”).click(function(){
$(“#menu3”).toggleClass(“menu4”);
});

});

Блог
Портфолио

1
2
3
body {background-color:#999; margin: 0px; padding: 0px;}
#menu3 { background-color:#0C6;}
#menu4 {background-color:#FF3;}

Ничего не меняется ! почему ?

Reply
1. Irina says:
  
  2012-01-19 at 17:46
  
  Денис, toggleClass переключает значения атрибута class, если таковой есть у объекта. у вас y div есть атрибут id, а class, поэтому и переключать нечего.
  Должно быть что-то такое:
  ….
  а в стилях:
  .menu3 {background-color:#0C6;}
  .menu4 {background-color:#FF3;}
  скрипт тогда будет:
  $(document).ready(function(){
  $(“.blog”).click(function(){
  $(“.menu3″).toggleClass(“menu4″);
  });
  });
  
  Reply

Пожалуйста помогите:
имею див в нём две ссылки, хочу чтобы при нажатии на ссылку менялся класс дива (на другой класс другие стили в CSS) – всё довольно таки просто, но класс не меняеться:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тест-тест</title>
<script type="text/javascript" src="jquery.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
 
<script type="text/javascript">
$(document).ready(function(){
                                $(".blog").click(function(){
                                    $("#menu3").toggleClass("menu4");
                                });
     
     
});
</script>
 
 
 
<body>
<div id="menu3">
<a href="#" class="blog">Блог</a>
<a href="#" class="Portfolio">Портфолио</a>
</div>
<div id="content"></div>
</body>
</html>
 
[css]
body {background-color:#999; margin: 0px; padding: 0px;}
#menu3 { background-color:#0C6;}
#menu4 {background-color:#FF3;}
[/css]

Dice says:

2011-10-06 at 21:30

Спасибо братан за инфу! Это + русские доки по Jquery и никаких проблем с этим фреймворком, а то нигде нормального описания не найти было.

Reply
Yan says:

2011-11-07 at 12:03

Статья очень хорошая!

Reply
Elf says:

2011-11-08 at 12:50

Большое спасибо Автору!

Reply

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

пункт1 пункт2 пункт3 пункт4
подпункт1
подпункт2
подпункт2.1
подпункт2.2
подпункт3
подпунктN

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

Вот мой код сейчас:

<script type="text/javascript">
$(document).ready(function(){
    $("ul.sf-menu li>ul").hide();
    $("a span").mouseover(function(){
        $(this).parent().next().toggle(200);
return false;
    });
        $("ul.sf-menu li ul").mouseleave(function(){
         $("ul.sf-menu li ul").hide();
return false;
    });
});
</script>

Подскажите пожалуйста, как это слелать?

Avesha says:

2011-11-12 at 18:29

Уважаемый автор!

Как у Вас интересно реализованы иконки соц.закладок)) Расскажите, как также сделать и на своем сайте?)

Заранее благодарю.

Reply
Pingback: Библиотека jQuery | Сайт веб-мастера Александра Климова
Алексис says:

2011-12-11 at 17:45

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

У меня на сайте реализована разбивка текста с помощью jquery (jpagination) и в этом тексте у меня есть ссылка на другую страницу сайта (ссылка работает). Но я не могу реализовать возврат с другой страницы на исходный текст в каталоге. Ссылка, с которой должен быть возврат выгдядит таким образом

обратно к каталогу »

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

Помогите пожалуйста, желательно подробное объяснение.

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

Reply
Pingback: jQuery для начинающих // JavaScript « Вебтехнологии
Александр says:

2012-01-29 at 14:10

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

Reply
Oleg says:

2012-02-06 at 15:19

Спасибо

Reply
Евгений says:

2012-02-22 at 00:04

Блин, я нифига не понимаю как мне вообще это всё делать :( Даже первый пример не могу понять как сделать :( Люди добрые, подскажите!
Чтобы подключить Jquery нужно зайти к ним на официальный сайт http://jquery.com/ , выбрать либо Production (31KB, Minified and Gzipped), либо Development (229KB, Uncompressed Code) (а в чем разница между ними?) и нажать на Download, затем появится много, много текста, его скопировать, вставить в блокнот и сохранить с именем, например Jquery.js. Я правильно все понял? А то я вообще нуб полный :(

Reply
Евгений says:

2012-02-22 at 00:07

А дальше что? Дальше идет первый пример “Выдвижная панель” и что с ним делать, как эту выдвижную панель можно сделать? :((((
P.S. У меня в IE6 постоянно появляется сообщение про ActiveX как мне можно от него избавиться чтобы оно не появлялось вовсе?
Плиииз, введите в курс дела, а дальше я думаю что уже разберусь. Понять хотя бы как первый пример делается. :(

Reply
1. Евгений says:
  
  2012-04-05 at 14:46
  
  Поставь в первой или во второй строчке HTML файла строку
  
  Reply
2. Евгений says:
  
  2012-04-05 at 14:49
  
  Ответ на P.S.
  Поставь в первой или во второй строчке HTML файла строку
  
  1
  
  
  Reply
pikasso says:

2012-03-14 at 12:10

Здравствуйте подскажите интересный скрипт всплывающего окна с памятью за закрытие! нужнореализовать при заходе на сайт -вывод информации о событие! после закрытия чтоб это окно всплывало этому человеку через сутки.

Reply
1. LEGION says:
  
  2012-04-16 at 15:51
  
  Это вам надо копать в сторону куки, сессий и т.п., посмотрите плагин jQuery Session например. Сомневаюсь чтобы можно было найти уже готовое окно, удовлетворяющее вашим требованиям. Придется ручками прикручивать. =)
  
  Reply
Макс says:

2012-03-28 at 09:21

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

Reply
Алекс says:

2012-04-02 at 18:15

Подскажите, как сделать эту панельку, выдвижную (пример 1) снизу, справа. или вообще в любом месте

Reply
LEGION says:

2012-04-16 at 15:44

2 Макс, 2 Алекс: С помощью CSS. Задаете для всей панельки

1
2
3
4
position: absolute;
float: right;
right: 10px; /* отступ справа */
top: 10px; /* отступ сверху */

Готовый пример можете найти на моем сайте: http://aboutfilmz.ru/ панелька “Администрирование” в правом верхнем углу как раз так и сделана.
Автору статьи большое спасибо за публикацию. Примеры 2,4 и 6 как раз то что давно искал.

Reply
Vladimir says:

2012-05-30 at 13:06

Как сделать так, чтобы при клике на элементе с одним классом, элемент с другим классом менял свойство с hidden на visible. Я делаю так:

$(document).ready(function(){

$(“.btn-go”).click(function(){
$(“.box:visability”).addClass(‘visible’);
});
});

Reply
1. Anton Shevchuk says:
  
  2012-05-31 at 11:21
  
  http://api.jquery.com/visible-selector/
  
  Reply
2. Nowalon says:
  
  2012-07-19 at 21:41
  
  один из вариантов:
  $(‘.btn-go’).click(function(){
  $(‘.box’).css({‘visibility’:’visible’});
  });
  
  Reply
Pingback: Code | Pearltrees
Pingback: Разработка браузерного Пинг-Понга, часть 2. | DanmerBlog
Вася says:

2012-08-11 at 11:59

Здравствуйте. У меня два списка. При наведени на пункт первого списка показывается тотже по номеру пункт второго списка. В итоге получается куча одинакового кода. Не подскажите как сделать цикл из этого?

$(document).ready(function(){

$(“#slide-photo li:not(:first)”).hide();
$(“#slide-text li:first”).addClass(“active”);

$(“#slide-text li”).eq(0).mouseover(function(){
$(“#slide-photo li”).eq(0).show();
$(“#slide-photo li:not(:eq(0))”).hide();
$(“#slide-text li”).addClass(“active”);
$(this).siblings(“#slide-text li”).removeClass(“active”);
return false;
});

$(“#slide-text li”).eq(1).mouseover(function(){
$(“#slide-photo li”).eq(1).show();
$(“#slide-photo li:not(:eq(1))”).hide();
$(“#slide-text li”).addClass(“active”);
$(this).siblings(“#slide-text li”).removeClass(“active”);
return false;
});
$(“#slide-text li”).eq(2).mouseover(function(){
$(“#slide-photo li”).eq(2).show();
$(“#slide-photo li:not(:eq(2))”).hide();
$(“#slide-text li”).addClass(“active”);
$(this).siblings(“#slide-text li”).removeClass(“active”);
return false;

});

});

Reply
Станислав says:

2012-08-18 at 08:50

Отличная статья! Спасибо!

Reply
Александр says:

2012-08-21 at 20:45

Спасибо! Антон! Твоя статьи очень помогают в изучении и применении CSS и JavaStript!)))

Reply
Александр says:

2012-08-21 at 20:53

Антон! Подскажи, пожалуйста, как сделать так чтобы блоки в Анимация для события hover #1 были в вертикальном положении один под другим! Спасибо!

Reply