![]() |
Работа с 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 - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда. ![]() |
Мои услуги
|
© upread.ru 2013-2023 При перепечатке активная ссылка на сайт обязательна. |