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

    jQuery Logo

    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: затем 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» первому элементу <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/

    Может кому пригодиться еще библиотека jQuery-PHP

    Оригинал статьи: jQuery для начинающих
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 83
    • +25
      Большое спасибо! В избранное
    • +4
      Ого! Вот это пост! До вечера дочитаю! {надеюсь...}

      Спасибо!
      • +1
        бляха муха когда сделаю кнопочку «версия для печати»
        или я гоню?
        • +1
          Надо надо, думаю если не сделают придётся самим делать (userJS/грисманки...)
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              Если бы он был все вопросы бы отпали
            • 0
              Микрохабр не вариант? :) Я так печатал себе статьи обычно

              m.habrahabr.ru/post/38208/
          • +1
            Очень здорово что есть люди, которые пишут такие статьи. В закладки однозначно!
            • –8
              копипаст и баян.
              • +2
                точно. причем на хабре неоднократно фигурировали сцылки на оригинал пост
                • +3
                  автор, пардон.
                  прогнал. беру свои слова обратно.

                  я думаю, твоя статья давно уже стала азбукой для русских жквери прогеров.
                • +5
                  может и копипаст, но ИМХО такие вещи надо время от времени и копипастить, и боянить
                • +2
                  Даже если и копипаст — все равно огромное спасибо. Так бы может никогда не добрался.
                  • +6
                    именно с этого начал работать с Jqery, спасибо…
                    а тем кто про копипасты пишет — посмотрите хоть автора этого топика, и собственно оригинал откуда)))
                    Ничего, что оригинал находится в личном блоге автора данного топика?
                    • +4
                      вот именно поэтому я и забрал свои слова обратно:)
                    • 0
                      Хороший и надежный старый друх !)
                      Полтора года назад познакомившись с ним, заинтересовался серьезным JS-программингом в целом.

                      Единственный, небольшой, минус jQ — относительно громоздкое ядро.
                    • 0
                      На картинках наглядно. По мне так информация всегда легче осваивается, если текст разбавлен есть понятными картинками размещенными по делу
                      • НЛО прилетело и опубликовало эту надпись здесь
                        • 0
                          Шикарно, спасибо!
                          • НЛО прилетело и опубликовало эту надпись здесь
                            • 0
                              В каком браузере?
                              Может, я неправ, но конфигурация компьютера (немного слабое железо) может влиять на скорость рендеринга?
                              Ничего личного, конечно.
                              • 0
                                О. Внимательнее присмотрелся: такое впечатление, что рывок у блока получается тогда, когда элемент H3 занимает положение padding-bottom предыдущего элемента P. У высота+паддинг равны 21 px, а padding-bottom предыдущего равен 20 px.
                                Разумеется, не претендую на правоту. Всего только версия.
                              • +1
                                Попробуйте demos.mootools.net/Accordion — у меня не дергается.
                                • +2
                                  Тут про Jquery разговор идет. Что за манера лесть со своим самоваром ;)
                                  У Jquery есть свое отличное решение jquery.bassistance.de/accordion/demo/
                              • 0
                                Наглядненько!
                                • +1
                                  Только недавно перечитывал ваш оригинальный пост. Огромное спасибо за этот небольшой, но весьма информативный туториал. Он мне очень сильно помог в изучении jQuery.
                                  • +2
                                    Очень рад что прочитать эту стать. Большущее спасибо автору. Всё наглядно, можно легко разобраться.
                                    • +1
                                      Добавил в избранное, но меня уже начинают бесить схемы типа «После нее вам будет все понятно», а смотришь а там тьма, можно заблудится…
                                      Я лично учился по статье из журнала RSDN jQuery – Javascript нового поколения, статья хоть и 2007 но все доступно и понятно…
                                      • –2
                                        Наглядность при изучении никогда не мешает. Особенно для адептов.
                                        Считаю, что схема и иллюстрации в данной статье — уместны.
                                        • 0
                                          К иллюстрациям я не имею претензий, а возможность посмотреть как оно работает вообще приветствую…
                                          По поводу схемы она большая а определяет частный случай использования, и не показывает и 10% способности фреймворка…
                                          Я выражаю свою точку зрения, а принимать ее или нет это уже судить вам…
                                      • +2
                                        а как же упомянуть о том, что это — перевод?
                                        и упомянуть ссылку с оригиналом

                                        нашел в гугле по «don't forget to include the Color Animations plugin» =)
                                        • 0
                                          о, ссылку вижу в конце.
                                          если она и была до моего коммента, то приношу свои извинения =)
                                        • 0
                                          Имхо, лучшая книга Jquery in Action (http://book.pdfchm.com/jquery-in-action-9751/)
                                          Так что после сей статьи, рекомендую ее :)
                                          • 0
                                            да и читается она очень просто…
                                            • 0
                                              а по мне она нудновата. а вот «Learning jQuery» мне очень даже понравилась.
                                            • +1
                                              Клевая статья! Жаль, что когда я учился такого не было… Учился по этой http://www.rsdn.ru/? article/inet/jQuery.xml и докам
                                              • 0
                                                Не понимаю чего можно учить в фреймворке. Не умеешь язык — знание фреймворка не спасет, умеешь — учить нечего, достаточно списка объектов/модулей с описанием методов/функций.

                                                Очень понравился подход к комментированию кода (который на картинках), наглядно и понятно.
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                  • 0
                                                    Большое спасибо! Для новичков как раз самое то :) Когда-то мне очень не хватало такой статьи…
                                                    • 0
                                                      За статью спасибо в любом случае, но как по мне — так лучше доков для обучения ничего нет.
                                                      • 0
                                                        Ребят, интересует такая вещь:
                                                        Есть таблица, в нее динамически подгружаются новые элементы.
                                                        Как на jQuery сделать, что если в таблице tr элементов больше 20ти, то удаляем лишние снизу.
                                                        Я два дня искал выход, и так и не нашел. В данный момент использую решение на JavaScripts, но хотелось бы красивее.

                                                        tableRows = parseInt(document.getElementById('qStats').rows.length);
                                                        if(tableRows > 20)
                                                        {
                                                        for(i=tableRows-20; i>2; i--)
                                                        {
                                                        $(«#stat tr: last»).remove();
                                                        }
                                                        }

                                                        qStats — это id таблицы. Подскажите, если кто знает.
                                                        • 0
                                                          var qs = $("#qStats);
                                                          while ( qs.rows.length > 20 )
                                                            $("tr:last", qs).remove();


                                                          наверное, так как-нить.
                                                          • +3
                                                            $(«tr: gt(20)»).remove();
                                                            • +1
                                                              парсер, парсер… должно выглядеть так:
                                                              $("tr:gt(5)").remove();
                                                              • 0
                                                                тьфу блин вместо 5, будет 20, в общем индекс после которого стирать все остальные строки будет нужно туда вписать — больше 20 строк, значит 20
                                                            • 0
                                                              прикольно.
                                                              спасибо, не знал =)
                                                          • 0
                                                            Картинки великолепны! Спасибо за статью.
                                                            • 0
                                                              Спасибо!
                                                              • 0
                                                                Это была последняя капля! Все! Начинаю изучать!
                                                                Автору большое спасибо!
                                                                • 0
                                                                  спасибо, давно хочу изучить jQuery.
                                                                  А на русском языке книг не подскажите, а то тут только англоязычные постили?
                                                                  • 0
                                                                    какая-то дерганая гармошка в примере получилась. или стили наездов контролируются?

                                                                    а вот галерею именно такую хотел давно прикрутить к одному портфолио
                                                                    • 0
                                                                      Удобненько, попробую где-нибудь применить.
                                                                      • 0
                                                                        Хм. Аж захотелось попробовать где-то применить эту jQuery. Молодец.
                                                                        • 0
                                                                          Спасибо за статейку. Еще много всего про сабж есть тут.
                                                                        • 0
                                                                          >именно от принципов CSS отталкивает селектор jQuery

                                                                          Вы забыли упомянуть то, что Jquery, помимо CSS отлично понимает Xpath.

                                                                          К примеру
                                                                          $("label[@for = 'field_name']")
                                                                          • 0
                                                                            Отличная статья.
                                                                            Особенно мне — я только вчера решил что раз все вокруг так много говорят об этом фремворке — надо его ботать.
                                                                            Но вот вопрос — есть ли где-то переведенный док по всем встроенным функциям библиотеки?
                                                                            Или исключительно прямиком к разработчикам ботать англоязычные доки?
                                                                          • 0
                                                                            Огромное спасибо за описание, давно хотел с этим разобраться но из-за низкого знания JavaScript нечего не получалось, а тут все очень докладно написано, а главное есть полно рабочих примеров. Еще раз спасибо за статью.
                                                                            • 0
                                                                              а может кто ответит — пробовал с ходу сделать выезжающее меню — т.е. есть кнопка, onmouseover снизу выезжает меню. так вот анимация имеет гемор (многие о нём знают) — если кнопка получила onmouseover а потом юзер повел мышку на меню — то меню сначала скроется, а потом опять показывается. stop() не особо помогает — меню забывает до какого размера «выростать»
                                                                              • 0
                                                                                Разделяйте ф-ции показа и скрытия меню. При показе очередного пункта меню проверяйте, есть ли открытые и тогда их сворачивайте. Ну и в случае, к примеру, клика по пункту меню. Во всех остальных случаях ф-ция скрытия пунктов меню просто не должна запускаться.
                                                                              • 0
                                                                                Отличный пост, будем изучать!
                                                                                • 0
                                                                                  Даешь версию для печати, да чтобы в ней можно было чекбоксами пометить комментарии которые печатать — ибо бывают весьма ценными.
                                                                                  • 0
                                                                                    Спасибо, сильно ускорило рабочий процесс.
                                                                                    • 0
                                                                                      Почему-то в русскоязычных статьях забывают написать о таком факте:

                                                                                      Вызов $(selector) всегда вернёт массив из отобранных элементов.

                                                                                      Соответственно, можно смело
                                                                                      1) писать код для выполнения действий над пустым множеством;
                                                                                      2) проверять наличие по .length

                                                                                      Магия jQuery во многом заключена именно в расширении получаемого массива методами $.fn.
                                                                                      • 0
                                                                                        Вообще, jQuery близок к реляционной алгебре, благодаря чему и настолько эффективен. :)
                                                                                      • 0
                                                                                        опаньки! наконец-то нашел грамотный фреймворк :)
                                                                                        • 0
                                                                                          Вот такой вопрос, может кто подскажет:

                                                                                          Есть у меня на странице некоторые элементы, а именно строки таблицы, да и вообще много чего, на которые наложены хуки на .hover, .click.
                                                                                          Но при обновлении контента через AJAX эти хуки перестают работать. хотя должны. как это лечить?
                                                                                          • 0
                                                                                            Хорошая мысль, чем заниматься на работе — изучать jQuery. Т.к. серьезными вещами заняться из-за постоянного дергания пока не получается, будем тратить время с умом.

                                                                                            Спасибо за ссылки. Я регулярно отсматривал www.webdesignerwall.com. Но прошло много времени и этот тутор пропустил.
                                                                                            • 0
                                                                                              Круто! Уже много наслышан про Jquery. Никак не мог начать разбираться.
                                                                                              Настало время…
                                                                                              Автору Спасибо!
                                                                                              • 0
                                                                                                примеры действительно для начинающих
                                                                                                попробовал применить «гармошку» и столкнулся с проблеммой
                                                                                                если я хочу вывести не просто

                                                                                                <p > текст </p>

                                                                                                а какие-то еще элементы внутри, например —

                                                                                                <p ><table ><tr><td>текст</td></tr></table></p>

                                                                                                все перестает работать… не подскажите как быть?
                                                                                                • 0
                                                                                                  Спасибо большой — ужасно рад найдя эту статью!
                                                                                                  • 0
                                                                                                    Хорошая статья! Спасибо!
                                                                                                    • 0
                                                                                                      Большое спасибо за статью.
                                                                                                      Но у меня возник вопрос. Возможно глупый, но объясните пожалуйста. Почему пока я не написал reutrn false в конце этой строки $(this).toggleClass(«active»); Слайдер не заработал.
                                                                                                      • 0
                                                                                                        спасибо, очень помогло.

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