JQuery - начало работы.

Сегодня напишу о том как же собственно начать применять JQuery.

Для начала нужно его скачать, сделать это можно на официальном сайте. Как правило нужно скачать сжатую версию, она доступна по ссылке "minified" - тем самым вы экономите трафик с сайта. Качаем самый свежий релиз - на момент написания статьи это 1.6.2 (jquery-1.6.2.min.js). Смены версий бояться не стоит - как правило все новое поддерживает то, что было сделано в старых версиях.

После того как библиотека скачана, нужно ее сохранить в папке с вашим сайтом и прописать ее в разделе "head" страниц сайта. В моем случае пишу на примере cms joomla. Нам нужно будет прописать скрипт в шаблоне сайта, как правило это templates/index.php. Сделать это можно по-разному, упомяну 2 способа.

1. В html части пишем

<script type="text/javascript" src="/<?php echo $templateUrl; ?>js/jquery-1.6.2.min.js"></script>

2. В php части
 $document->addScript($this->baseurl.'/templates/'.$this->template.'/js/jquery-1.6.2.min.js');

Какой их них выбрать? Тот что вам удобнее, разницы между ними, кроме той что 2й способ можно комбинировать с условными операторами, что позволяет подключать библиотеку не на всех страницах. Впрочем немного модифицировав 1й метод можно добиться того же эффекта.

Итак, собственно JQuery подключен. Но сам по себе он еще ничего не решает, только является базой для многих полезных доработок, ну или для ручного написания кода под него. Приведу пример, чтобы не быть голословным:

1. Ранее в статье "Знакомство с JQuery" я упопинал о проблеме с мультиклассом в ie6. Собственно ее решение выглядело так

<script type="text/javascript">
     jQuery(document).ready(function($){
         $("#secondpage-menu li.active.item1 a").css({'background-position' : '0px -30px'});
         $("#secondpage-menu li.active.item2 a").css({'background-position' : '0px -90px'});     
         $("#secondpage-menu li.active.item3 a").css({'background-position' : '0px -150px'});
     });
</script>

Меню было сделано одной картинкой и у выделенного пункта менялся фон. Пояснять здесь практически нечего - теги "script" говорят браузеру что внутри код. Далее условие "jQuery(document).ready(function($)" добавляет функцию когда загружена DOM модель - т.е. гарантирует что скрипт не выполнится раньше загрузки изображения и меню будет выглядеть как мы того ожидали. Дальше идет проверка 3х пунктов меню - выполняется одна строка из 3х, так устроено меню joomla. C "#" указывается id элемента, через точку перечисляются классы. Функция "сss" добавляет стиль к элементу. Вот такое небольшое решение на JQuery для ie6. Собственно стоит ли поддерживать данный браузер каждый решает сам - в описанном случае это было требование заказчика. На своем сайте я не тестирую решение под ie6 - все таки браузер нужно обновлять, на мой взгляд.

Много решений на JQuery связано с изменением внешнего вида  элементов управления в формах. Я в частности использовал JQuery для стилизации списка "select" и элементов "checkbox" и "radiobutton". Об этом подробно написано здесь: Стилизация элементов формы.