Перед тем как начать хочу сказать, что на данную стать меня натолкнул вот этот :
Наталия полностью права, мой блог посвящён, в принципе, JQuery, и JQuery плагинам, но что это такое, и как эти плагины применять на сайтах я не писал ниразу. Дорогие читатели, простите меня:-) я исправлюсь, честно:-)
Наталия, спасибо Вам большое за такой комментарий! И хотелось бы отметить, что Наталья — начинающий блоггер (как и я:-)) и всем родителям советую почитать её блог Маминого малыша . Наталья, у Вас и Вашего блога большое будущее.
Ладно, не будем сильно отвлекаться от темы, давайте перейдём ближе к делу. Дам общее понятие что такое JQuery.
JQueryjQuery – это в первую очередь большая библиотека JavaScript скриптов, с помощью которой можно получить доступ к любому элементу так называемого DOM (объектная модель документа). Другими словами с помощью этого jQuery на сайте можно сделать что хочешь как хочешь и когда захочешь, в частности касается это анимации:-) В основном эту библиотеку используют для украшения сайта, которая уже давно заменила flash . Если не в далёком прошлом красивый сайт можно было сделать только при помощи флеш элементов, то в настоящее время всё это можно сделать с помощью jQuery.
Честно признаюсь не хочется долго объяснять именно значение этого слова, а хочется подробнее остановиться на jQuery плагинах, как их прикрепить к сайту. Но для начала давайте узнаем, что такое плагины.
jQuery плагиныjQuery плагины — это уже готовые скрипты плюс HTML и CSS, которые нужно просто скачать и прикрепить на свой ресурс. Слайдеры, галереи, всякие подсказки всплывающие, многоуровневые меню и т.д. Перечислять можно бесконечно. Как оказывается прикрепить уже готовый скрипт бывает не так уж и легко, тем более если никогда не сталкивался с этим.
Чтобы было понятнее я буду прикреплять плагин к странице на примере, потому что на примере всегда понятнее.
Перед тем как начать Вам нужно на сайт прикрепить саму библиотеку jQuery, тут ничего сложного просто между тегами и поставьте вот это:
Вот и всё, первый шаг сделали:-)
ПримерНапример, мне захотелось на свой сайт прикрепить вот такие интересные и красивые картинки с классной анимацией:
Как видите у меня есть три папки с картинками, стилями и с самим скриптом, а также три примера index.html . В данном случае будем использовать именно его.
Далее открываем первый пример, например в Опере, затем нам нужно посмотреть исходный код самой страницы, там же нажимаем правую кнопку мыши и выбираем Исходный код , и по его примеру прикрепляем галерею на свой сайт. В общем смотрим как сделано там и также делаем себе.
Говорю сразу, что все исходные коды могут быть разными, но принцип один и тот же. Я, например, всегда так делаю, смотрю исходный код в примере и так же делаю у себя.
Важные моменты в данном примере.Нужно прикрепить стили именно того плагина, который прикрепляете, в данном случае это делается так:
Эту строчку нужно ставить между тегами и и на той странице где будет сама галерея, если у Вас, например Вордпресс, нужно ставить в header.php .
Так же ещё нужно прикрепить и сам скрипт этой красивой анимации, опять же между тегами:
Ну а сейчас давайте посмотрим, что у меня получилось. Напоминаю, что я создал новую страницу и прикрепил туда галерею. Вот полюбуйтесь:
Обязательно пользуйтесь исходным кодом примера плагина, для того чтобы было легче прикрутить его на свой сайт. Исходный код вы можете посмотреть в моём примере, и сюда его выложу тоже, на всякий случай:-)
< !DOCTYPE html>
Вот в принципе и всё. Самое главное пробуйте сами изменять, вставлять, удалять и т. д. Испортили, скачали ещё раз и всё по новой пока не получится желаемый результат. Надеюсь, что я всё доступным языком Вам рассказал. Если Вам всё же будет что то не понятно обязательно спрашивайте в комментариях. До скорых встреч, друзья.
Последнее обновление: 1.11.2015
Что такое jQueryСовременное веб-программирование и создание веб-сайтов уже невозможно представить без использования языка JavaScript. Однако в настоящее время, все чаще используется не "голый" код javascript, а javascript-фреймворки и библиотеки. Одной из таких библиотек, причем наверное самой популярной на сегодняшний день, является jQuery. По некоторым оценкам не менее половины крупнейших сайтов в интернете используют эту библиотеку.
Хотя мы и можем назвать jQuery библиотекой, он на самом деле понятие "jQuery" объединяет целую экосистему библиотек, построенный вокруг базовой библиотеки: это и библиотека jquery.ui, предназначенная для создания визуальных интерфейсов, это и jqyery.mobile, используемая при разработке мобильных сайтов и др.
Какие преимущества несет нам использование jQuery?
Упрощение работы с кодом . jQuery предлагает простой элегантный синтаксис для манипулирования элементами на веб-странице.
Расширяемость . Весь код jQuery открыт для просмотра и изменения, и в случае, если что-то в библиотеке не устраивает, ее можно модифицировать. А также можно создавать плагины jQuery.
Кроссбраузерность . jQuery имеет поддержку большинства известных браузеров, в том числе таких. как IE 7,8. (Хотя в силу того, что браузеры IE 6-8 постепенно становятся достоянием истории, а также чтобы уменьшить размер библиотеки в последней версии была прекращена поддержка IE 6-8).
Чтобы начать работать с данной библиотекой, нам первым делом надо ее загрузить. Ее найти можно на официальном сайте разработчика https://jquery.com/download/ . На странице загрузок в самом можно найти несколько версий jQuery. На момент написания данной главы последней доступной версией является 2.0.3. Хотя версии немного отличаются друг от друга, но эти отличия, как правило, не столь существенны, и базовый стержень и общие принципы у большинства версий по сути одни и те же.
Библиотека представлена в двух вариантах - Compressed или Monified (минимизированная) и Uncompressed (обычный). Минимизированные версии предоставляют ту же функциональность, что и обычные, но отличаются тем, что не содержат всяких необязательных символов, наподобие пробелов, комментариев и т.д., и поэтому в своем названии имею суффикс min , например, jquery-1.10.1.min.js . Поскольку они производительнее за счет меньшего объема, их рекомендуется использовать в реальном производстве. В то же время, если вам захочется понять логику кода jQuery, то в этом случае можно обращаться к обычной версии библиотеки.
Библиотека jquery подключается также, как и другие файлы javascript. Например:
Мир jQuery
В данном случае я использовал минимизированную версию библиотеки jquery - jquery-1.10.1.min.js. Теперь создадим какую-нибудь простенькую веб-страничку с использованием jquery:
Мир jQuery Добро пожаловать в мир jQuery jQuery JavaScript $(function(){ $("#btn1").click(function(){ $(this).css("background-color", "red"); alert("Мир jQuery"); }); });
Данная веб-страница, с одной стороны, применяет код jquery, с другой стороны, также демонстрирует отличие от использования стандартного кода javascript.
У нас определены на странице две кнопки. У одной кнопки определен обработчик onclick в самой разметке кнопки: onclick="alert("Мир JavaScript"); " .
Другая же кнопка делает практически тоже самое, но только с jquery. Для этой кнопки определен id (id="btn1"), через который в функции jquery мы будет ею управлять.
В самом низу страницы мы определим функцию jquery:
$(function(){ $("#btn1").click(function(){ $(this).css("background-color", "red"); alert("Мир jQuery"); }); });
Выражение $(function(){}); - это и есть краткое определение функции jquery. Эту функцию принято помещать в конце документа, как в данном случае, перед закрывающем тегом body. Данная функция включает весь код на языке javascript, который будет выполняться при загрузке страницы.
Смысл использованного кода состоит в том, что мы получаем элемент кнопки в выражении $("#btn1") и затем вешаем на него обработчик нажатия. Фактически выражение $("#btn1").click будет аналогично использованию обработчика onclick в теле разметки кнопки. При этом нам не надо никак изменять разметку самой кнопки, что-то туда дописывать. Все делается в функции jquery.
Что в нашем случае она включает? Во-первых, мы устанавливаем цвет кнопки: $(this).css("background-color", "red"); . А дальше просто выводим сообщение на экран.
Использование сетей CDNВ предыдущем примере я подключил библиотеку jquery непосредственно с локального диска, однако нам необязательно загружать библиотеку и размещать на локальном диске рядом с прочими файлами. Вместо этого мы можем использовать сети CDN (Content Delivery Networks). В данном случае сама библиотека будет находится физически в какой-либо сети CDN, а мы можем указать на нее ссылку.
Например, подключим библиотеку jquery, находящуюся в jQuery CDN:
Мир jQuery
Необязательно подключать именно эту версию библиотеки, весь набор доступных версий библиотеки можно найти по адресу https://code.jquery.com/
Также мы можем использовать и другие сети CDN. Например:
Google CDN: предоставляется компанией Google. Все доступные версии можно найти по адресу https://developers.google.com/speed/libraries/devguide?hl=ru#jquery .
Microsoft CDN: предоставляется компанией Microsoft. Все доступные версии можно найти по адресу https://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0 .
Формат подключения будет следующим:
Yandex CDN: предоставляется российской компанией Yandex. Все доступные версии можно найти по адресу
jQuery – это JavaScript-библиотека, фокусирующаяся на взаимодействии JavaScript, HTML и CSS.
Что умеет jQuery
- Обращаться к любому элементу DOM (объектной модели документа) и не только обращаться, но и манипулировать ими.
- Работать с событиями.
- Легко осуществлять различные визуальные эффекты.
- Работать с AJAX (очень полезная технология, позволяющая общаться с сервером без перезагрузки страницы, но пока мы ее трогать не будем).
- Имеет огромное количество плагинов, предназначенных для создания элементов пользовательских интерфейсов.
Как это работает
Сначала надо скачать саму библиотеку на сайте разработчиков или , при необходимости разархивировать и перенести ее (библиотеку) в ту же папку, где лежат наши html-страницы (это необязательно, но адреса для всех последующих примеров будут написаны, исходя из такой структуры).
Теперь нам надо подключить jQuery к html-странице. Для этого, как вы помните, в html существует тег , который и отвечает за подключение внешних файлов скриптов (). Добавим этот тег в html-страницу (так же мы подключали страницу script.js с функциями js): * Обратите внимание на имя файла. Здесь используется библиотека jquery-1.2.6, но Вы можете скачать более свежую версию, а потому цифры у Вас могут отличаться.*
Итак, у нас в папке лежат html-страница, страница со стилями (style.css), страница с js-функциями (script.js) и (jquery-1.2.6.js). Давайте сделаем вот такой пример (пощелкайте по кнопкам):
Эффекты jQuery Эффект Show() Эффект SlideDown() Эффект Animate() Давайте посмотрим, как это сделано. На html-странице у нас должно быть три прямоугольника (div-ы) и три кнопки: Эффекты jQuery Эффект Show() Эффект SlideDown() Эффект Animate()Оформим внешний вид и сделаем прямоугольники невидимыми с помощью . Код style.css:
#kv1, #kv2, #kv3{ width:80px; height:100px; float:left; background:red; margin:5px; color:white; display:none; }
Теперь самое интересное, на странице script.js пишем код функций, которые будут срабатывать при нажатии на кнопки:
function addEffect1(){ $("#kv1:hidden").show(); } function addEffect2(){ $("#kv2:hidden").slideDown("slow"); } function addEffect3(){ $("#kv3:hidden").show().animate({ fontSize:"36px" } , 3000); }
Что же делают эти функции?
Функция addEffect1() видит $ ("#kv1:hidden") и понимает, что ей нужно найти элемент с id="kv1", обладающий свойством hidden (невидимый). Далее она видит .show() и понимает, что найденный элемент надо сделать видимым.
Функция addEffect2() видит $ (знак доллара) и понимает, что это jQuery, затем она видит ("#kv2:hidden") и понимает, что ей нужно найти элемент с id="kv2", обладающий свойством hidden (невидимый). Далее она видит .slideDown("slow") и понимает, что найденный элемент надо медленно ("slow") отобразить сверху-вниз (slideDown).
Функция addEffect3() видит $ (знак доллара) и понимает, что это jQuery, затем она видит ("#kv3:hidden") и понимает, что ей нужно найти элемент с id="kv3", обладающий свойством hidden (невидимый). Далее она видит .show() и понимает, что найденный элемент надо сделать видимым. Затем она видит .animate({fontSize:"36px"} , 3000) и понимает, что размер шрифта нужно за 3 секунды (3000) увеличить до 36 пикселей (fontSize:"36px")
Вот так собственно и работает jQuery. Посмотрите какие короткие у нас функции и представьте какими бы они были, если бы мы решили написать их на чистом javascript. Ну разве ли jQuery не прелесть? О том, как делать графические эффекты, анимацию, перетягивать и сортировать предметы и вообще работать с этой библиотекой и пойдет речь в последующих уроках.
В конце же этого урока хотелось бы поговорить об основных понятиях jQuery. Приблизительно синтаксис оператора jQuery можно представить следующим образом:
Где селектор - элемент или элементы, с которыми мы будем что-либо делать.
действие - что именно мы будем делать с выбранными элементами. Мы можем добавить какой-либо эффект, css-стиль, изменить html-код и т.д. Здесь же могут быть указаны какие-либо события.
свойства действия - если они предусмотрены действием.
На сегодня пожалуй все, в следующем уроке будем изучать селекторы.
— знают что я люблю jQuery. Когда-то я любил нативный JavaScript и писал все на нем, но потом понял что в этом нет особого смысла почти всегда.
Но обо всем по порядку.
Что такое jQuery?Это JavaScript-фреймворк. Ничего страшного в этом слове нет. Можете считать, что это набор полезных функций, которые позволяют удобно делать то, что обычно требуется делать при помощи JavaScript.
Первый довод за использование jQuery — кроссбраузерность. Реально, вы знаете сколько разных синтаксисов у JS? Туча! Чего стоят хотя бы способы работы с Ajax. Во всех браузерах работа эта организована по-разному. С jQuery все единообразно.
Второй довод , кстати, тоже касается Ajax. С jQuery использовать его становится очень просто. Достаточно написать одну строку кода. Вообще, многие задачи, которые решаются на JavaScript небольшими функциями на jQuery решаются одной строкой. А если мы говорим о визуальных эффектах, так там вообще.
В общем, аякс на jQuery сделан очень просто и понятно. Это две функции get() и post() для разных методов отправки данных соответственно.
Третий довод — прозиводительность. Я использую jQuery и никуда не хочу с него слезать. Существует множество других фреймворков, которые делают примерно то же самое. Но jQuery самый быстрый из них.
Четвертый довод — общедоступность и распространение. На данный момент jQuery используют Яндекс и Google. И брать ее можно с их серверов. Например, вот JavaScript-хостинг Яндекса . Для того, чтобы подключить jQuery на любую вашу страницу достаточно просто вставить строку:
Все. Теперь jQuery у вас подключена. Можно пользоваться.
Пятый довод — это наличие не большого, а просто огромного количества плагинов для jQuery. Хотите фотогалерею? Тыщи их! Хотите возможность делать диалоговые окна? Тултипы? Балуны? Экранные лупы? Клавиатуры? Пользовательские интерфейсы? Что? Что вам надо? Я уверен, jQuery это умеет — надо лишь найти плагин.
Что, я еще не убедил вас?
А как на счет большого сообщества (в том числе — русскоязычного) и внятнейшей документации с примерами ?
В общем, если мне нужно на сайте написать что-то большее чем alert — я использую jQuery. Конечно, не всегда оно нужно — надо головой соображать все-таки. Но попробовав раз, слезть реально трудно.
Спонсор этого поста — рекламное агенство Паровоз, которое предлагает купить рекламные стенды . Это будет вам интересно если вы из Нижнего Новгорода. Не забывайте, что стенды считаются одним из наиболее эффективных носителей для размещения рекламы.
Еще решил ради прикола зарегиться на блоговаре. Вот код подтверждения:. Посмотрим что из этого выйдет. Если вы тоже там — знайте — я выращиваю трафку.
Используя jQuery Вы сможете создавать скрипты намного быстрее и эффективнее.
Что такое jQuery?jQuery - это библиотека, которая значительно упрощает и ускоряет написание JavaScript кода.
Девиз jQuery "write less, do more" (пиши меньше, делай больше) отражает ее главное предназначение.
jQuery позволяет создавать анимацию, обработчики событий, значительно облегчает выбор элементов в DOM и создание AJAX запросов.
Данная библиотека работает со всеми браузерами (IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome ). Это значит, что Вам больше не нужно будет беспокоиться о кроссбраузерной совместимости JavaScript кода.
Для jQuery написано огромное количество плагинов, которые позволяют расширить ее возможности еще больше.
Пример использования jQuery$(document).ready(function(){ $(":button").click(function(){ $(":button").hide(); $("#wrap1").addClass("add"); $("#wrap1").animate({height:280},2000); $("#wrap1").animate({width:400},2000); $("#wrap1").animate({padding:20},2000,function(){ $("#text1").hide(2000,function(){$("#text2").show(2000);}); }); }); });
Быстрый просмотр
Добавление jQuery на страницыДля того, чтобы начать использовать jQuery необходимо:
Для тех кто по каким-либо причинам не может (или не хочет) скачивать jQuery предусмотрен альтернативный способ удаленного использования библиотеки предоставленный компанией Google.
Для того, чтобы использовать jQuery удаленно просто добавьте на страницу в секцию head следующий код:
Сделайте сами
Обратите внимание: при выполнении этого и следующих упражнений рекомендуем Вам выключить отладчики (такие как Firebug), которые могут выдавать подсказки. В ходе выполнения заданий Вы сами должны находить и исправлять ошибки в учебных целях.
Задание 1 на странице задан jQuery код, но он не работает потому, что к ней не подключен необходимый файл библиотеки jquery.js. Подключите jquery.js удаленно (воспользовавшись услугой Google), чтобы "починить" код.
Интернет на Андроиде
