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

Аватара пользователя
SLITE
Сообщения: 203
Зарегистрирован: 01 янв 2010
    jquery-logo.gif

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

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

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

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

    <head>                                                               
      <script type="text/javascript" src="jquery.js"></script>
    </head>

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

Как получить элемент с помощью 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

Вернуться в «jQuery»