Основы jQuery. Введение в jQuery

Наверняка, Вы слышали о прекрасной библиотеке Javascript под названием jQuery. Что же такое на самом деле jQuery?

Как облегчить жизнь веб-разработчика? С чего начать? jQuery делает написание Javascript интересным и более простым. С помощью этой библиотеки многие достаточно сложные аспекты Javascript можно легко внедрить в любые приложения.

Сегодняшний наш урок расскажет о том, как начать работу с jQuery и как написать свой первый скрипт.

Что же такое jQuery?

jQuery очень легкая библиотека Javascript (некоторые называют ее фреймворком), которая избавляет от головной боли при написании Javascript кода. У нее много очень мощных возможностей, как например: отслеживание DOM, добавление красивых эффектов и анимаций к элементам, супер простые Ajax техники и методы. На главной странице сайта jQuery наиболее точное, на мой взгляд, описание:

jQuery быстрая и лаконичная библиотека, которая упрощает обработку событий, анимацию и взаимодействие с Ajax для более быстрой веб разработки. jQuery разработан для того, чтобы изменить методы написания JavaScript кода.

Какие преимущества jQuery?

Давайте коротко пройдемся по некоторым преимуществам и свойствам данного фреймворка:

Существенно уменьшается количество кода (необходимого для работы скрипта) по сравнению с JavaScript, что в свою очередь означает меньше временных затрат и более читабельный код. Далее в статье будут рассмотрены некоторые примеры.

Намного проще понять код (в отличии от JavaScript). В нашем мире, чем скорее Вы закончите процесс программирования, тем больше времени сможете уделить другим целям.

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

Использование Ajax становится намного проще. Вам потребуется всего 5 строк кода (иногда меньше) для создания простого Ajax запроса.

Огромное количество плагинов, с помощью которых можно сделать практически все что угодно.

С jQuery весело:)

Как начать?

Первым делом Вам необходимо посетить главную страницу официального сайта jQuery и скачать наиболее свежую версию данного фреймворка. После загрузки необходимо закачать этот файл к себе на хостинг, и в шапке документа прописать ссылку на этот файл.

В качестве альтернативы, можно воспользоваться помощью великого Гугла и поставить ссылку на их сервер, где находятся всегда свежие версии любых фреймворков. Необходимую ссылку можно найти .

Готов ли документ?

Для выполнения нашего первого jQuery скрипта, нам необходимо поместить весь наш скрипт в функцию. Эта функция будет выполнена при полной готовности DOM (когда "документ будет готов" - дословный перевод с англ.). Заметьте, что это очень похоже на популярное событие ‘onload’, но не является тем же самым. Давайте взглянем на пример:

