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 с помощью простых методов.