jQuery для начинающих
jQuery для начинающих
«jQuery для начинающих» — бесплатный урок jQuery Academy на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 1 уроков всего.
Введение
Здравствуйте!
Добро пожаловать на курс «jQuery для начинающих».
В этом разделе мы начнём подробно изучать jQuery.
Введение 2
Перед началом этого курса
необходимо пройти следующие курсы:
- Основы HTML
- Основы CSS
- Основы JavaScript
- Если Вы уже знакомы с этими темами, можете продолжить курс.
Начнём
Начнём.
Прежде всего ответим на вопрос, для чего используется jQuery.
Перед ответом на вопрос повторим основы
Перед ответом на вопрос повторим основы.
HTML — это язык разметки. То есть это язык текстовой разметки, а не язык программирования. Он не связан с такими концепциями, как объектно-ориентированное программирование. Другими словами, в его структуре нет объектов: мы работаем с тегами HTML, атрибутами и так далее.
JavaScript выполняет операции с DOM
Нередко нам требуется выполнять операции с элементами HTML на веб-страницах. Чтобы обеспечить такую возможность и сделать элементы HTML доступными для JS, используется модель, называемая DOM (Document Object Model).
JavaScript выполняет операции с DOM, который представляет собой объектную модель веб-страницы. Это называется манипуляцией с DOM.
Пример
Рассмотрим пример.
У нас есть элемент кнопки, как в примере ниже, с текстом «Not Clicked». При нажатии кнопки мы изменим её текст на «Clicked».
Для этого нужно выполнить манипуляцию с DOM на языке JavaScript.
В курсе «Введение в JavaScript» мы узнали, как управлять веб-документом с помощью JavaScript. jQuery — это библиотека, которая позволяет выполнять манипуляции с DOM с помощью JavaScript более кратко и лаконично.
<!--Initial Element -->
<button id="my-button">Not Clicked</button>
<!---Desired Element after clicking the button-->
<button id="my-button">Clicked</button>Вопрос
Вопрос для Вас!
Пример 2
В приведённом ниже примере мы создали кнопку с идентификатором my-button.
Теперь обратимся к этому элементу с помощью JavaScript через DOM.
При нажатии кнопки мы обратимся к DOM с помощью кода JS и изменим свойство innerHTML элемента с идентификатором my-button на «click».
<button id="my-button">
Not Clicked
</button>
<script>
let myButton = document.getElementById('my-button');
myButton.addEventListener("click",
function(){
myButton.innerHTML = "Clicked"
})
</script>Предупреждение
jQuery — это всего лишь библиотека, созданная для упрощения использования функций и методов ядра JS.
Другими словами, она позволяет выполнять многие операции, доступные в VanillaJS, используя более простой и удобный для чтения синтаксис.
Разбор примера
Разберём код.
let myButton = document.getElementById('my-button');
С помощью метода getElementById мы присваиваем объект document языка JavaScript переменной с именем myButton.
myButton.addEventListener("click", function(){
myButton.innerHTML = "Clicked"
})
Затем мы прослушали событие нажатия кнопки и изменили её содержимое.
Мы выполнили манипуляцию с DOM, используя основные возможности языка без библиотеки или фреймворка, то есть применили нативный JavaScript, также называемый VanillaJS.
Напишем тот же код с помощью jQuery и воспользуемся возможностями, которые предоставляет библиотека jQuery.
Предупреждение
Понятие, которое во многих местах обозначается как VanillaJS, на самом деле означает использование только чистых базовых объектов, методов и функций JavaScript, а также возможностей, предоставляемых браузером.
Пример jQuery
Ниже мы реализовали предыдущий пример с помощью jQuery.
Будьте внимательны и не сокращайте код слишком сильно, опуская синтаксис.
<script>
$('#my-button').on('click', function(){
$(this).text('Clicked');
})
</script>
<button id="my-button">Not Clicked</button>Поздравляем
Поздравляем! 🎉
В этом разделе мы начали изучать jQuery и поняли, насколько 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 — локальная установка не требуется.