$(document).ready(function(){ //Code here });

Выше мы говорим jQuery выполнить любой код внутри функции, при полной готовности DOM.В этом есть свои преимущества, несмотря на то, что может быть многим не понятно. Прежде всего, используя данную технику, мы полностью разделяем Javascript от HTML. Во-вторых, нам нет необходимости ждать полной загрузки страницы, достаточно загрузки DOM.

Для ленивых кодеров, или для тех, у кого каждый символ на счету, можно еще сократить код выше:

$(function(){ //Code here });

Ваш первый скрипт jQuery

Мы уже знаем, как ссылаться на библиотеку. Также нам немного понятна функция document.ready. Теперь пришло время написать простейший скрипт.

Давайте сделаем его максимально простым. Для данного примера, давайте сделаем страницу с текстом и цитатой в конце. Мы хотим показывать цитату, только если пользователь нажмет на кнопку. Взгляните ниже на необходимый для этого код:

$(document).ready(function(){
var myQuote = $("#my_quote");
myQuote.hide();
$(".button").click(function(){
myQuote.show(500);
});
});

Давайте детально рассмотрим весь код.

Как говорилось выше, мы помещаем весь код к выполнению внутри функции $document.ready().

Мы присваеваем id нашей цитаты (my_quote) переменную myQuote. Теперь у нас есть доступ к цитате с id my_quote.

Вот и все. При нажатии на кнопку в течении 0.5 секунды будет показана цитата. Очень легко, не правда ли?

Продолжение следует....

Спасибо за внимание! Всего наилучшего!

05.03.17 1.2K Введение

JQuery HTML — это библиотека, предназначенная чтобы «писать меньше, а делать больше «. Это не язык программирования, а инструмент, используемый для того, чтобы упростить реализацию общих задач JavaScript .

JQuery имеет дополнительное преимущество — кроссбраузерную совместимость . Можете быть уверены, что ваш код будет интерпретироваться в любом современном браузере.

Сравнив написание простой программы «Hello, World! » с помощью JavaScript и jQuery , можно увидеть разницу между ними.

JavaScript

document.getElementById("demo").innerHTML = "Hello, World!";

JQuery

$("#demo").html("Hello, World!");

Этот короткий пример иллюстрирует, как с помощью jQuery можно получить тот же результат, что и с помощью стандартного JavaScript , но более кратко.

Цели

Данное руководство не предполагает наличие базовых познаний в jQuery , оно охватывает следующие темы:

• Как установить jQuery в веб-проекте;
• Определение важных концепций веб-разработки, таких как API , DOM и CDN ;
• Общие селекторы, события и эффекты jQuery ;
• Примеры для проверки концепций, изученных в рамках этой статьи.

Настройка jQuery

JQuery — это файл JavaScript , на который вы будете ссылаться в документе. Как подключить JQuery в HTML :

• Скачать локальную копию;
• Добавить ссылку на файл через сеть доставки контента (CDN ).

Примечание. Сеть доставки контента (CDN ) представляет собой систему из нескольких серверов, которые предоставляют пользователю веб-контент в зависимости от его географического положения. Когда вы добавляете ссылку на файл jQuery через CDN , он будет предоставлен пользователю быстрее и эффективнее, чем в случае его размещения на собственном сервере.

В наших примерах мы будем использовать ссылку на jQuery через CDN . Последнюю версию jQuery можно найти в Google . Если вместо этого вы хотите скачать библиотеку, можно получить копию jQuery на официальном сайте .

Создадим небольшой веб-проект. Он будет состоять из файла style.css , scripts.js и основного файла index.html .

Задайте основную HTML-разметку и сохраните ее в index.html .

Index.html

jQuery Demo

Index.html

jQuery Demo

Скрипт JavaScript (scripts.js ) должен подключаться в документе ниже библиотеки jQuery или он не будет работать.

Примечание. Если вы загрузили локальную копию jQuery, сохраните ее в папке js/ и подключите через ссылку js/jquery.min.js.

Библиотека jQuery добавлена в HTML , и у нас есть полный доступ к API jQuery .

Использование jQuery

jQuery используется для соединения с элементами HTML в браузере через DOM .

Объектная модель документа (DOM ) — это метод, с помощью которого JavaScript (и jQuery ) взаимодействуют с HTML в браузере. Чтобы увидеть, что собой представляет DOM , в браузере кликните правой кнопкой мыши на текущей веб-странице и выберите пункт «Просмотреть код «. В результате откроется панель «Инструментов для разработчиков «. HTML-код , который вы увидите в ней, это и есть DOM .

Каждый элемент HTML считается узлом DOM — объектом, к которому может обратиться JavaScript . Эти объекты имеют древовидную структуру, в которой элемент является ближайшим к корню, а каждый — ветвью дерева. JavaScript может добавлять, удалять и изменять любые из этих элементов.

Если вы снова кликните правой кнопкой мыши и выберете пункт «Просмотреть исходный код », то увидите необработанный HTML . Сначала вы можете путаться в понятиях DOM и исходный HTML-код , но это разные вещи. Исходный код страницы точно соответствует тому, что написано в HTML-файле . Он статичен и неизменен, на него не действует JavaScript . В свою очередь DOM — динамичен и может меняться.

Внешний слой DOM , который обертывает весь узел , является объектом документа. Чтобы использовать на странице jQuery , нужно убедиться, что документ «готов ».

Создайте в папке js/ файл scripts.js и добавьте в него следующий код:

js/scripts.js

Весь код jQuery , вставленный в HTML , будет обернут в указанный выше код. Он будет работать только после того, как DOM будет готов для выполнения кода JavaScript . Даже не смотря на то, что в некоторых случаях JavaScript не загружается, пока элементы не будут отображены, включение этого блока считается лучшей практикой.

Чтобы запустить скрипт «Hello, World !» и вывести текст в браузере с помощью jQuery , сначала создадим пустой элемент абзаца, к которому применен идентификатор demo .

Index.html

... ...

JQuery вызывается и обозначается знаком доллара ($) . Мы обращаемся к DOM с помощью jQuery , используя синтаксис CSS , и применяем действие с помощью method :

$("selector").method();

Так как идентификатор в CSS обозначается символом (#) , мы получаем доступ к идентификатору demo с помощью селектора #demo . html() — метод, который изменяет HTML-разметку внутри элемента.

Теперь мы поместим программу «Hello, World! » внутрь оболочки jQuery ready() . Добавьте эту строку в существующую функцию в файле scripts.js :

js/scripts.js

$(document).ready(function() { $("#demo").html("Hello, World!"); });

После сохранения изменений можно открыть в браузере файл index.html . Если все работает правильно, то вы увидите надпись «Hello, World! »

Кликните правой кнопкой мыши по надписи «Hello, World! » и выберите пункт «Просмотреть код «. Теперь в DOM отображается

Hello, World!

. Если вы просмотрите исходный код страницы, то увидите только , исходный HTML-код, который мы написали.

Селекторы

Селекторы — это то, с помощью чего мы указываем jQuery HTML , с какими элементами мы хотим работать. Вы можете просмотреть полный список селекторов jQuery в официальной документации.

Чтобы получить доступ к селектору, используйте символ $ , за которым следуют круглые скобки () .

$("селектор")

Строки с двойными кавычками являются предпочтительными (согласно руководству jQuery ). Хотя часто используются и строки с одиночными кавычками.

Ниже приведен краткий обзор часто используемых селекторов.

• $(«*») — подстановочный знак : выбирает каждый элемент на странице;
• $(this) — текущий : выбирает текущий элемент, управляемый в данный момент внутри функции;
• $(«p») — тег : выбирает все экземпляры тега

  ;

• $(«.example») — класс : выбирает все элементы, к которым применяется класс example ;
• $(«#example») — идентификатор : выбирает один экземпляр с уникальным идентификатором example ;
• $(«») — атрибут : выбирает все элементы, в атрибуте type которых задано значение text ;
• $(«p:first-of-type») — псевдоэлемент : выбирает первый элемент

  .

При подключении JQuery к HTML вы будете иметь дело с классами и идентификаторами. Классы используются, когда нужно выбрать несколько элементов, а идентификаторы — когда только один.

События jQuery

В примере «Hello, World! » код запускался, когда страница загружена и документ готов, поэтому в нем не требовалось вмешательство пользователя. В этом случае мы могли бы написать текст непосредственно в HTML , без jQuery . Но нужно будет использовать jQuery , если мы хотим, чтобы текст отображался на странице после клика мыши.

Вернитесь к файлу index.html и добавьте в него элемент . Мы будем использовать эту кнопку для отслеживания события клика.

index.html

... Click me

Мы используем метод click() для вызова функции, содержащей код «Hello, World! ».

js/scripts.js

$(document).ready(function() { $("#trigger").click(); });

Иидентификатор элемента — trigger , мы выбираем его с помощью $(«#trigger») . Добавив click() , мы отслеживаем событие клика. Далее мы вызываем функцию, которая содержит наш код внутри метода click() .

function() { $("#demo").html("Hello, World!"); }

Вот полный код JQuery HTML элемента.

js/scripts.js

$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); }); });

Сохраните файл scripts.js и обновите в браузере index.html . Теперь, когда вы нажимаете кнопку, появляется текст «Hello, World! «.

Событие — это любое взаимодействие пользователя с браузером с помощью мыши или клавиатуры. В примере, который мы только что создали, используется событие клика. В официальной документации jQuery можно найти полный список методов событий jQuery . Ниже приведен перечень часто используемых событий.

• click() — клик : происходит при одиночном клике мыши;
• hover() — наведение курсора : происходит при наведении указателя мыши на элемент;
• submit() — отправка : происходит при отправке данных формы;
• scroll() — прокрутка : происходит при прокрутке страницы или элемента;
• keydown() — нажатие клавиши : происходит при нажатии на клавишу на клавиатуре.

Чтобы вывести элементы с помощью анимации или убрать их, когда пользователь прокручивает страницу, используется метод scroll() .

Чтобы выйти из меню с помощью клавиши ESC , используется метод keydown() . Чтобы создать выпадающее меню или с помощью JQuery добавить HTML в div , используется метод click() .

Эффекты jQuery

Эффекты jQuery позволяют добавлять анимацию и образом управлять элементами на странице.

В следующем примере мы создадим всплывающее и скрывающееся окно. Мы могли бы использовать два идентификатора — один для открытия окна, а второй для его закрытия, но применим класс для открытия и закрытия окна с помощью той же функции.

Удалите существующие теги и

Из файла index.html и добавьте следующий код:

index.html

Open Close

В файле style.css мы будем использовать минимальное количество кода CSS , чтобы скрыть overlay с помощью display: none и расположить его по центру экрана.

css/style.css

Overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray; }

В файле scripts.js мы используем метод toggle() , который будет переключать значения свойства CSS display с none на block и наоборот, скрывая и выводя окно при нажатии мыши.

js/scripts.js

$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); }); });

