В интернете я все чаще и чаще натыкаюсь на слово JQuery почти во всем, что так или иначе связано с дизайном сайтов, разработкой веб-приложений, AJAX-запросами и прочими интернет-фишками. Естественно, что мне захотелось разобраться, что же это за зверь такой и как его использовать в своих целях.
Итак, определение следующее:
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.То есть, говоря простыми словами, JQuery это библиотека на языке JavaScript, которая упрощает разработку веб-страничек (в том числе обработку событий, добавление анимации и AJAX-взаимодействий для ускорения web-разработки). Как говорят разработчики, JQuery должна полностью изменить способ, которым мы пишем JavaScript-код.
С чего же начать изучение этого чуда? Я решил, что лучше всего для этого подходит документация и примеры с официального сайта.
Скачиваем JQuery
С начала, разумеется, надо скачать JQuery-библиотеку. В разделе "Скачиваем JQuery" приведены ссылки на различные релизы. Лучше всего, конечно, скачать самый последний - JQuery 1.4.1. Скачиваем его и кладем в нужную папочку, у меня это "scripts":
wget http://code.jquery.com/jquery-1.4.jsОтлично, теперь библиотека JQuery установлена на вашем компьютере. Остается только использовать. Для этого хорошо бы понять, как она работает. На сайте JQuery этому посвящена отдельная страница.
Итак, попробуем следовать в точности их рекомендациям.
Создаем страничку со следующим кодом:
<!doctype html>В строке <script type="text/javascript" src="jqery-1.4.js"></script>" "jquery-1.4.js" необходимо заменить на путь к скачанному файлику jquery-1.4.js, в моем случае - это "script/jquery.js". Если у вас этот файлик лежит в той же директории, что и файл странички, который мы только что создали, то ничего менять не надо:)
<html>
<head>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
Запуск функций при загрузке документа:
Нам предлагают рассмотреть самый первый пример JQuery:
Когда JavaScript программисты хотят, чтоб какое-либо событие выполнилось после того, как страница загрузится, они обычно пользуются следующим способом:
window.onload=function(){alert('welcome!');}
Внутри фигурных скобок тот код, который исполнится при срабатывании события onload объекта window. Он начинает выполняться уже тогда, когда еще не загрузились все картинки. В JQuery есть такое понятие, как "событие готовность", которое выполняется, когда документ полностью готов к манипулированию им.
Добавим обработчик к событию нажатия на ссылку, ведущую на сайт JQuery:
для этого нам надо в элемент между тегами <script type="text/javascript"> и </script> вписать следующее:
$(document).ready(function(){Открываем страницу, кликаем по ссылке и видим, что перед переходом на другой сайт выдает сообщение "Спасибо за визит!".
$("a").click(function(event){
alert("Спасибо за визит!");
});
});
Словами это можно описать так:
Когда документ полностью загрузилсяИтак, в целом я получил кое-какое представление о том, как работает JQuery, что это такое и даже рассмотрел пример использования JQuery.
при нажатии на a
выдать сообщение
Постараюсь в дальнейших постах углубиться в эту область, ведь JQuery - это действительно отличный инструмент.
1 комментарий:
Отличная статья автору спасибо )
Отправить комментарий