Как Работает jQuery

Эта статья поможет Вам начать использовать jQuery.

jQuery: Основы

Примеры, основаны на тестовой HTML странице, показанной ниже:

Пример

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Демонстрация</title>
</head>
<body>
<a href="http://google.com/">Google</a>
<script src="jquery.js"></script>
<script>

// Ваш код идет здесь.

</script>
</body>
</html>

Попробуйте Сами »

Атрибут src в элементе <script> должен указывать на копию jQuery. Загрузите копию jQuery со страницы Загрузки jQuery и сохраните файл jquery.js в том же самом каталоге, где находится Ваш файл HTML.

Запуск Кода, когда Документ Готов

Чтобы гарантировать, что код запускается после того, как браузер загрузил документ, многие программисты JavaScript обертывают свой код в функцию onload:

window.onload = function() { alert( "добро пожаловать" ); }

К сожалению, код не работает, пока все изображения не будут загружены, включая рекламные баннеры. Чтобы выполнить код, как только документ будет готов к управлению, jQuery имеет оператор, известный как событие готовности:

$( document ).ready(function() { // Ваш код идет здесь. });

Например, в событии ready, можно добавить обработчик щелчка по ссылке:

Пример

$( document ).ready(function() {
    $( "a" ).click(function( event ) {
        alert( "Спасибо за посещение!" );
    });
});

Попробуйте Сами »

Щелчок по ссылке теперь должен сначала вывести на экран раскрывающееся предупреждение, затем продолжить поведение по умолчанию - навигацию к http://www.google.com.

Для click и большинство других событий, можно предотвратить поведение по умолчанию, вызывая event.preventDefault() обработчике события:

$( document ).ready(function() { $( "a" ).click(function( event ) { alert( "Как Вы можете теперь видеть, ссылка более не ведет Вас на www.google.com" ); event.preventDefault(); }); });

Полный Пример

Следующий пример иллюстрирует код обработки щелчка, обсуждаемый выше, встроенный непосредственно в HTML элемент <body>. Отметьте, что на практике обычно лучше поместить Ваш код в отдельный файл JS и загрузить его на странице с атрибутом src элемента <script>.

Пример

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Демонстрация</title>
</head>
<body>
    <a href="http://www.google.com/">Google</a>
    <script src="jquery.js"></script>
    <script>

    $( document ).ready(function() {
        $( "a" ).click(function( event ) {
            alert( "Эта ссылка больше не \
             переходит на www.google.com" );
            event.preventDefault();
        });
    });

    </script>
</body>
</html>

Попробуйте Сами »

Далее: Знакомство с JavaScript

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)