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

Ответить
Аватара пользователя
SLITE
Сообщения: 203
Зарегистрирован: 01.01.2010
  • jquery-logo.gif
    jQuery — это замечательный Javascript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение — лучше всего начинать с наглядных примеров
Как же все-таки работает jQuery?
Как получить элемент с помощью 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>
Выдвижная панель
  • Начнем с простенького примера — слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример(внешняя ссылка)
    030308-1530-jquery2.gif
    Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между «active» и «btn-slide»), а панелька с id=«panel» будет выдвигаться/прятаться. (класс «active» изменяет позицию фонового изображения, см. CSS файл во вложении).

    Код: Выделить всё

    $(document).ready(function(){
        $(".btn-slide").click(function(){
            $("#panel").slideToggle("slow");
            $(this).toggleClass("active");
        });
    });
    
Магические исчезновения
  • Этот пример покажет как можно красиво и легко убирать растворять элементы (см. внешняя ссылка):
    030308-1530-jquery3.gif
    Когда мы кликаем по картинке <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");
        });
    
    });
Источник habrahabr.ru

Ответить