Введение в 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

Получилась этакая матрёшка. Главное не перепутать количество открывающий и закрывающих скобок (точки с запятой можно опустить, скрипт будет выполнятся и без них, они полезны для наглядности отделения разных частей скрипта).
Весь пример протестировать и посмотреть код можно вот здесь.

Продолжение следует…

Опубликовано 14.08.2013 в 13:48 · Автор Вебдизайнеру, сисадмину, вебмастеру · Ссылка
Рубрики: HTML, jQuery, JSON · Теги: , , , , , , ,