Первые шаги с jQuery
Первые шаги с jQuery
«Первые шаги с jQuery» — бесплатный урок jQuery Academy на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 1 уроков всего.
Введение
Здравствуйте!
Чтобы использовать библиотеку jQuery, сначала нужно добавить её в HTML-документ.
В примере ниже адрес библиотеки jQuery добавлен в качестве значения атрибута src между тегами head.
Теперь библиотека jQuery готова к использованию в нашем проекте.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>Выбор в jQuery
Чтобы выполнять операции с элементами HTML (теперь мы будем называть их DOM), сначала нужно выбрать нужный элемент.
В jQuery для выбора используется метод $() или jQuery().
Разработчики программного обеспечения чаще используют метод $().
С помощью параметра, который мы передадим этому методу, мы указываем, какой элемент нужно выбрать.
XPath
Выражение, которое мы передаём в метод $, является селектором XPath, знакомым нам также по CSS.
Другими словами, в jQuery мы выбираем элементы HTML так же, как выбираем их в CSS.
Примеры XPath
Предположим, что наш код HTML выглядит следующим образом.
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
Выберем элементы HTML с помощью jQuery.
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')jQuery позволяет писать более краткий код
Если бы мы хотели сделать то же самое на Vanilla (обычном) JavaScript, нам пришлось бы написать больше строк кода.
jQuery позволяет писать более краткий код благодаря собственным методам.
Предупреждение
jQuery — это всего лишь библиотека, которая упрощает веб-разработку по сравнению с Vanilla JavaScript.
Информация
Ещё одно преимущество jQuery заключается в том, что все современные браузеры поддерживают написанный нами код.
Код, написанный с помощью VanillaJS, может вызывать побочные эффекты в некоторых браузерах, а jQuery благодаря предоставляемому уровню абстракции гарантирует одинаковое поведение во всех браузерах.
jQuery избавляет нас от необходимости учитывать особенности конкретного браузера при написании кода.
$(document).ready
Прежде чем перейти к основам jQuery, изучим метод $(document).ready.
Как Вы помните из темы HTML, JavaScript можно размещать в любом месте между тегами head или между тегами body в HTML.
$(document).ready 2
Предположим, что у нас есть такой код HTML, как показано ниже.
Браузер будет обрабатывать наш код, начиная с тега <!DOCTYPE html> и заканчивая закрывающим тегом </html>.
Инструкция <script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> начнёт загрузку библиотеки через code.jquery.com.
В следующей строке с помощью метода $ jQuery выбирается DOM. Однако здесь есть проблема. Если HTML-документ ещё не полностью загружен в момент вызова метода $ ('# test'), код JS завершится с ошибкой.
В этом случае используется метод $(document).ready, чтобы убедиться, что документ полностью загружен.
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$(document).ready 3
После приведённого выше определения
Нам остаётся только использовать метод $(document).ready(). Этот метод дождётся загрузки всего содержимого и затем выполнит код.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>Вопрос
Давайте, ответьте на вопрос!
Поздравляем
Поздравляем! 🎉
В этом разделе мы начали изучать библиотеку jQuery и её метод $(document).ready().
В следующем разделе мы изучим селекторы jQuery.
Часто задаваемые вопросы
Урок «Первые шаги с jQuery» бесплатный?
Да — полный текст урока «Первые шаги с jQuery» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 1 уроков всего.
Чему я научусь в уроке «Первые шаги с jQuery»?
Первые шаги с jQuery Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать jQuery Academy?
Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 1.
Сколько времени занимает урок «Первые шаги с jQuery»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке jQuery Academy?
Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.