Что такое jQuery? Изучите одну из самых популярных библиотек JavaScript

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

jQuery — одна из самых популярных библиотек JavaScript. jQuery упрощает веб-разработку, устраняя все «вещи», которые усложняют использование JavaScript. С помощью jQuery вы можете вызывать простые методы вместо того, чтобы переписывать блоки задач.

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

Сегодня мы рассмотрим:

Что такое jQuery?
Зачем изучать jQuery?
Синтаксис JQuery
Как установить jQuery
Создайте свое первое приложение jQuery
Что изучать дальше

Что такое jQuery?

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

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

Обработка событий
Манипуляции с DOM
Анимации и эффекты
AJAX-фреймворк

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

JavaScript:

// Updating the text present in 4 paragraph elements
document.addEventListener("DOMContentLoaded", function() {
   paragraphs = document.getElementsByTagName("p")
   for (i = 0; i <= paragraphs.length; i++) {
       paragraphs[i].innerHTML = "This is a Paragraph";
   }
});

HTML:

<html>
<head>
</head>
<body>
  <div>
     <p>  </p>
     <p>  </p>
     <p>  </p>
     <p>  </p>
  <div>
</body>
</html>

Вывод:

Это абзац

Посмотрите, как он сравнивается с некоторым jQuery, который дает такие же результаты. Библиотека jQuery использует JavaScript внутри, чтобы сделать код более читабельным.

// Updating the text present in 4 paragraph elements
$(document).ready(function() {
   $("p").html("This is a Paragraph")
});

Зачем изучать jQuery?

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

"Пиши меньше, делай больше".

jQuery, вероятно, является самой популярной и расширяемой библиотекой JavaScript. Его используют крупные компании, такие как Netflix, Google, IBM и Microsoft. Обычно это первая библиотека, которую изучают разработчики JavaScript, потому что:

Его синтаксис для вызовов AJAX очень прост по сравнению с собственным XmlHttpRequest.
Он предлагает упрощенные решения распространенных задач JavaScript, таких как сортировка и фильтрация массивов.
Многие другие библиотеки имеют зависимости jQuery.
Он работает на серверной стороне Node.

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

В настоящее время Bootstrap и WordPress используют jQuery для создания своих компонентов и тем. Многие крупные технологические компании, хотя они и не могут начинать проекты с нуля с помощью jQuery, по-прежнему строят проекты, начатые с помощью jQuery. Таким образом, полезно понимать jQuery, чтобы включить его в свое резюме.

Синтаксис JQuery

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

$() или jQuery(): $() существует только для того, чтобы сделать его, поэтому вам не нужно выписывать jQuery() каждый раз, когда вы хотите использовать селектор.
selector: так мы выбираем наш элемент DOM (объектная модель документа). Это элемент, в который мы хотим внести изменения при загрузке страницы.
action(): это функция, которая сообщает DOM, что делать. Это может быть прослушиватель событий или эффект, в зависимости от варианта использования.

Вместе простой оператор jQuery записывается как:

$() предпочтительнее jQuery() просто потому, что он чаще используется. Однако оба варианта будут работать.

Краткое введение в DOM

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

Затем jQuery может манипулировать этим деревом объектов. Мы инкапсулируем всю нашу логику jQuery с помощью следующего селектора:

$(document).ready(cb) //cb is a callback function

Как видите, этот селектор является экземпляром синтаксиса $(selector).action(), который мы установили выше. Документ объекта окна — это селектор, а действие — метод ready(). Эта функция будет выполнять всю логику внутри функции обратного вызова, которая передается методу в качестве аргумента.

Вот базовый пример Hello World загрузки и управления DOM с помощью jQuery:

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
   </script>
</head>
<body>
  <div>
     <h1>  </h1>
  <div>
</body>
</html>
$(document).ready(() => {
   $("h1").html("Hello World");
});

Знакомство с селекторами