После подключения JQuery к HTML обновите файл index.html . Теперь можно переключать видимость всплывающего окна, нажимая клавишу мыши. Вы можете заменить метод toggle() на fadeToggle() или slideToggle() , чтобы задать другие встроенные эффекты jQuery .

Ниже приведен перечень часто используемых эффектов:

• toggle() — переключение : переключает видимость элемента или элементов. show() и hide() — задают эффекты одного типа;
• fadeToggle() — переключение исчезновения : переключает видимость и задает анимацию непрозрачности элемента или элементов. fadeIn() и fadeOut () — это связанные односторонние эффекты;
• slideToggle() — переключает видимость элемента или элементов с эффектом слайд-шоу. slideDown() и slideUp() — задают эффекты одного типа;
• animate() — выполняет пользовательские эффекты анимации для свойства CSS элемента .

Мы используем события jQuery для отслеживания взаимодействий пользователя, таких как нажатия клавиш на клавиатуре, а jQuery-эффекты мы используем для дальнейшей обработки элементов, когда это взаимодействие произошло.

Заключение

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

Данная публикация представляет собой перевод статьи «An Introduction to jQuery » , подготовленной дружной командой проекта

Хорошо Плохо

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

Это практическое руководство. Мы потратим немного времени на описание понятий, а затем у вас будет возможность поработать с упражнением, связанным с этим понятием. Некоторые из упражнений могут показаться примитивными, другие, наоборот, совершенно пугающими. В любом случае здесь нет оценок, цель проста - чтобы вы комфортно прошли свой путь сквозь проблемы, которые обычно решаются с помощью jQuery. Пример решения всех упражнений включён в образец кода.

