Сайт о телевидении

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

Во время создания сайтов используются три языка — 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. Однако, нужно понимать, что такое переменные, типы данных. Да и логическое мышление будет не лишним вместе со знаниями основ математики.

По своему принципу библиотека является 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 библиотеки.

Библиотека использует объектную модель документа 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 могут обеспечивать взаимодействие пользователя с ресурсом, а эффекты управляют элементами, когда вышеописанное действие уже происходит.

  Как я уже писал , я начал читать книгу «jQuery in Action» (авторы Bear Bibeault и Yehuda Katz). В данной серии статей (а я планирую довести дело до конца) я буду выкладывать самые интересные моменты из каждой главы этой книги. Это будут основные идеи, примеры или и то и другое вместе:-)

  Глава 1. Введение в jQuery. Для чего нужно (нужна, нужен) jQuery – чтобы облегчить работу веб-программиста. С помощью этой библиотеки нам (веб-программистам) проще повысить функциональность наших страниц с минимальным выполнением монотонной работы.Основы jQuery В своей основе jQuery ориентировано на работу с элементами HTML страниц. Основные моменты.1.1. Wrapper. В CSS для выбора, например, всех ссылок внутри абзаца

  Мы писали:

  В jQuery для этого используется следующее выражение:

  JQuery(selector)

  Здесь следует отметить, что $() является алиасом к функции jQuery() . Она возвращает специальный объект JavaScript, содержащий массив элементов DOM, соответствующий селектору.

  Или такой пример: применим эффект fade out для всех элементов класса notLongForThisWorld . Код будет следующим:

  $(“div.notLongForThisWorld”).fadeOut();

  А если мы захотим в добавок к эффекту добавить к этим элементам класс removed , то напишем так:

  $(“div.notLongForThisWorld”).fadeOut().addClass(“removed”);

  Такую цепочку можно продолжать бесконечно.

  Но это только малая часть возможности jQuery по работе с селекторами. Еще пара:

  $(“body > div”);

  Селектор выбирает элементы , дочерние к

  $(“body > div:has(a)”);

  То же, но уже выбираем , содержащие в себе ссылки.

  Не пугайтесь, что вам что-то сейчас непонятно. Более подробно на селекторах мы остановимся в главе 2. Единственный на сейчас вывод, который нужно сделать – jQuery на самом деле мощная штука.

  1.2. Функции. По сути функции jQuery это методы функции jQuery. Но в книге мы их будем называть функцими. А не методами.

  $.trim(someString);

  Здесь мы использовали функцию trim() . Подробнее функции jQuery будут рассмотрены в 6-й главе.

  $ это пространство имен.

  1.3.The document ready handler (на английском-то понятно, а как это по-русски сказать… Суть ниже:-)).

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

  1.4. Работа с DOM. Создавать элементы DOM можно просто передавая функции $() . Например:

  $(“

  Привет!

  ”) ;

  Или такой пример:

  $(“

  Привет!

  ”).insertAfter(“#followMe”);

  Как вы догадались,

  Привет!

  появится после элемента с id=”followMe” .
  1.5. Расширение jQuery. В jQuery много полезных функций, но, конечно, она не может удовлетворить потребностям всех пользователей. В этом случае библиотеку всегда можно расширить своими собственными функциями.

  Смотрим пример:

  $.fn.disable = function() {
  return this.each(function() {
  if(typeof this.disabled != “undefined”) this.disabled = true;
  });
  }

  $.fn.disabled означает, что мы расширяем враппер $ функцией disabled .

  Затем мы можем уже использовать свою новую функцию:

  $(“form#myForm input.special”).disable().addClass(“moreSpecial”);

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

  1.6. Использование jQuery с другими библиотеками. Использование префиксов jQuery и, в частности, $ , который используется так же библиотекой Prototype, может создать проблем, подумаете вы. Ну, если первый еще нет, то второй точно.

  JQuery.noConflict();

  При этом значение $ будет освобождено jQuery для другой библиотеки.

  Как вам в целом пост? Хотелось бы услышать ваше мнение, стоит ли продолжать, потому что это мой первый опыт в такого вида постах-переводах, да еще урезанного вида.

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

  Параллельно выкладываю статьи

  jQuery — библиотека JavaScript, содержащая в себе готовые функции языка JavaScript, все операции jQuery выполняются из кода JavaScript.

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

  Для выбора элементов используются селекторы CSS. Выбор осуществляется с помощью функции $() . При вызове функция $() возвращает новый экземпляр объекта JQuery, который оборачивает ноль или более элементов DOM и позволяет взаимодействовать с ними различными способами.

  Выполнение различных сценариев возможно только после окончания загрузки структуры документа document , когда браузер преобразует html-код страницы в дерево DOM. Управление процессом загрузки обеспечивает конструкция

  JQuery(document).ready(function() { ... });

  Сначала производится обертывание экземпляра document в функцию jQuery() , после применяется метод ready() , которому передается функция function() {...} , исполняемая после загрузки документа.

  На практике обычно используется сокращенная форма такой записи jQuery(function() {...}); , или $(function() {...}); .

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

  $h = $(".list").parent().parent().detach();

  Для хранения нескольких элементов используются массивы JavaScript:

  $k = 15;

  Правила работы с библиотекой jQuery 1. Как добавить jQuery на веб-страницу

  Добавить библиотеку jQuery на свою веб-страницу можно двумя способами:

  Использовать версию файла jQuery, размещенную на ресурсах Google , Microsoft или jQuery.com .
  Данный метод использует «Сеть дистрибуции контента» (CDN, content distribution network), т.е. файл jQuery расположен на другом веб-сайте, который при запросе пользователем отправляет данный файл на его компьютер. Очевидные преимущества данного способа — снижение нагрузки на собственный веб-сервер и ускорение загрузки файла в силу разветвленности сети серверов дистрибьютора.

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

  Загрузить последнюю версию библиотеки jQuery с официального сайта. Для этого вам необходимо перейти по адресу jQuery.com и выбрать интересующую вас версию библиотеки. Для загрузки предлагается две версии jQuery-файла — минимизированный и несжатый. Размер несжатого файла около 300 Кб, он содержит комментарии, поэтому его лучше использовать с целью разработки и отладки кода.
  Минимизированная версия файла весит около 100Кб, в ней удалены все комментарии и ненужные пробелы, что ускоряет загрузку файла браузером.

  Для загрузки нужно перейти по ссылке, и в открывшемся окне щелкнуть правой кнопкой мыши и выбрать «Сохранить как …». После этого поместить файл в нужную папку (обычно для этого используется папка «scripts») и добавить его на вашу страницу:

  2. Правила добавления jQuery на страницу

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

  3. Как создать новый html-элемент

  Создать пустой html-элемент, например, блок, можно несколькими способами:

  1) с помощью краткой формы записи $("")
  2) с помощью инструкции $("")
  3) с помощью инструкции $("")

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

  При создании нового элемента методу $() можно передать второй параметр в виде объекта JavaScript, определяющий дополнительные атрибуты элемента:

  $("", {src: "images/flower.jpg", title: "Rose_in_garden", click: function() {...} }).appendTo("body");

  Таким образом создается элемент с заданными атрибутами и включается в дерево DOM.

  Библиотека jQuery

  Если вкратце охарактеризовать то, что делает библиотека jQuery, то это прозвучит довольно обыденно: данная библиотека позволяет изменять содержимое HTML-документов путем манипулирования объектами модели, создаваемой браузерами в процессе обработки HTML-кода (так называемые DOM-манипуляции).

  Вам, наверное, уже приходилось манипулировать объектами DOM (Document Object Model - объектная модель документа) с помощью других библиотек JavaScript или встроенных функций API (Application Programming Interface - интерфейс программирования приложений) , которые поддерживаются большинством современных браузеров. Однако библиотека jQuery работает намного лучше. Она превращает манипулирование объектами DOM в увлекательное занятие, временами напоминающее настоящее развлечение.

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

  Средства jQuery необычайно выразительны. Эта библиотека позволяет добиться гораздо большего при намного меньшем объеме кода, чем в случае использования программных DOM-интерфейсов браузеров.

  Методы jQuery применимы к целым группам элементов. Предлагаемый в DOM-модели стандартный подход, основанный на шаблонной цепочке действий "выбрать-повторить-изменить", больше не требуется. Следствием этого является уменьшение количества циклов for в коде, а значит, и снижение вероятности появления в нем ошибок.

  Библиотека jQuery справляется с различиями в реализации DOM в различных браузерах (проблемы кросс-браузерности). Например, меня не должна беспокоить мысль об особенностях поддержки того или иного средства, чем печально славится браузер Internet Explorer (IE). Достаточно всего лишь сформулировать jQuery свои пожелания, и библиотека самостоятельно обеспечит совместимость с конкретным браузером.

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

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

  Описание библиотеки jQuery:
  • 1. Основы jQuery, работа с DOM-моделью
    • Вставка дочерних, сестринских и родительских элементов

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

  Сравните код простого приложения «Hello, World» в JavaScript и jQuery:

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

  Как видите, jQuery позволяет достичь того же результата гораздо быстрее.

  Данное руководство охватывает основы работы с jQuery, а именно такие темы:

  • Установка jQuery в веб-проект;
  • Определения важных понятий веб-разработки (API, DOM и CDN).
  • Общие селекторы, события и эффекты jQuery.
  • Примеры использования jQuery.
  Требования
  • Базовые навыки работы с HTML и CSS. Вы должны уметь настроить простой веб-сайт и понимать работу базовых селекторов CSS.
  • Базовые навыки программирования. В целом вы можете работать с jQuery, не зная основ JavaScript, но понимание переменных и типов данных, навыки в математике и логике очень облегчат вам жизнь.
  Установка и настройка jQuery

  jQuery – это файл JavaScript, на который можно сослаться в HTML-файле. Добавить jQuery в проект можно двумя способами:

  • загрузить локальную копию;
  • сослаться на файл через сеть доставки контента.

  Примечание: Сеть доставки контента (Content Delivery Network, CDN) – это система серверов, которая обслуживает веб-контент на основе географического положения пользователя. Файл jQuery по CDN будет обслуживаться быстрее и эффективнее, чем файл, размещённый на сервере вместе с остальными компонентами приложения.

  Ниже показано, как сослаться на jQuery в CDN. Найти последнюю версию jQuery можно . Если же вы все же хотите загрузить jQuery на сервер, скопируйте пакет с официального сайта .

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

  project/
  ├── css/
  | └── style.css
  ├── js/
  | └── scripts.js
  └── index.html

  Создайте простой HTML-файл и назовите его index.html.

  
  
  
  jQuery Demo
  
  
  
  
  

  Сошлитесь на CDN jQuery перед тем, как закрыть тег , и укажите свой пользовательский файл JavaScript, scripts.js.

  
  
  
  jQuery Demo
  
  
  
  
  
  
  

  Файл JavaScript scripts.js нужно добавить под библиотекой jQuery, или же он не будет работать.

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

  Теперь библиотека jQuery загружена на сайт, а у вас есть полный доступ к jQuery API .

  Примечание: Интерфейс прикладного программирования (Application Programming Interface, или API) – это интерфейс, который позволяет программам взаимодействовать друг с другом. API JQuery содержит всю необходимую информацию и документацию, необходимую для доступа к JQuery.

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

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

  Document Object Model (DOM) – это метод, с помощью которого JavaScript (и JQuery) взаимодействует с HTML в браузере. Чтобы понять, что такое DOM, щелкните правой кнопкой мыши по текущей веб-странице и выберите Inspect, это откроет инструменты разработчика. Здесь вы увидите HTML код – это и есть DOM.

  Каждый HTML-элемент в DOM считается нодой – это объект, с которым может взаимодействовать JavaScript.

  Эти объекты расположены в виде древовидной структуры, где каждый вложенный элемент является ветвью, а — корнем. JavaScript может добавлять, удалять и изменять такие элементы.

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

  Наружный уровень DOM, нода , является объектом document. Чтобы начать управлять страницей с помощью JQuery, сначала нужно обеспечить этот уровень.

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

  
  // all custom jQuery will go here
  });

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

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

  ...
  
  ...

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

  $("selector").method();

  В CSS ID представляется с помощью символа #; получить доступ к ID demo можно с помощью селектора #demo.

  html() – это метод, который изменяет HTML внутри элемента.

  Теперь нужно поместить программу «Hello, World» в функцию ready(). Добавьте в scripts.js такую строку:

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

  Сохраните файл, а затем откройте файл index.html в браузере. Если все настройки выполнены правильно, вы увидите на экране:

  Если вы спутали DOM, сейчас вы об этом узнаете. Кликните правой кнопкой мыши по тексту «Hello, World!» и выберите Inspect Element. DOM будет отображать:

  Hello, World!

  Выберите View Page Source, и вы увидите только:

  то есть неформатированный HTML.

  Селекторы

  Селекторы сообщают jQuery, с каким элементом нужно работать. Большинство селекторов jQuery похожи на CSS, но все же они имеют некоторые особенности. Полный список селекторов jQuery можно найти в документации .

  Чтобы получить доступ к селектору, используйте символ jQuery, $, и круглые скобки:

  Ниже перечислены некоторые популярные селекторы:

  • $(«*»): Wildcard, выбирает все элементы страницы.
  • $(this): Current, выбирает текущий элемент.
  • $(«p»): Tag, выбирает каждый экземпляр тега

    .

  • $(«.example»): Class, выбирает каждый элемент класса example.
  • $(«#example»): ID, выбирает один экземпляр уникального ID example.
  • $(«»): Attribute, выбирает любой элемент с text атрибута type.
  • $(«p:first-of-type»): Pseudo Element, выбирает первый тег

    .

  Обычно используются селекторы класса (чтобы выбрать несколько элементов) и id (чтобы выбрать всего один элемент).

  События jQuery

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

  Вернитесь в файл index.html и добавьте элемент , который будет отслеживать клики на странице.

  ...
  
  Click me
  

  С помощью метода click() вызовите функцию с кодом «Hello, World!».

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

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

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

  В результате получится такой код:

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

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

  Событие – это любое взаимодействие пользователя с браузером (обычно с помощью мыши или клавиатуры). В данном случае событием был клик мыши. Полный список методов событий можно найти в документации jQuery. Ниже перечислены наиболее популярные события:

  • click(): прослушивает клики на странице.
  • hover(): выполняет действие при наведении курсора на элемент. Методы mouseenter() и mouseleave() относятся только к перемещениям курсора с помощью мыши (навести и отвести курсор соответственно).
  • submit(): выполняется при заполнении формы.
  • scroll(): выполняется при прокрутке экрана.
  • keydown():выполняется при нажатии кнопки на клавиатуре.

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

  Разобравшись с событиями, вы сможете создавать динамический контент для сайта.

  Эффекты jQuery

  Для примера создайте наплывающий элемент, который можно закрывать и открывать. Для этого можно использовать два ID (один, чтобы открыть, а второй — чтобы закрыть элемент). Но мы используем для этого класс.

  Удалите теги и

  Из тела файла index.html, затем добавьте в документ HTML:

  ...
  
  Open
  
  Close
  
  ...

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

  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), скрывая и отображая наплывающий элемент при клике.

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

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

  Вот краткий список популярных эффектов:

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

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

  Tags: ,