PHP уроки
ПРОСТО самая лучшая обучалка PHP!
  • Студия LPHPRU
  • Уроки PHP
  • Контакты
  • Помощь
Меню
  • PHP - с чего начать?
  • Уроки PHP
  • Функции PHP
  • Массивы
  • Denwer
  • MySQL
  • Информация
  • Dreamweaver уроки
  • JQuery уроки
  • Галерея
Календарь
Август (2020)
ПнВтСрЧтПтСбВс
     12
3456789
10111213141516
17181920212223
24252627282930
31      
В продаже

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

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

  • TOP-5
    • Метод POST (2938388)
    • Привет, МИР! (906178)
    • Метод GET (660679)
    • Операторы (601061)
    • Firefox уже запущен, но не отвечает... (344894)

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

Главная » JQuery уроки » 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.

  1. jQuery. Подробное руководство по продвинутому JavaScript
  2. Новый стиль программирования на JavaScript
Читать именно в том порядке как написано. Первая книга даёт исчерпывающие знания по технологии JQuery, а вторая удобна для ежедневного использования, как справочник.

SETTER © LPHP.RU
Администрация сайта
09.08.2012 10:30:13

Напишите свой комментарий
Ваше имя
Сообщение
Введите цифры с картинки:
 

Комментарии

Татьяна 10.03.2013 15:54:28
Спасибо большое за очень подробное описание скачивания и подключения, но что-то пока не все получается, буду дальше вникать
Optimus 23.03.2013 09:02:34
Спосибо огромное за хорошое описание, оч помогло, все получилось)))
алик 18.10.2013 00:36:44
jq.js и где этот файл находится??? нельзя подробней???
SETTER 18.10.2013 13:40:32
Читайте внимательней: Для этого создадим в той же директории /js, файл jq.js (/js/jq.js). И пропишем (подключим) на него ссылку, после подключённой библиотеки JQuery. Выглядит это примерно так:
  • Яндекс.Метрика Здесь находится аттестат нашего WM идентификатора 185571665285
  • "LPHPRU" © 2009-2020