Введение в jQuery Начало
Мы уже не раз затрагивали рецепты использования jQuery, которая, сама по себе является, библиотекой Javascript.
Пора вернуться к истокам, в лучших традициях Голливудских приквелов, начать сначала.
Историю о том как Джон Резиг изобрёл jQuery Вы наверняка сможете прочитать в любой энциклопедии.
Мы же скажем лишь о том, что со времен первого издания этой библиотеки (релиза 2006-го года), jQuery стал невероятно популярным среди веб-разработчиков всех уровней подготовки и сайтов любого уровня сложности (достаточно сказать, что библиотека используется на таких сайтах как Wikipedia и WordPress).
Но перейдем к конкретным технической стороне вопроса.
Чтобы начать работать с jQuery , её необходимо подключить к нужной странице с будущем скриптом. Сделать это желательно, в «шапке» сайта, между тегами <head></head> с помощью тега <script>:
<html>
<head>
<title>Первый скрипт в jQuery</title>
<script src="http://путь_до_juery.js"></script>
<script>$(document).ready(function(){
/* здесь будет написана производственная - уникальная часть нашего скрипта */
});</script>
</head>
<body>
jQuery можно найти на официальном сайта, либо подключать напрямую с сайта разработчика (адреса по которым можно вставлять код прямо в Вашу страницу Вы найдёте на том же сайте)
Начинаем писать сам скрипт. Самый простой (и одновременно наглядный) пример: вывести всплывающее сообщение – диалог после загрузки страницы.
Собственно часть скрипта $(document).ready говорит браузеру о том, что он должен выполнить скрипт только после прорисовки (загрузки) всей HTML страницы.
Для вывода окна используем функцию javascript alert(). Тогда наш скрипт приобретет такой вид:
<script>$(document).ready(function(){
alert('Документ загрузился!');
});</script>
Отлично работает. Правда, этот же фокус мы могли изобразить и без подключения jQuery, одним alert(). Но это только начало. Начало jQuery.
Перейдем к основной части HTML страницы, то что идёт сразу после <body>. Здесь то и начинается самое важное и интересное с точки зрения перспектив использования jQuery. Используя библиотеку мы можем обращаться к любому блоку HTML, к любому тегу. Но чтобы конкретизировать, выделить конкретный блок (или HTML тег) задействованный в нашем будущем скрипте, приминим персонализацию блока с помощью параметра id:
<body>
<div>Обычный блок с текстом.</div>
<div id='start'>Нажмите здесь</div>
</body>
</html>
Итак, id = ‘start’ отвечает за срабатывание скрипта. Осталось модифицировать скрипт:
<script>
$(document).ready(function(){
$("div#start")
.click(
function()
{
alert('Вы нажали на блок с ID = START!');
}
);
}
);
</script>
Что здесь происходит? Строка у нас начинается (почти всегда) с символа $, далее идёт указание за DIV с нужным ID («div#start»); click фиксирует событие – нажатие, клик внутри блока START; теперь, в скобках мы пишем функцию которая срабатывает при нажатии на DIV. Эта функция обрамляется фигурными скобками. Сама функция состоит из одной простой строки (она всем известна и без jQuery) alert(‘Вы нажали на блок с ID = START!’); само событие click обрамляется обычными скобками и завершается точкой с запятой (также как и главная функция выполняемая при загрузки). Определение блока , как вы видите, соединяется с событием точкой: («div#start»).click
Получилась этакая матрёшка. Главное не перепутать количество открывающий и закрывающих скобок (точки с запятой можно опустить, скрипт будет выполнятся и без них, они полезны для наглядности отделения разных частей скрипта).
Весь пример протестировать и посмотреть код можно вот здесь.
Продолжение следует…
Рубрики: HTML, jQuery, JSON · Теги: alert, html, jquery, script, введение, начало, новичок, скрипт
