Библиотека jQuery: как подключить и использовать. Создание игры «Найди пару»

Автор На чтение 11 мин Просмотров 499 Комментарии 0 Опубликовано

В этой статье вы узнаете, что такое библиотека jQuery, где ее скачать, для чего она нужна, какие имеет особенности и преимущества использования. Также разберем два варианта подключения библиотеки на сайт. А в конце статьи продемонстрируем, как использовать jQuery — создадим простую версию известной игры «Найди пару».

Содержание
  1. Что такое jQuery
  2. Возможности
  3. Способы подключения
  4. Со своего сайта
  5. С помощью CDN
  6. Проверка подключения
  7. Особенности работы с jQuery
  8. Пример: игра «Найди пару»

Что такое jQuery

jQuery — очень популярная JavaScript-библиотека, которая намного упрощает работу с js-кодом. Она проста в освоении и использовании, компактная, имеет ясный синтаксис и заметно сокращает код, написанный на нативном JS.

Сравните две следующие строки кода. Одна написана на чистом JavaScript, вторая — с использованием этой библиотеки.

// Получим значение элемента с идентификатором "content"

// JavaScript
const val = document.getElementById("content").value;

// jQuery
const val = $("#content").val();

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

Возможности

Применение этой библиотеки упрощает выполнение основных задач на JavaScript:

  • Выбор элементов на веб-странице и проведение различных манипуляций над ними.
  • Обработка событий, возникающих на странице.
  • Создание анимации различного уровня сложности.
  • Отправка AJAX-запросов на сервер и получение ответов.
  • Исправление различных багов браузера, поддержка кроссбраузерности и многое другое.

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

Способы подключения

Библиотека jQuery — это обычный файл с расширением .js. Поэтому она подключается, как и любой файл JavaScript — с помощью тега script:

<head>
    <script src="path_to_jquery/jquery-3.6.1.min.js" defer></script>
</head>

Обратите внимание, что мы используем атрибут defer у тега script, так как библиотека работает с DOM-деревом, которое сперва должно быть полностью построено.

Где же взять саму библиотеку?

Существуют два способа, как подключить jQuery к странице: загрузить на свой сайт файл с библиотекой и с помощью CDN.

Со своего сайта

Чтобы подключить библиотеку jQuery со своего сайта, ее нужно сперва скачать с официального сайта. В источнике предлагаются несколько разновидностей файла библиотеки: uncompressed (исходный код), compressed (сжатый), и, в свою очередь, эти оба файла имеют вариант slim — без модулей ajax и effects.

Используйте файл uncompressed для разработки, отладки проекта и ознакомления с кодом jQuery. В этом случае можно пренебречь оптимизацией кода в пользу удобства работы с ним. Но при развертывании сайта в рабочую среду (production) заменяйте файл uncompressed на compressed — этот вариант кода специально оптимизирован для таких целей, что позволит ускорить работу веб-ресурса.

Если в разработке не применяются модули ajax и effects библиотеки, рекомендуется установить на сайте облегченный вариант uncompressed slim (для разработки) или compressed slim (для production). Без неиспользуемого кода файл будет еще легче, что также положительно скажется на скорости рабочего проекта.

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

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

Скачать jQuery

Скачанный js-файл поместите в папку для скриптов проекта. Затем добавьте на страницу в область head вашего сайта тег script, указав в его атрибуте путь к файлу.

<head>
    <script src="js/libs/jquery-3.6.1.min.js" defer></script>
</head>

Теперь на вашем сайте подключена библиотека jQuery. Далее рассмотрим альтернативный способ ее добавления.

С помощью CDN

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

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

Есть несколько популярных CDN, где можно получить ссылку для подключения jQuery:

Например, мы хотим использовать CDN от Google. Переходим по ссылке, копируем одну из предлагаемых ссылок с нужной версией библиотеки и вставляем атрибут src тега script на своем сайте:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js" defer></script>
</head>

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

Теперь наш сайт использует Google CDN для подключения jQuery. Как проверить, что библиотека действительно подключена?

Проверка подключения

Чтобы убедиться, что jQuery присутствует на странице, воспользуемся следующим кодом:

window.onload = function() {
    if (window.jQuery) {
        alert("jQuery готова к работе!");	           
    } else {
        alert("jQuery не найден...");	
    }
};

В случае успешного подключения библиотеки после загрузки всей страницы появится сообщение «jQuery готов к работе!», в противоположном случае мы увидим «jQuery не найден…».

