На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Работа с 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, теория





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.



Бесплатный перенос сайта и настройка доступа по https
Автоматическое копирование сайта и базы на яндекс диск


© upread.ru 2013-2023
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.