Получение кода

Код, который мы будем использовать в этой книге, расположен в хранилище GitHub . Вы можете скачать файл.zip или.tar, затем распаковать его, чтобы использовать на своём сервере. Если вы git-маньяк, то всегда можете клонировать или форкнуть хранилище.

Программы

Для выполнения большинства уроков вам потребуются следующие инструменты:

• Браузер Firefox
• Расширение Firebug для Firefox
• Простой текстовый редактор
• Для Ajax: локальный сервер (такой как MAMP или WAMP) или клиент FTP или SSH для доступа к удалённому серверу.

Добавление JavaScript на страницу

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

Ради производительности, JavaScript должен быть добавлен как можно ближе к концу вашего HTML, насколько это возможно. Несколько файлов JavaScript должны быть объединены на рабочем сайте.

Пример 1.1. Встроенный JavaScript

console.log("привет");

Пример 1.2. Внешний JavaScript

Отладка JavaScript

Инструмент отладки имеет важное значение в JavaScript-разработке. Для Firefox популярным отладчиком является расширение Firebug; Safari и Chrome предоставляют встроенные консоли.

Каждая консоль предлагает:

• одно- и многострочные редакторы для экспериментов с JavaScript;
• инспектор для просмотра генерируемого исходного кода страницы;
• Вкладки Network и Resources для изучения сетевых запросов.

