Введение в jquery. Основы jquery. Описание библиотеки jQuery

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 » , подготовленной дружной командой проекта

Хорошо Плохо

Последнее обновление: 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. Все доступные версии можно найти по адресу

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 . Статья, надеюсь, будет расширяться

Значения функции $()

1. $() данная функция вернет специальный объект Javascript, содержащий массив элементов, отобранных по переданному селектору. Иначе говоря, вернет "обертку".

1.1 Ограничиваем отбор элементов (например, p) одним блоком (например, с id kukaracha).

$("p","div#kukaracha")

Не путать с конструкцией $("span,h1") отберет и span и заголовок.

2 Этим мы создали элемент.

$("Парам-тарарам")

3 $ (псевдоним jQuery) может выступать префиксом для ВСПОМОГАТЕЛЬНЫХ функций. Данныя функции не работают с элементами объектной модели документа (DOM) - этим занимаются методы.
Чтобы исключить появление ошибок при взаимодействии с другими библиотеками (например, если $ уже занят другой библиотекой) необходимо заключить вспомогательную функцию в следующую конструкцию:

(function($){ // ваша вспомогательная функция })(jQuery);

Готовность дерева DOM

$(function() { DOM уже загружен, можете кодировать });

$(document).ready(function(){ $("div.number_one").hide(); });
jQuery(document).ready(function(){ $("div.number_two").hide(); });

Создаем плагин

$.fn.doit

расширяем обертку $ методом doit . Или, иначе говоря, расширяем объект $.fn . В плагине ключевой слово this - это тот самый jQuery объект, из которого был вызван плагин. Другими словами, контекст (this) ссылается на обернутый набор, то есть this уже идентичен $(this) .

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

Селектор выбора прямого потомка $("span > a")

отберет только прямых потомков (потомков вложенных куда-то еще не отберет)

Контест в jQuery

В javascript this (контекст функции) - это объект, свойства которого содержат ссылку для вызова функции. (this это ссылка на текущий экземпляр объекта).Например:

Var karamba = tuk.doit();

В качестве контекста (в конструкторе) будет выступать экземпляр объекта tuk . Или: вместо this подставляется название той сущности, которая вызвала данную функцию. В атрибуте (например, onclick) this - это ссылка на тот HTML-элемент, который запустил событие onclick .

Вутри плагина слово this это ссылка на объект jQuery (т.е. не нужно оборачивать контект функции: $(this) , так как это будет преобразовано в $($("#el"));). Но, когда в коде плагина используется callback функция, то там this - это ссылка на нативный DOM-элемент (и чтобы работать с ним нужно сделать так: $(this);).

Основные фильтры jQuery

$("td:eq(6)").css("border","2px solid #fff");

4.2 Например, необходимо отыскать все абзацы, которые следуют после 7-го по счету абзаца.

$("p:gt(6)").css("border","2px solid #fff");

$("p:lt(6)").css("border","2px solid #fff");

$("p:not(:eq(6))").css("border","2px solid #fff");

$("p:animated").css("border","2px solid #fff");

Внешняя таблица стилей и код jquery

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

Статья в процессе написания.

Чем может быть полезна библиотека?

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

Что же такое Jquery? Это сторонняя библиотека для JS, помогающая уменьшить количество необходимого кода, параллельно увеличив функционал языка. Библиотека кроссбраузерная, поэтому код будет корректно отображаться в любом современном браузере.

Чтобы увидеть, насколько Jquery сокращает количество необходимого кода, посмотрите на такой простой пример:

#Javascript document.getElementById("someBlock").innerHTML = "Hello, World!"; #Jquery $("#someBlock").html("Hello, World!");

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

Что вам потребуется для воплощения наших советов в жизнь? Во-первых, нужно иметь базовые знания HTML, CSS, понимать принцип работы селекторов. Во-вторых, пригодятся базовые навыки программирования. С Jquery можно работать, даже не зная хорошо Javascript. Однако, нужно понимать, что такое переменные, типы данных. Да и логическое мышление будет не лишним вместе со знаниями основ математики.

Как установить и настроить JQuery?

По своему принципу библиотека является JS файлом. Его нужно подключить с помощью тега ввашей HTML-странички. Это можно сделать двумя способами:

• Скачать скрипт с официального сайта и добавить в папку проекта;
• Использовать ссылку на файл из CDN. Такое подключение скрипта будет работать быстрее локального.

Для начала нам нужно создать папку для проекта. Внутри мы размещаем файл HTML-разметки index.html. Также нам понадобится каталог css для стилевого файла style.css, а также js - для script.js. Структура папки проекта будет такой:

HTML-страничку нужно разметить. Самый простой каркас для сайта выглядит вот так:

Jquery Demo

Перед закрывающим тегом стоит вставить тег cо ссылкой на CDN, а также второй с вашим JS-файлом. Теперь ваш файл будет выглядеть вот так:

Jquery Demo

Обратите внимание, что пользовательский скрипт подключается после библиотеки, иначе он не будет работать. Если использовать загруженный скрипт Jquery, то файл jquery.min.js поместите в папку js. После этого вы получите полный доступ к API библиотеки.

Как использовать Jquery?

Библиотека использует объектную модель документа DOM для взаимодействия с тегами HTML-страницы. Структуру DOM можно увидеть с помощью отладчика в браузере. Его можно открыть с помощью клавиши F12. Вы увидите дерево HTML-разметки — это и есть DOM. Каждый тег является объектом, с которым JS может взаимодействовать. Все объекты расположены в виде древовидной структуры. Каждый вложенный элемент или потомок является веткой корневого тега . С помощью языка Javascript можно вносить изменения в разметку.

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

Тег является наружной нодой в структуре DOM, поэтому это объект document. Для управления содержимым страницы с помощью Jquery, нужно обратиться к данному объекту. Внутри файла scripts.js напишите вот такой код:

$(document).ready(function() { //тело функции });

В тело функции можно писать код библиотеки. Jquery проверит его, ведь он будет выполнен только если DOM сможет загрузить скрипты. Иногда они могут не выполняться до тех пор, пока не загрузится разметка и стили.

Давайте потренируемся применять Jquery на примере вывода всем известной фразы Hello, World! Ее нужно выводить в какой либо тег, который мы и создадим внутри файла index.html:

... ...

Вызов Jquery осуществляется с помощью символа $. Действие библиотеки обычно определяется методом. Jquery получает доступ к объектной модели документа DOM посредством CSS-синтаксиса. Вызов библиотеки будет выглядеть вот так:

$(“selector”).method();

В нашем случае в качестве селектора будет выступать идентификатор demo. Обратиться к нему можно через #demo. Мы будем использовать метод.html() чтобы внести изменения в разметку страницы: например, вставить желаемый текст. В скрипт пропишите:

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

Сохраните изменения в файле, нажав Ctrl+S и откройте в браузере файл index.html. На экране появится надпись Hello, World!

Посмотреть изменения в DOM можно нажав Ctrl+Shift+I. Вы увидите, что в ваш тег

прописалась фраза:

Hello, World!

Но если открыть в браузере исходный код с помощью Ctrl+U, то нашей фразы внутри разметки не будет. Вы увидите HTML-код без форматирования:

Какие можно селекторы использовать?

Они используются для того, чтобы сообщить библиотеке Jquery с какими элементами на странице нужно работать. Большая часть селекторов похожа на таковые в CSS с некоторыми отличиями. Обращение к селектору такое:

$(“selector”)

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

• $(this) или Current - это выбор текущего элемента;
• $(“*”) либо Wildcard применяется для выбора всех элементов, расположенных на странице;
• $(“#id”) - обращение к уникальному идентификатору;
• $(“.class”) - таким образом можно выбрать несколько блоков с одинаковым классом;
• $(“div”) служит для обращения к тегу ;
• $(“li:first-child”) обратится к первому элементу
• в списке
  ;
  • $(“”) - это обращение по атрибуту.
  Знакомство с событиями в Jquery

  В предыдущем примере с выводом на экран фразы Hello, World! наш код запускался сразу при загрузке страницы. Взаимодействия с пользователем не требовалось, поэтому текст можно было бы просто вписать в разметку, не используя библиотеку Jquery. Однако она может гораздо больше, например делать вывод сообщения после нажатия на кнопку.

  Первым делом нужно будет в файл разметки index.html добавить кнопку с помощью тега .

  ... Click me ...

  Вот что у вас получится, если открыть страничку в браузере:

  

  Чтобы настроить действие на клик, будет использовать одноименный метод click(). С его помощью можно вызвать функцию вывода надписи Hello, World!

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

  Мы присвоили кнопке идентификатор button, к которому можно обратиться посредством селектора $(“#button”). Метод click() способен отслеживать сделанные клики. Внутри него нужно создать функцию для вывода надписи:

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

  У нас получится вот такой код внутри файла скриптов:

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

  
  

  Событием называют любое взаимодействие пользователя с браузером посредством ввода данных с клавиатуры или мышкой.

  Какие же события используются чаще всего? Это:

  • hover() применяется для выполнения действия в момент наведения курсора на любой элемент. Можно также использовать специальные методы для мыши — mouseenter() и mouseleave(). Первый отвечает за наведение курсора, а второй — за покидание;
  • click() следит за кликами на странице. Событие может вам пригодиться для создания выпадающего меню;
  • scroll() выполняется во время прокрутки экрана. События можно использовать для того, чтобы, например, показывать изображения при скроллинге странички;
  • submit() нужен для выполнения действий при заполнении формы;
  • keydown() отслеживает нажатия клавиш. Таким образом вы сможете закрыть диалоговое окно нажатием кнопки Esc.

  При помощи данных событий вы сможете сделать действительно интерактивный контент для вашего ресурса.

  Какие можно использовать эффекты?

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

  ... Open Close ...

  Вот теперь нам как раз и пригодится ранее созданный файл стилей style.css. Для того, чтобы спрятать элемент с классом hidden, пропишите для него свойство display со значением none. Мы расположим наш тег в центре экрана для наглядности. В файл style.css пропишите:

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

  Чтобы переключать видимость элемента с none на block нам потребуется метод toggle(). Его мы и пропишем в нашем файле scripts.js:

  $(document).ready(function() { $(".button").click(function() { $(".hidden ").toggle(); }); });

  Не забудьте обновить файл index.html. Вот что у нас получится до клика по кнопке:

  
  

  И после клика:

  
  

  Вам не обязательно применять именно метод toggle(), взамен можете использовать slideToggle() либо fadeToggle(). С их помощью можно будет сделать интересные эффекты.

  Какие из них самые востребованные? Это:

  • toggle() управляет видимостью элементов. Метод может скрывать hide() или показывать show() элементы;
  • slideToggle() меняет видимость с эффектом скольжения. С ним вместе работают методы slideUp() и slideDown();
  • fadeToggle() управляет видимостью за счет прозрачности. Данный метод связывается с fadeIn(), а также fadeOut();
  • animate() воспроизводит кастомные анимационные эффекты.

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