Я хоть и не очень долго занимаюсь веб - программированием, но за этот период javascript меня порядком достал. На то есть несколько причин: во-первых – очень сложно написать средних размеров код, который бы работал во всех браузерах одинаково и нормально. Во-вторых – для решения относительно простых задач нужно писать слишком много кода (что непривычно для меня как программиста на php ).

Так вот, недавно я набрел на популярную библиотеку scriptaculus (https://script.aculo.us/). Вещи, которые можно сделать в несколько строк с помощью этой библиотеки меня поразили, и я начал активно ее применять везде, где только мог. Но чуть позже я уже столкнулся с другой библиотекой, которую считают еще лучшей, чем скриптакулус.

Я говорю про библиотеку, jQuery (или javascript Фреймворк как ее называют).
Официальный сайт библиотеки – jquery.com. После копания в эту сторону я начал чувствовать, что jquery де-факто является стандартом для написания javascript`ов.
Чтобы не быть голословным, в этом посте я приведу краткий обзор этой библиотеки, которая навсегда должна изменить ваше отношение к javascript и дать вам возможность делать такие вещи, которые раньше были доступны только профессионалам.

Javascript, в основном, применяется для манипуляции элементами страницы на стороне пользователя, без перезагрузки страницы. Это увеличивает интерактивность страницы и делает ее использование более удобным. Но прежде чем манипулировать объектами, нужно их как-то найти среди всей груды других объектов расположенных на странице.
В обычном javascript это делалось через задание id нужному элементу и последующему обращению к нему через document.getElementById и т.д. Более сложные обращения можно было сделать даже через document.forms и т.д. Короче путей достать какой-то элемент много и столько же решений. Это очень неудобно при использовании (всего не упомнить).

В jQuery позаботились об этой проблеме и предоставили возможность обращения к элементам с одной стороны, однотипными механизмами, а с другой – очень гибкими.
Например, для того, чтобы обратиться к элементу с id=”my_element” нужно выполнить следующий код:

    elem = $(‘#my_element’)

Если вы хотите выбрать все элементы у которых установлен класс “my_class”, то нужно выполнить такой код:

    Elems = $(‘.my_class’)

То есть в общих чертах обращение происходит так:

    $(‘здесь_путь_к_элементу(ам)’)

Путь можно задавать даже через xpath. (Я про него статью уже писал здесь)

Ок. Теперь нужно заметить еще одну деталь. Мы присвоили результат переменной elem (elems). Это стандартная привычка сохранения результата. Сохранили, чтобы потом можно было его прогнать через цикл или еще что-то такое сделать.

После того как я начал писать javascript с помощью jQuery я заметил, что таких сохранений стал применять гораздо меньше. А все потому, что в jQuery реализован один удобный механизм который называется цепочками, если я не ошибаюсь).
Суть этого механизма заключается в том, что все операции манипулирования элементом возвращают в качестве результат сам этот элемент.

Например, чтобы выполнить какое-то действие над всеми элементами выборки, можно использовать оператор each():

    $(‘.my_elem’).each(function(){
        // выполняем действие для каждого элемента (обращаться через this или $(this)
    })

В плане манипулирования элементами jQuery также демонстрирует небывалую легкость в управлении

Например, так можно сменить выбранный стиль у элемента:

    $(‘#some_element’).css(‘background-color’, ‘#FFFFFF’)

А так получить значение какого-то атрибута (например адреса ссылки):

    $(“#some_link”).attr(‘href’);

Если хотим добавить поле input внутрь какого-нибудь div`а:

    $(‘#some_div’).append(“<input type=’text’ name=’name1’ />”);

А потом можно очистить внутренности div`а:

    $(‘#some_div’).empty();

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

    $(‘#div’).hide().append(“<input type=’text’ name=’name1’ />”).show();

Этот кусок кода сперва прячет div, потом сует внутрь него input, а потом показывает div.
Короче, я думаю всем уже понятно что jQuery заметно упрощает некоторые штатные ситуации Пойдем дальше. А именно, обратимся к нештатным ситуациям. Редко когда можно увидеть какие-то анимированные действия на javascript реализованные на сайте. Может из-за сложности реализации некоторые даже не задумываются над такой возможностью? Так вот, в jQuery реализована и для этого дела поддержка. Причем, все действия выполняются одной функцией animate().

    animate(params, speed);

Эта функция переводит элемент из одного состояния в другое с заданной скоростью. Первый параметр характеризует конечное состояние в виде: { width:”200”, height:”100”, и т.д.
То есть то, какими должны стать свойства элемента в конце анимации. Второй параметр указывает на скорость перехода из одного состояния в другое.
На самом деле там есть еще два параметра, но их вы сами потом наверняка посмотрите.

Ну и наконец, AJAX. Да, в jQuery есть поддержка ajax, а точнее не только AJAX`а, но и AJAH, AHAH и AJAJ. Нет, это не смайлы, а названия форматов асинхронной передачи данных. Но AJAX, пожалуй, эта тема не для одного поста, и ее я рассмотрю все его проявления позже сквозь призму jquery

А пока что удачи и до встречи.

P.S.: Если прежде чем начать использовать jquery хотите убедиться в его мощи и простоте, то советую посетить проект ajaxrain.com. Там в поиске наберите jquery и увидите огромное кол-во примеров его применения.