Когда вы пишете код на JavaScript, то можете использовать следующие методы для отправки сообщений в консоль:

• console.log() для общих сообщений;
• console.dir() для объектов браузера;
• console.warn() для предупреждений;
• console.error() для ошибок.

Также доступны и другие методы консоли, хотя они могут отличаться в разных браузерах. Кроме того консоли предоставляют возможность установки контрольных точек и слежения за кодом в целях отладки.

Упражнения

Большинство глав в этой книге содержит одно или несколько упражнений. С некоторыми упражнениями вы сможете работать непосредственно в Firebug, для других вы должны будете включить скрипты после jQuery, как указано в отдельных упражнениях.

В некоторых случаях вам потребуется обращение к документации jQuery для завершения упражнения, поскольку не вся соответствующая информация представлена в книге. Библиотека jQuery большая и нахождение ответов в документации является важной частью процесса обучения.

Вот несколько советов для решения таких проблем:

• Для начала убедитесь, что вы полностью понимаете проблему, которую вас просят решить.
• Далее выясните, какие элементы вам требуются для решения проблемы и определите, как вы получите эти элементы. Используйте Firebug для проверки, что элементы получены.
• Наконец выясните, что вам нужно сделать с этими элементами для решения проблемы. Это может быть полезно для добавления комментариев, поясняющих, что вы собираетесь делать перед написанием кода.

Не бойтесь совершать ошибок! Не пытайтесь сделать код идеальным с первого раза! Ошибки и эксперименты с решениями является частью изучения библиотеки и вы станете лучшим разработчиком. Примеры решений этих упражнений находятся в папке /solutions.

Справочный материал

Существует много статей и блогов, в которых описан определённый взгляд на jQuery. Некоторые из них выдающиеся, некоторые ошибочны. При чтении статьи про jQuery убедитесь, что в ней говорится о той же версии, которую вы используете. Не поддавайтесь искушению просто скопировать и вставить код - потратьте время на его изучение.

Вот некоторые отличные ресурсы для ознакомления в процессе вашего обучения jQuery. Наиболее важным из них является сам сайт jQuery: он содержит в виде кода полную документацию библиотеки. Это не чёрный ящик - ваше понимание библиотеки будет расти в геометрической прогрессии, если вы потратите время, посещая его снова и снова. И я настоятельно рекомендую добавить сайт в закладки браузера и постоянно к нему обращаться.

Этой публикацией я решил открыть цикл статей для тех, кто хочет овладеть фреймворком jQuery. Как всегда я буду стараться быть кратким и приводить как можно больше примеров. Последующие статьи, в принципе, можно рассматривать как вольный перевод документации c http://docs.jquery.com .

Итак, вы решили освоить jQuery, с чего начать? С JavaScript вы, конечно же, уже знакомы, иначе не решили бы. Что еще полезно знать для лучшего понимания этого волшебного фреймворка:

