Как работает jQuery
Основы jQuery:
Статья создана для того, чтобы помочь начинающим использовать jQuery.
Загрузить саму библиотеку можно здесь .
Для начала создадим тестовую HTML-страничку со следующим содержимым:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> </script> </head> <body> <a href="http://jquery.com/">jQuery</a> </body> </html> |
Измените значение атрибута src в теге
|
1 2 3 |
<script> |
так, что бы он указывал на Вашу копию библиотеки jquery.js. Если jquery.js расположен в той же директории, что и Ваш HTML-файл, то оставьте src = “jquery.js”
Внимание: Если страница подключается с помощью PHP функций include() или require(), убедитесь, что данный код расположен внутри
, а не внутри . Подключение скрипта jQuery внутри не будет работать.Запуск кода по событию Document Ready
Первая вещь, которую делают большинство Javascript программистов – это добавление подобного кода в их программу:
|
1 2 3 |
window.onload = function(){ alert("привет"); } |
Внутри которого располагается код, который должен выполняться сразу после загрузки страницы. Проблема в том, что этот код Javascript не выполнится пока все изображения не загрузятся (включая баннеры).
Для обхода этой проблемы в jQuery есть простое выражение, которое проверяет документ и ожидает, когда он будет готов к каким-либо действиям. Это выражение известно, как событие ready.
|
1 2 3 4 5 6 7 |
$(document).ready(function(){ // Здесь Ваш код }); |
Внутри события ready добавим обработчик клика по ссылке:
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function(){ <strong>$("a").click(function(event){ alert("Спасибо за посещение!"); });</strong> }); |
Сохраните HTML файл и перезагрузите Вашу тестовую страницу в браузере. Теперь, перед переходом по ссылке браузер покажет alert с сообщением.
Для события click и большинства других событий, вы можете не допустить поведение по умолчанию, вызвав event.preventDefault() в обработчике события:
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function(){ $("a").click(function(<strong>event</strong>){ alert("Как Вы видите, ссылка больше не отправляет Вас на jquery.com"); <strong>event.preventDefault();</strong> }); }); |
Завершенный пример
Ниже представлен пример того, как должен выглядеть HTML файл нашего примера. Обратите внимание, что здесь идет ссылка на Google’s CDN для загрузки библиотеки jQuery. И пока что скрипт расположен в
, но в будущем размещайте его в отдельном файле, а этот файл подключайте с помощью атрибута src тега|
1 2 3 |
<script> |
.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="<a title="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" href="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js</a>" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(event){ alert("Как видите, ссылка больше не отправляет Вас на jquery.com"); event.preventDefault(); }); }); </script> </head> <body> <a href="<a title="http://jquery.com/" href="http://jquery.com/">http://jquery.com/</a>">jQuery</a> </body> </html> |
Добавление и удаление CSS класса
Важно: Все следующие примеры jQuery должны быть расположены внутри события event, для того чтобы они выполнялись, когда документ готов к работе. См. выше “Запуск кода по событию Document Ready”.
Одна из стандартных задач – добавление (удаление) CSS класса.
Для начала, добавим некоторую информацию, касающуюся стиля, в
Вашего документа:|
1 2 3 4 5 |
<style type="text/css"> a.test { font-weight: bold; } </style> |
Теперь добавим вызов addClass в скрипт:
|
1 2 3 |
$("a").addClass("test"); |
И все Ваши элементы стали “жирными”.
Для удаления класса используйте removeClass
|
1 2 3 |
$("a").removeClass("test"); |
Специальные эффекты
Библиотека jQuery предоставляет различные удобные эффекты.
Например, попробуйте следующий код:
|
1 2 3 4 5 6 |
$("a").click(function(event){ event.preventDefault(); $(this).hide("slow"); }); |
Теперь, если вы кликните по ссылке, то она медленно исчезнет.
Колбэки и функции
Колбэк – это функция, которая передается в качестве аргумента другой функции и выполняется после того, как родительская функция завершила свое выполнение.
Колбэк без аргументов:
|
1 2 3 |
$.get('myhtmlpage.html', myCallBack); |
Колбэк с аргументами:
Неправильно:
|
1 2 3 |
$.get('myhtmlpage.html', myCallBack(param1, param2)); |
В данном случае сначала будет выполнена функция myCallBack, а потом её результат передан функции $.get() в качестве параметра.
Правильно:
|
1 2 3 4 5 |
$.get('myhtmlpage.html', function(){ myCallBack(param1, param2); }); |
По материалам статьи: Tutorials: How jQuery Works
Свежие комментарии