Точно так же, как селекторы CSS находят элементы HTML для применения стиля, селекторы jQuery находят элементы DOM для применения эффектов или прослушивателей событий. Мы используем функцию $() с переданной строкой, которая каким-то образом идентифицирует конкретный элемент(ы).

Некоторые из способов, которыми мы можем выбирать элементы:

Название тэга
Id
Сорт
Атрибут
Ребенок
Потомки

Выбрать по имени тега

При выборе по имени тега используйте имена тегов HTML, такие как div или h1, как показано в примере Hello World выше.

Выбрать по идентификатору

Используйте знакомый синтаксис CSS, который вы используете при выборе элемента по идентификатору, чтобы получить элемент DOM в jQuery:

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
   </script>
</head>
<body>
  <div id="logo">
     <img src="http://placekitten.com/300/300" alt="placekitten"/>
  <div>
</body>
</html>
$(document).ready(() => {
      $('#logo').append('kittty catttt!'); //appending text to div element with id=logo
});

В фрагменте кода текст добавляется только к div с id из logo.

Выбрать по классу

Как и в CSS, мы также можем выбирать элементы по имени их класса. Используйте «.» перед именем класса, чтобы выбрать этот элемент:

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
   </script>
</head>
<body>
  <div id="logo">
        <p class="example-1"></p>
<p class="example-1"></p>
<p class="example-1"></p>
<p class="example-1"></p>
  <div>
