Вход
Русский
USD
Цены в иностранной валюте приведены информационно

Основы 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-страничку нужно разметить. Самый простой каркас для сайта выглядит вот так:

<!doctype html>
<html lang="en">
	<head>
		<title>Jquery Demo</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
	</body>
</html>

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

<!doctype html>
<html lang="en">
	<head>
		<title>Jquery Demo</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<script src="https://code.jquery.com/jquery-3.2.1.min.js"
	integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
	crossorigin="anonymous">
		</script>
		<script src="js/scripts.js"></script> 
	</body>
</html>

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

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

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

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

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

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

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

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

...
<body>
	<p id="demo"></p>
</body>
...

Вызов 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. Вы увидите, что в ваш тег

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

<p id="demo">Hello, World!</p>

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


<p id="demo"></p>

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

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

$(“selector”)

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

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

Знакомство с событиями в Jquery

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

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

...
<body>
	<button id="button">Click me</button>
	<p id="demo"></p> 
</body>
...

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

Чтобы настроить действие на клик, будет использовать одноименный метод 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!");
	});
});

Не забудьте сохранить изменения, а потом обновить страницу в браузере, чтобы увидеть результат. Теперь при клике мышью по кнопке на экран будет выводиться надпись Hello, World!

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

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

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

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

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

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

...
<body>
	<button class="button">Open</button>
	<section class="hidden">
		<button class="button">Close</button>
	</section>
</body>
...

Вот теперь нам как раз и пригодится ранее созданный файл стилей style.css. Для того, чтобы спрятать элемент с классом hidden, пропишите для него свойство display со значением none. Мы расположим наш тег <section> в центре экрана для наглядности. В файл 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 могут обеспечивать взаимодействие пользователя с ресурсом, а эффекты управляют элементами, когда вышеописанное действие уже происходит.

Опубликовано: Апрель 6, 2017