Работа с jQuery: начало

Недавно один мой друг (привет, Анатолий!) попросил у меня ссылку на ресурс, на котором можно просто и быстро научиться jQuery. Немного подумав, я решил сам написать серию обучающих статей. На самом деле jQuery – это просто!

Итак, это базовое учебное пособие, призванное помочь вам начать работу с jQuery. Если у вас еще нет тестовой страницы, начните с создания следующей HTML-страницы:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Демо</title>
</head>
<body>
    <script src="jquery.js"></script>
    <script>
   // Здесь ваш код
    </script>
</body>
</html>

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Но я не рекомендую этот вариант. Файл небольшой, лучше имейте его у себя на сервере.

Запуск кода после загрузки документа

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

window.onload = function() {
    alert( "Привет, читатель upread.ru!" );
};

К сожалению, данный код начнет работу только после того, как будут загружены все элементы, включая изображения и рекламные баннеры. Иногда это и требуется (смотри заметку по jCarouselLite). А чтобы выполнить код, как только документ будет готов для работы с ним, в jQuery имеется функция ready().

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

Библиотека jQuery предоставляет свои методы и свойства через два свойства объекта window, называемые jQuery и $. $ - просто псевдоним для jQuery, и он часто используется, потому что быстрее записывается.

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

$(document).ready(function() {
    $( "a" ).click(function( event ) {
        alert( "Спасибо за ваш визит на сайт upread.ru!" );
    }); 
});

Сохраните файл и попробуйте кликнуть на ссылку. Вы увидите, что перед этим вам будет показано данное сообщение:

Стоит отметить, что для событий jQuery есть возможность отключить действие по умолчанию - event.preventDefault():

$(document).ready(function() {
    $("a").click(function( event ) {
        alert( "Вы хотели перейти по ссылке? Не, не получится." );
        event.preventDefault();
     });
});

Пример страницы

Скопируйте этот код и сохраните страничку:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <a href="http://upread.ru">Ссылка</a>
    <script src="jquery.js"></script>
    <script>
    $( document ).ready(function() {
        $( "a" ).click(function( event ) {
alert( "Вы хотели перейти по ссылке? Не, не получится." );
            event.preventDefault();
        });
    });
    </script>
</body>
</html>

Работа с CSS из jQuery Одна из самых распространенных задач, решаемых с помощью библиотеки jQuery – это работа с классами и элементами, изменение их свойств. Давайте попробуем на практике сделать это. Не забывайте заключать код в ready()!

Предположим, что у нас есть некий класс:

<style>
.test { 
font-style: italic;
}
</style>

Теперь добавим .addClass() в наш скрипт:

$("a").addClass( "test" );

Что делает эта строка? Теперь все ссылки на странице станут классом test, то есть станут курсивными. Чтобы удалить данный класс, просто надо выполнить следующий код:

$("a").removeClass( "test" );

Особые эффекты

В библиотеке jQuery есть множество уже реализованных функций. Я писал уже про анимации jQuery. Вот простой пример:

$("a").click(function( event ) {
    event.preventDefault();
    $( this ).hide( "slow" );
});

При щелчке на любую ссылку она медленно исчезнет.

Итого

Библиотека jQuery – это простая возможность работать со страницами сайта, выполнять разнообразные эффекты. Ну а если у вас что-то не получается, то вы всегда можете обратиться ко мне. Пишите, за небольшую плату я вам помогу решить практически любую проблему с JavaScript или jQvery.

Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

статьи IT, javascript, jquery, теория

Помогите сайту

Программирование up

Мои услуги