PHP уроки
ПРОСТО самая лучшая обучалка PHP!
  • Студия LPHPRU
  • Уроки PHP
  • Контакты
  • Помощь
Меню
  • PHP - с чего начать?
  • Уроки PHP
  • Функции PHP
  • Массивы
  • Denwer
  • MySQL
  • Информация
  • Dreamweaver уроки
  • JQuery уроки
Календарь
Июнь (2023)
ПнВтСрЧтПтСбВс
   1234
567891011
12131415161718
19202122232425
2627282930  

  • Что нового?
    • Тест №2
    • Тест №1 для разработчиков
    • PHP 5.6 RC1
    • SQL. Как cкопировать данные одной колонки в другую, в той же таблице
    • GRUB изменить порядок загрузки OS в Linux
    • SSH - вход на сервер без ввода пароля
    • PhpMyAdmin - проблема с загрузкой большого файла на сервер

  • Комментарии
    • тут нечего не понятно
    • Может уже пора на WebStorm переходит�...
    • Здравствуйте. 10 лет пользуюсь др�...
    • Была такая проблема, решалась пе�...
    • Возможно с течением времени этот...

  • TOP-5
    • Метод POST (2946433 )
    • Привет, МИР! (911226 )
    • Метод GET (667805 )
    • Операторы (606044 )
    • Firefox уже запущен, но не отвечает... (353682 )

JQuery - урок первый. Как подключить и использовать jquery на своём сайте.

Главная» Array » JQuery - урок первый. Как подключить и использовать jquery на своём сайте.
PHP урок № 354
Как подключить JQuery к сайту.
Всем привет. Некоторое вступление к разделу 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 в главной директории сайта. И напишите в ней код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <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 обновлённый.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <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 будут подсвечиваться на всей странице.
Рекомендуемая литература для более глубокого изучения JQuery.
jQuery. Подробное руководство по продвинутому JavaScript
  • Новый стиль программирования на JavaScript
    • Читать именно в том порядке как написано. Первая книга даёт исчерпывающие знания по технологии JQuery, а вторая удобна для ежедневного использования, как справочник.
    SETTER © LPHP.RU
    Администрация сайта
    Array
    • lphp.ru © 2009-2023