Как выполнить код jQuery?

jQuery Изучение

jQuery — это многофункциональная библиотека Javascript с открытым исходным кодом, которая предназначена для упрощения обхода и манипулирования деревом HTML DOM, обработки событий и анимации CSS. Он довольно популярен благодаря своим функциям, таким как легкий, быстрый, маленький и т. Д., Которые упрощают его использование. Цель использования jQuery — упростить выполнение кода javascript на веб-сайте, поскольку jQuery обертывает множество строк кода, написанного на javascript, в метод, который можно вызвать с помощью одной строки кода. По этой причине jQuery может выполнять множество общих задач, для которых требуется javascript.

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

  • Загрузите библиотеку jQuery с официального сайта
  • Используйте онлайн- ссылкиjQuery CDN

Давайте перейдем к нашему первому способу, то есть загрузке библиотеки с веб-сайта.

Метод 1. Загрузите библиотеку jQuery.

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

Объявите путь к файлу jQuery в теге <head>. <script src = «jquery-3.6.0.min.js»> </script>

Пример 1. Создайте HTML-файл и добавьте в свой HTML-файл приведенный ниже код.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Document</title>
    <script src="jquery-3.6.0.min.js"></script>
</head>
 
<body>
    <p>GeeksforGeeks</p>
</body>
 
</html>

Выход:

GeeksforGeeks

В приведенном выше коде мы добавили файл jQuery с помощью тега <script>. По сути, это все, что нам нужно сделать, чтобы добавить jQuery на нашу веб-страницу. Теперь мы можем написать код jQuery и использовать его.

Пример 2: В этом примере мы напишем код jQuery и посмотрим, как мы можем его выполнить.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Document</title>
    <script src="jquery-3.6.0.min.js"></script>
 
    <!-- jQuery code starts from here, the 
        code will change the color of text
        when button is pressed -->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").css("color", "green");
            });
        });
    </script>
 
    <button>
        Change the color of the text to Green
    </button>
</head>
 
<body>
    <p>GeeksforGeeks</p>
</body>
 
</html>

Вывод: В этом примере мы написали код для изменения цвета текста. Чтобы запустить этот код, откройте этот HTML-файл в браузере.

Давайте перейдем к следующему методу добавления jQuery, то есть с помощью jQuery CDN.

Метод 2: использование ссылки jQuery CDN

Этот способ использования jQuery довольно прост, нам не нужно ничего скачивать, но давайте кратко расскажем о CDN. CDN означает сеть доставки контента, по сути, это всемирно распределенная группа серверов для различных видов веб-сервисов, которые обеспечивают быструю доставку интернет-контента. Например, jQuery CDN содержит всю необходимую информацию, связанную с jQuery, и любой пользователь может получить к ней прямой доступ со своих серверов в любое время. Этот метод достаточно надежен и обновлен, чтобы работать с CDN jQuery или любой другой библиотекой, мы должны быть подключены к сети. Теперь посмотрим, как его можно использовать. Мы должны добавить тег <script> в наш HTML-файл, как показано ниже. Вставьте следующий код CDN в заголовок в HTML.

Ссылка jQuery CDN:

<script src = ”https://code.jquery.com/jquery-3.6.0.min.js” целостность = ”sha256- / xUj + 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej / m4 =” crossorigin = ”анонимный”> </script>

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

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Document</title>
 
    <!--jQuery CDN link-->
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
    </script>
 
    <!--jQuery code-->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").css("color", "green");
            });
        });
    </script>
 
    <button>
        Change the color of the text to Green
    </button>
</head>
 
<body>
    <p>GeeksforGeeks</p>
</body>
 
</html>

Выход:

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

Мы добавили код CDN, теперь мы снова готовы работать с jQuery. Итак, вот как мы можем выполнить наш jQuery с помощью простых методов.

Читайте также:  Введение в Apache Airflow
Оцените статью
bestprogrammer.ru
Добавить комментарий