</body>
</html>
$(document).ready(() => {
      $('.example-1').append('this is a paragraph'); 
      //appending text to div element with class= “example-1”});

В фрагменте кода текст добавляется к каждому element класса example-1.

Выберите по атрибуту и значению атрибута

Также существует выбор по атрибуту и значению атрибута. Используйте квадратные скобки [ ] для выбора этих элементов:

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
   </script>
</head>
<body>
  <div id="logo">
        <p class="example-1" id="red"></p>
<p class="example-1" id="blue"></p>
<p class="example-1" id="yellow"></p>
<p class="example-1" id="green"></p>
  <div>
</body>
</html>
$(document).ready(function () {
   $('.example-1').append("This is a paragraph element'");
   $('[id = "red"]').css("color", "red");
   $('[id = "green"]').css("color", "green");
   $('[id = "yellow"]').css("color", "yellow");
   $('[id = "blue"]').css("color", "blue");
   $('[class]').css({"background":"lightgray", padding: '20px'});
});

Создать новые элементы

Создать новые элементы в jQuery так же просто, как использовать функцию $():

$(document).ready(function () {
   var newDiv  = $("<div>") // Create an empty div element
   var newListItem = $("<li> ab </li>") // Create list element with content "ab"
});

Это только создает элемент. Он не добавляет его в DOM. Нам нужно сделать отдельное действие для добавления его на веб-страницу.

Действия/обработчик событий

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

Обработчик событий отвечает за прослушивание конкретного события для данного элемента. Как только пользователь взаимодействует с этим элементом, запускается обработчик событий, который выполняет логику этой функции.

В jQuery мы используем знакомый синтаксис $(“selector”).action() в качестве основы для нашего обработчика:

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  </script>
</head>
<body>
  <div>
    <button> Click Me </button>
  <div>
</body>
</html>
$(document).ready(() => {
   $("button").click((event) => {
       alert("Button clicked by user!");
   });
});

Селектор выбирается так же, как мы это делали раньше. Действие — это фактическое событие, которое мы прослушиваем для выбранного элемента. Здесь тег button прослушивает событие клика. При нажатии на button пользователь будет предупрежден.

Попробуйте войти в консоль event. Объект события полон различных свойств, которые могут оказаться полезными в вашей логике. Этот объект включен по умолчанию во все обработчики событий.

Как установить jQuery

Чтобы использовать jQuery, вам нужно иметь ссылку на библиотеку в вашем проекте. Есть три способа сделать это.

1- Загрузите локальную копию библиотеки jQuery со своего веб-сайта в папку своего проекта и создайте ссылку на нее в заголовке своего HTML-документа.

<head>
<script src="link-to-library"> </script>  
</head>

2- Если вам удобно использовать npm или yarn с файлом package.json, установите пакет jQuery:

// npm 
install jquery

//yarn
yarn add jquery

3- Используйте CDN (сеть доставки контента) для связи с библиотекой jQuery, которую вы хотите использовать. Поместите сценарий в заголовок вашего документа.

<head>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>  
</head>

Создайте свое первое приложение jQuery

Попробуйте свои силы в настройке простого приложения jQuery. Если вы застряли, есть решение, которое поможет направить ваш процесс.

Мы сделаем первый шаг к созданию простого jQuery-приложения To Do list. Эта часть программы должна назначать обработчик события щелчка кнопке добавления и генерировать оповещение, отображающее задачу, добавленную в текстовое поле.

Чтобы добавить задачу на нашу веб-страницу со списком дел, пользователь вводит новую задачу в текстовое поле, а затем нажимает кнопку «Добавить». Задача в этом задании следующая:

Назначьте обработчик события click кнопке добавления с id из addTask.
При нажатии кнопки добавления:
Если текстовое поле пусто, сгенерируйте alert с текстом "Ошибка: введите задачу, прежде чем нажимать кнопку "Добавить".
Если текстовое поле не пусто, сгенерируйте alert с текстом, содержащим имя задачи. Например, если текст в поле ввода — «Выполнить задание», сгенерируйте alert с текстом «Новая задача: выполнить задание».
Очистите текст внутри текстового поля после нажатия кнопки добавления.

Примечание. Доступ к текущему значению поля ввода можно получить с помощью $("selector").val().

Кроме того, текст, присутствующий в текстовом поле, можно очистить с помощью $("selector").val("").

Пример ввода: введите Выполнить задание в текстовом поле и нажмите кнопку добавления.

Пример вывода: создается alert с текстом "Новая задача: выполнить задание", а текстовое поле очищается.

Посмотрите ниже и попробуйте решить ее самостоятельно!

HTML:

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
  </head>
  <body>
    <div class="container">
      <input type="text" class="textBox" placeholder="Enter task here">
      <button id="addTask" class="fa fa-plus">  </button>
      <div class = "notCompleted">
        <h3>To Do:</h3>
      </div>
      <div class="completed">
        <h3>Done:</h3>
      </div>
    </div>
  </body>
</html>

JavaScript:

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

Решение:

$(document).ready(function() {
    $("#addTask").click(function() { // click event handler
        if ($(".textBox").val() != "") {
            alert("New Task: " + $(".textBox").val());
            $(".textBox").val(""); // clear out the text box
        } else {
            alert("Error: Please enter a task before clicking the 'Add' button.");
        }
    });
});

Обзор решения

Вывод:

В строке 2 мы назначаем обработчик клика кнопке с идентификатором addTask. Класс кнопки уже назначен в HTML-коде веб-страницы.
В строке 3 мы извлекаем текущее значение текстового поля с классом textBox, используя $(".textBox").val(). Класс текстового поля также назначается в HTML-коде веб-страницы.
Если текстовое поле не пусто, мы создаем alert с задачей в строке 4 и очищаем текстовое поле в строке 5.
Если поле ввода пусто, мы генерируем alert с текстом "Ошибка: введите задачу перед нажатием кнопки "Добавить" в строке 8.

Что изучать дальше

Поздравляю! Теперь вы знакомы с jQuery и создали свой первый шаг к созданию работающего приложения. Ваши следующие шаги:

Всплывающие события
Обход DOM
Эффекты и анимация
Функции обратного вызова
АЯКС
Методы GET и POST

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

Удачного обучения!

Продолжить чтение о JavaScript

Начать обсуждение

Какой инструмент JavaScript вы предпочитаете использовать? Была ли эта статья полезна? Дайте нам знать в комментариях ниже!