• CSS селекторы (посмотреть можно )
• XPath (посмотреть можно )

На первый взгляд связь не очевидна, но дело в том, что в основе функционирования jQuery лежит возможность легкого доступа к любому узлу xml дерева, коим и является html документ, а доступ этот осуществляется с помощью механизмов

CSS и XPath. Поэтому если эти понятия вам знакомы, то считайте, что вы уже на 50% знакомы с jQuery, а если нет — все в ваших руках.

Итак, для начала неплохо бы научиться получать любой нужный нам элемент на странице или группу элементов, отобранную по определенному признаку:

$("div") // все div"ы на странице $("div:first") // только первый div $("div:last") // только последний $("div:even") // все четные div"ы $("div.myclass") // div имеющий class="myclass" $("#mydiv") // элемент с id="mydiv", не обязательно div $("input:text") // все элементы input с type="text" $("input:checkbox:checked") // все чекбоксы с checked=true $("div", "#myid") // все div"ы, находящиеся в контейнере с id="myid" $("div.myclass img") // img, который находится в div"е с class="myclass" $("div.myclass, div.my2") // div"ы имеющие class="myclass" и class="my2"

Список можно продолжать долго, но для этого существует документация (благо у jQuery она превосходная, с примерами и бес лишней писанины), а мы сейчас пытаемся понять суть вопроса. Пытливый взор сразу обратил внимание на конструкцию $() в каждом примере. Что это? Это функция: имя — $ (разве запрещено?), а в круглых скобках — параметры. Теперь становится понятным, для чего нужны CSS и XPath — их конструкции и выступают в качестве параметров для выборки.

Функция $ — это фундамент jQuery, она так или иначе, вызывается всеми его методами. Если это функция, то она может что-то возвращать. А возвращает она как раз массив элементов, выбранных из документа на основе заданных параметров, т.о.

Var tmp = $("div"); // можно присвоить значение alert(tmp.length) // и посмотреть количество элементов массива

Элементами данного массива можно манипулировать:

$("div").not(".red") // все div"ы, кроме тех, у которых есть класс "red", // т.е. не только class="red", но и class="myclass red" $("span.green").add("span.gray") // в данном случае // идентично $("span.green, span.gray"), // но бывает, что без add не обойтись $("div").filter(".red, :first") // выбирает все дивы, а потом выбирает // из них первый и с классом red

В данном примере кроме операций над выборкой элементов вы также познакомились с методами jQuery и способом их применения. Методы вызываются через точку и применяются к массиву, после которого они были вызваны. Методы возвращают новый или модифицированный массив. Количество вызовов методов не ограничено.

$("div") //вернул все div"ы.not(".red") //отсек div"ы с классом red и вернул остальные.add("span.green") //добавил к выборке span"ы c классом green .addClass("myclass") //добавил класс myclass каждому элементу выборки.removeAttr("title") //удалил атрибут title у каждого элемента выборки (если был)

Методы выполняются в порядке вызова (за исключением ajax методов, которые ожидают ответа сервера) слева направо. Это можно использовать для свободного перемещения по DOM дереву:

здесь текст

этот текст будет удален

а этот нет

del

$("#myid").click(function (){ $(this).parent().prev().prev().empty(); }); Думаю, названия методов в предыдущем примере говорят сами за себя, подробнее они будут рассмотрены в соответствующей статье.

Ну вот, пожалуй, и все основы — выбрать нужный элемент (или группу) и произвести над ним нужные действия (читай применить нужный метод). Просто, как все гениальное! Основываясь на двух этих простых вещах jQuery имеет свой гибкий механизм обработки событий и ajax взаимодействия с сервером, весомый набор визуальных эффектов и многое другое. Все это я постараюсь осветить в последующих публикациях.

Последнее обновление: 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).

Подключение библиотеки jQuery

Чтобы начать работать с данной библиотекой, нам первым делом надо ее загрузить. Ее найти можно на официальном сайте разработчика 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. Все доступные версии можно найти по адресу