Всем привет. Некоторое вступление к разделу JQuery. Создание раздела обусловлено резкой необходимостью, повышения юзабилити сайтов написанных на php, а так же простотой этой технологии и при этом огромного потенциала выполнения самых сложных задач по представлению контента сайта. Очевидно то, что вы едва познакомившись с этой библиотекой, уже сможете творить интересные и полезные вещи, за которые пользователи вашего ресурсы будут вам благодарны. Простота и лёгкость использования, библиотеки JQuery, в конечном результате и принесла ей такую популярность. Все движения, перемещения, изменения атрибутов объектов DOM, теперь стали необыкновенно просты, по сравнению с JavaScript. На основе этой библиотеки написаны множество плагинов на все случаи жизни. И они только множатся и усовершенствуются.
Первый вопрос — как подключить JQuery к сайту, для того чтоб можно было использовать эту библиотеку.
Скачать, последнюю версию JQuery, можно с официального сайта jquery.com.
На момент написания статьи это была версия jquery-1.7.2.min.js. При нажатии на ссылку откроется страница со скриптом, именно её и надо сохранить. Для этого выберите в меню вашего браузера пункт Файл -> Сохранить как и укажите директорию вашего сайта куда сохранить эту библиотеку JQuery. Пусть будет называться эта папка /js.
Совет: лучше не меняйте названия файла библиотеки JQuery. Официальная версия названия, поможет вам в дальнейшем ориентироваться с какой версией вы работаете. Но если вы, всё же, решили изменить название, не волнуйтесь, на работоспособность это ни как не повлияет.
И так, после того как вы скачали файл JQuery и разместили его в папке /js, на своём сайте, можно приступать к подключению.
Подключение JQuery выглядит так:
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
Размещаться эта строка должна между тегами head в любом месте, но перед файлом скриптов (о них мы поговорим ниже).
Размещение JQuery выглядит так:
<head>
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
</head>
Где должна размещаться ссылка, на странице и как она выглядит, при всех выше описанных условиях, мы разобрались. Теперь хочу пояснить, что бы эта ссылка была доступна на всём сайте, её нужно прописать в шапке сайта, её ещё называю header, т.е. в часть страницы, которая доступна на всех страницах сайта. Или же, для тех страниц на которых будет присутствовать код jquery. Но как бы там ни было, одно условие должно выполняться безоговорочно — это размещение ссылки на jquery, между тегов head.
Теперь определимся, где мы будем писать сам код JQuery.
Для этого создадим в той же директории /js, файл jq.js (/js/jq.js). И пропишем (подключим) на него ссылку, после подключённой библиотеки JQuery. Выглядит это примерно так:
<head>
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jq.js"></script>
</head>
В файле jq.js, мы станем писать код для выполнения на сайте. Первый скрипт jquery, мы напишем для проверки работоспособности всех наших подключений.
Первый скрипт JQuery.
Откроем файл jq.js и впишем туда следующий скрипт.
$(document).ready(function(){
});
Что он обозначает, как его прочитать? В синтаксис я вдаваться не стану, для этого есть мануалы по JQuery, скажу лишь, что весь код в большинстве своём, нужно писать в то пустое пространство, между фигурными скобками. Обусловлено это тем, что все манипуляции происходят с элементами HTML и прежде чем с ними начать работу, они должны появиться на странице, т.е. проще сказать, страница должна быть сначала загружена (сформирована браузером), а потом уже, можно приступать к обработке элементов.
В следующих уроках этот код в листингах не будет упоминаться (т.к. он всегда один и тот же), если не будет для этого каких то веских причин. Запомните, что все скрипты-обработчики, будут просто добавляться между этих фигурных скобок, в один и тот же файл. Если вами будет создан ещё один файл, то конечно наличие этих строк в нём — обязательно.
Далее мы впишем обработку тегов div (контейнеров), они станут менять цвет и вид курсора, при наведении на них курсора.
$(document).ready(function(){
$("div").bind("mouseover", function(){
$(this).css({"background-color":"#FAFFEA",cursor:"pointer"});
}).bind("mouseout", function(){
$(this).css("background-color", "");
});
});
Не спорю, понимания этого скрипта выходит за рамки первого урока и сложновато понять, если вообще возможно понять, что всё это значит и как работает. Но это всего лишь пример работы, демонстрация простоты и лёгкости исполнения JQuery. Какие-то пять строк, первая и последняя не меняются никогда, позволили изменить, малого того, цвет контейнеров div, на всём сайте, но они так же добавили интерактивность в страницу, а это лишь капля в море!
Для проверки работы скрипта, создайте страницу test.php в главной директории сайта. И напишите в ней код:
http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jq.js"></script>
</head>
<body>
<div>Контейнер 1</div>
<div>Контейнер 2</div>
<div>Контейнер 3</div>
</body>
</html>
Откройте страницу test.php в браузере и наведите курсор на слово контейнер 1, строка должна изменить цвет, как бы подсветиться.
Обратите внимание! Кодировка страницы должна быть utf-8. Отображение русского текста и работа многих плагинов jquery, рассчитана, именно на кодировку utf-8.
Если у вас есть проблемы с кодировкой, отображением русских букв, то почитайте урок Кодировка UTF-8.
Создадим подсветку строки таблицы при наведении на неё курсора.
Для этого нужно будет всего лишь изменить имя объекта DOM на другое. Вот этот кусочек кода $("div"), даёт команду собрать все объекты div на странице в набор тегов div и вернуть их для обработке, следующему за ним, скрипту. Из этого следует, что бы нам подсветить все строки таблицы, нужно лишь собрать набор тегов tr, которые и отвечают за формирование строк в таблице. Меняем смело div на tr в jq.js и прописываем таблицу в нашем test.php файле.
$(document).ready(function(){
$("tr").bind("mouseover", function(){
$(this).css({"background-color":"#FAFFEA",cursor:"pointer"});
}).bind("mouseout", function(){
$(this).css("background-color", "");
});
});
Файл test.php обновлённый.
http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jq.js"></script>
</head>
<body>
<div>Контейнер 1</div>
<div>Контейнер 2</div>
<div>Контейнер 3</div>
<table width="100%" border="1">
<tr>
<td>Контейнер 1</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Контейнер 2</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Контейнер 3</td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Теперь при наведении курсора на Контейнер 1 в первом случаи подсветки не будет, так как мы заменили тег собираемый в набор для обработки. Но за то, подсветка теперь работает в таблице. Можно совместить работу так, чтоб один скрипт подсвечивал разные теги. Просто через запятую добавьте тег, для сбора в набор. Примерно так:
$(document).ready(function(){
$("div, tr").bind("mouseover", function(){
$(this).css({"background-color":"#FAFFEA",cursor:"pointer"});
}).bind("mouseout", function(){
$(this).css("background-color", "");
});
});
Теперь и строки таблицы и теги div будут подсвечиваться на всей странице.
