PHP
уроки
ПРОСТО самая лучшая обучалка PHP!
Студия LPHPRU
Уроки PHP
Контакты
Помощь
Меню
PHP - с чего начать?
Уроки PHP
Функции PHP
Массивы
Denwer
MySQL
Информация
Dreamweaver уроки
JQuery уроки
Календарь
Сентябрь (2023)
Пн
Вт
Ср
Чт
Пт
Сб
Вс
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Что нового?
Тест №2
Тест №1 для разработчиков
PHP 5.6 RC1
SQL. Как cкопировать данные одной колонки в другую, в той же таблице
GRUB изменить порядок загрузки OS в Linux
SSH - вход на сервер без ввода пароля
PhpMyAdmin - проблема с загрузкой большого файла на сервер
Комментарии
хочу изучать php программирования
не пойму, зачем проверять есть ли...
Мы подберем для Вас лучшего спец�...
В функции не указана проверка ра�...
vbnvb
TOP-5
Метод POST
(2946965 )
Привет, МИР!
(911531 )
Метод GET
(668119 )
Операторы
(606351 )
Firefox уже запущен, но не отвечает...
(354192 )
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