Когда код библиотеки добавлен, можно приступать к разработке. Но сперва разберем некоторые важные моменты.

Особенности работы с jQuery

Исследуя принципы работы рассматриваемой библиотеки с DOM-деревом, первым делом отметим такое понятие, как «объект jQuery», который создается посредством передачи в качестве параметра в функцию jQuery() (или ее псевдоним $() — знак доллара) строки с названием CSS-селектора. Например, мы хотим поработать с элементом, имеющим CSS-класс box, используя библиотеку. Для этого создадим объект jQuery таким образом:

// Временно создадим переменную "box", чтобы сохранить туда объект. Потом она нам не понадобится
const box = jQuery(".box");
// или
const box = $(".box");

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

Первый вариант — перевод jQuery в режим no conflict путем вызова метода noConflict() и создание новой переменной к качестве псевдонима jQuery:

// Новая переменная — $j
const $j = jQuery.noConflict(); 
const box = $j(".box");

Если нет желания создавать новый псевдоним, можно воспользоваться вторым вариантом — передача параметра $ в функцию, которая выполняется после загрузки страницы:

jQuery.noConflict();
jQuery(document).ready(function($) {
    const box = $(".box");
});

Третий вариант — немедленно вызываемая функция:

jQuery.noConflict(); 
(function($) {
    const box = $(".box");
 })(jQuery);

У объекта jQuery есть методы, с помощью которых можно совершать различные действия над выбранным элементом. Чтобы вызывать метод, нужно к объекту через точку добавить имя метода с круглыми скобками. Например, мы хотим просто спрятать элемент с классом box. Для этого используем метод hide():

// Здесь уже уберем const box из-за ненадобности
jQuery.noConflict();
jQuery(document).ready(function($) {
    $(".box").hide();
});

Методы могут принимать различные значения. Например, методу hide() можно указать скорость, с которой элемент будет исчезать. Она устанавливается либо в миллисекундах, либо строками slow и fast, которые идентичны 200 и 600 миллисекундам соответственно. Сделаем исчезновение нашего элемента медленным:

jQuery.noConflict();
jQuery(document).ready(function($) {
    $(".box").hide("slow");
});

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

jQuery.noConflict();
jQuery(document).ready(function($) {
    $(".action").click(function() {
        $(".box").hide("slow");
    });
});

В завершение приведем пример — создадим простой вариант известной игры «Найди пару».

Пример: игра «Найди пару»

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

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

Игра продолжается до тех пор, пока все пары не будут найдены. Чтобы начать игру, нужно нажать на кнопку «Начать игру!».

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

HTML:

<div class='demoFindPair'>
    <div class='demoFindPair__card'>
        <div class='demoFindPairCard'>
            <div class='demoFindPairCard__inner'>
                <div class='demoFindPairCard__back'></div>
                <div class='demoFindPairCard__front'></div>
            </div>
        </div>        
    </div>
</div>

<div class='demoFindPairWin' id='demoFindPairWin'>Вы победили!</div>

<button class='demoFindPairStart' id='demoFindPairStart'>Начать игру!</button>

CSS:

.demoFindPair {
    max-width: 730px;
    flex-wrap: wrap;
    border: 7px solid #000;
    display: none;
}

.demoFindPair.started {
    display: flex;
}

.demoFindPair__card {
    width: 25%;
    height: 100px;
    border: 2px solid black;
}

.demoFindPairCard {
    width: 100%;
    height: 100%;
    cursor: pointer;
    perspective: 1000px;
}

.demoFindPairCard.guessed {
    opacity: 0;
}

