Это вводная статья, целью которой является объяснить общие принципы работы jQuery. Чтобы приступить к изучению, создайте страницу HTML, со следующим содержимым:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
Если хотите использовать собственную копию библиотеки, поменяйте значение атрибута src в теге <script> так, что бы он указывал на Вашу версию библиотеки jquery.js. Если jquery.js расположен в той же директории, что и Ваш HTML-файл, используйте этот код:
<script type="text/javascript" src="jquery.js"></script>Первая вещь, которую делают большинство Javascript программистов – это добавление подобного кода в их программу:
window.onload = function(){ alert("привет"); }Внутри которого располагается код, который должен выполняться сразу после загрузки страницы. Проблема в том, что этот код Javascript не выполнится пока все изображения не загрузятся (включая баннеры).
Для обхода этой проблемы в jQuery есть простое выражение, которое проверяет документ и ожидает, когда он будет готов к каким-либо действиям. Это выражение известно, как событие ready.
$(document).ready(function(){
// Здесь Ваш код
});
Внутри события ready добавим обработчик клика по ссылке:
$(document).ready(function(){
$("a").click(function(event){
alert("Спасибо за посещение!");
});
Сохраните HTML файл и перезагрузите Вашу тестовую страницу в браузере. Теперь, перед переходом по ссылке браузер покажет alert с сообщением.
Для события click и большинства других событий, Вы можете не допустить поведение по умолчанию, вызвав event.preventDefault() в обработчике события:
$(document).ready(function(){
$("a").click(function(event){
alert("Как Вы видите, ссылка больше не отправляет Вас на jquery.com");
event.preventDefault();
});
});
Ниже представлен пример того, как должен выглядеть HTML файл нашего примера. Обратите внимание, что здесь идет ссылка на Google’s CDN для загрузки библиотеки jQuery. И пока что скрипт расположен в <head>, но в будущем размещайте его в отдельном файле, а этот файл подключайте с помощью атрибута src тега <script>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
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="http://jquery.com/">jQuery</a>
</body>
</html>Важно: Все следующие примеры jQuery должны быть расположены внутри события event, для того чтобы они выполнялись, когда документ готов к работе. См. выше «Запуск кода по событию Document Ready».
Одна из стандартных задач – добавление (удаление) CSS класса.
Для начала, добавим некоторую информацию, касающуюся стиля, в <head> Вашего документа:
<style type="text/css">
a.test { font-weight: bold; }
</style>Теперь добавим вызов addClass в скрипт:
$("a").addClass("test");И все Ваши элементы стали «жирными».
Для удаления класса используйте removeClass
$("a").removeClass("test");Библиотека jQuery предоставляет различные удобные эффекты.
Например, попробуйте следующий код:
$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});Теперь, если Вы кликните по ссылке, то она медленно исчезнет.
Колбэк – это функция, которая передается в качестве аргумента другой функции и выполняется после того, как родительская функция завершила свое выполнение.
$.get('myhtmlpage.html', myCallBack);Неправильно:
$.get('myhtmlpage.html', myCallBack(param1, param2));В данном случае сначала будет выполнена функция myCallBack, а потом её результат передан функции $.get() в качестве параметра.
Правильно:
$.get('myhtmlpage.html', function(){
myCallBack(param1, param2);
});