.demoFindPairCard__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.demoFindPairCard__back, .demoFindPairCard__front {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.demoFindPairCard__back {
    background: #666;
}

.demoFindPairCard__front {
    background-color: #00c1c5;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotateY(180deg);
}

.demoFindPairCard.open .demoFindPairCard__inner {
    transform: rotateY(180deg);
}

.demoFindPairWin {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    display: none;
}

.demoFindPairStart {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    word-break: break-word;
    box-sizing: border-box;
    transition: all .3s;
    background: #00c1c5;
    color: #fff;
    border-radius: 12px;
    padding: 10px 24px;
    font-size: 1.125em;
    border: none;
}

.demoFindPairStart:active,
.demoFindPairStart:hover,
.demoFindPairStart:focus {
    outline: none;
}

.demoFindPairStart:hover {
    background: #fff;
    color: #00c1c5;
}

jQuery:

jQuery.noConflict();
jQuery(document).ready(function($) {
    // Запускаем игру при нажатии на кнопку.
    // Кнопку прячем после старта
    $('#demoFindPairStart').click(function () {
        $(this).hide();
        $('.demoFindPair').addClass('started');
        createGameField();
        setCardValues();
    });

    // Создаем игровое поле, клонируя 15 раз первую карточку
    function createGameField() {
        const cardWrapper = $('.demoFindPair__card');
        for (let i = 0; i < 15; i++) {
            cardWrapper.clone(true).appendTo('.demoFindPair');
        }
    }

    // Устанавливаем значения карточек
    function setCardValues() {
        // Заполняем список ссылок на изображения
        // (используйте ваши ссылки)
        const imageLinks = [
            '/wp-content/uploads/2022/11/cat-alexander.jpg',
            '/wp-content/uploads/2022/11/cat-alvan.jpg',
            '/wp-content/uploads/2022/11/cat-amber.jpg',
            '/wp-content/uploads/2022/11/cat-cedric.jpg',
            '/wp-content/uploads/2022/11/cat-edgar.jpg',
            '/wp-content/uploads/2022/11/cat-manja.jpg',
            '/wp-content/uploads/2022/11/cat-remi.jpg',
            '/wp-content/uploads/2022/11/cat-zoe.jpg'
        ];

        // Подготавливаем массив с парами "номер карточки - ссылка на изображение"
        const cardValues = [];
        for (let i = 1; i <= 8; i++) {
            for (let j = 0; j < 2; j++) {
                cardValues.push([i, imageLinks[i-1]]);
            }
        }

        // Перемешиваем карточки
        shuffleCardValues(cardValues);

        // Привязываем номера и изображения к карточкам
        $('.demoFindPairCard').each(function(index) {
            const cardNumber = cardValues[index][0];
            const cardImageLink = cardValues[index][1];
            $(this).attr('data-number', cardNumber);
            $(this).find('.demoFindPairCard__front').css('background-image', 'url(' + cardImageLink + ')');
        });
    }

    function shuffleCardValues(cardValues) {
        cardValues.sort(function() {
            return 0.5 - Math.random();
        });
    }

    // Обрабатываем каждое нажатие на карточку
    $('.demoFindPairCard').click(function() {
        // Если идет анимация открытия и закрытия карточки
        // либо пара угадана
        // либо карточка уже отрыта,
        // то запрещаем изменение ее состояния
        const playField = $('.demoFindPair');
        if (
            playField.hasClass('disabled')
            || $(this).hasClass('guessed')
            || $(this).hasClass('open')
        ) {
            return;
        }

        // Отрываем карточку
        $(this).addClass('open');

        // Если на поле две открытые карточки,
        // то деактивируем возможность открывать новые
        // и проверяем пару
        const openCards = $('.demoFindPairCard.open');
        if (openCards.length === 2) {
            playField.addClass('disabled');
            checkPair();
        }
    });

    // Проверяем пару
    function checkPair() {
        // Собираем номер открытых карточек
        const openCards = $('.demoFindPairCard.open');
        const pairValues = [];
        openCards.each(function() {
            pairValues.push($(this).data('number'));
        });

        // Сравниваем номера.
        // Если одинаковые, то скрываем пару.
        // Если количество угаданных номеров равно количеству карточек на поле,
        // прячем игровое поле и показываем сообщение о победе в игре
        const playField = $('.demoFindPair');
        setTimeout(function() {
            if (pairValues[0] === pairValues[1]) {
                $('.demoFindPairCard[data-number="' + pairValues[0] + '"]').addClass('guessed');
                if ($('.demoFindPairCard.guessed').length === 16) {
                    playField.hide();
                    $('#demoFindPairWin').show('slow');
                }
            }
            openCards.removeClass('open');
            playField.removeClass('disabled');
        }, 1300);
    }
});

Кнопка ниже запускает созданную нами игру:

Вы победили!

Понравилась ли вам библиотека jQuery? Напишите в комментариях!

Оцените статью
DevReflex
Добавить комментарий

© 2025 DevReflex Карта сайта Контакты Политика конфиденциальности
Этот сайт использует cookies для хранения данных. Продолжая использовать сайт, Вы даете согласие на работу с этими файлами.