jQuery - это библиотека JavaScript, которая упрощает работу с DOM и облегчает создание динамических веб-страниц. Она предоставляет простой, но мощный API для работы с элементами HTML и CSS, обработки событий и многого другого.
Для начала работы с jQuery, вам нужно скачать библиотеку или использовать ее с помощью ссылки на CDN. Для примера, давайте использовать ссылку на CDN для загрузки jQuery на страницу:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
После того, как мы загрузили jQuery, мы можем начать использовать его функции. Давайте рассмотрим несколько примеров.
Одна из самых мощных функций jQuery - это селекторы, которые позволяют выбирать элементы на веб-странице. Для выбора элементов мы используем функцию $
, которая принимает селектор в качестве параметра.
Давайте рассмотрим несколько примеров:
// выбираем все элементы <p> на странице var paragraphs = $('p'); // выбираем все элементы с классом "box" var boxes = $('.box'); // выбираем элемент с id "my-element" var myElement = $('#my-element');
Здесь мы используем $
для выбора элементов на странице. Селекторы в jQuery работают аналогично CSS-селекторам, поэтому вы можете использовать все те же правила для выбора элементов.
jQuery позволяет легко изменять содержимое элементов на странице. Для этого мы можем использовать функции html()
и text()
.
html()
позволяет задавать содержимое элемента в виде HTML, а text()
- в виде текста.
html:
<div id="my-div"></div>
js:
// устанавливаем HTML содержимое для элемента с id "my-div" $('#my-div').html('<p>Привет, мир!</p>'); // устанавливаем текстовое содержимое для элемента с id "my-div" $('#my-div').text('Привет, мир!');
Здесь мы использовали функции html()
и text()
для установки содержимого элемента с id "my-div". Обратите внимание, что функция html()
принимает строку, содержащую HTML-код.
jQuery также позволяет изменять атрибуты элементов на странице. Для этого мы можем использовать функцию attr()
.
html
<img id="my-image" src="old-image.jpg">
js
// изменяем атрибут "src" у элемента с id "my-image" $('#my-image').attr('src', 'new-image.jpg');
Здесь мы использовали функцию attr()
для изменения атрибута "src" у элемента с id "my-image". Обратите внимание, что первый параметр функции - это имя атрибута, а второй параметр - новое значение.
jQuery также упрощает обработку событий на странице. Для этого мы можем использовать функцию on()
.
html
<button id="my-button">Нажми на меня</button>
js
// обрабатываем клик на кнопке с id "my-button" $('#my-button').on('click', function() { alert('Вы нажали на кнопку!'); });
Здесь мы использовали функцию on()
для обработки события клика на кнопке с id "my-button". Когда пользователь кликает на кнопку, вызывается функция, которая выводит сообщение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Прямоугольники</title> <style> body { margin: 100; padding: 20; background-color: #f5f5f5; } </style> </head> <body> <div id="my-div"></div> <button id="my-button">Нажми на меня</button> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> // устанавливаем текстовое содержимое для элемента с id "my-div" $('#my-div').text('Привет, мир!'); // обрабатываем клик на кнопке с id "my-button" $('#my-button').on('click', function() { // устанавливаем HTML содержимое для элемента с id "my-div" $('#my-div').html('<p><b>Привет, мир!</b></p>'); alert('Вы нажали на кнопку!'); }); </script> </body> </html>
В этом уроке мы познакомились с jQuery и рассмотрели его синтаксис, API и основные функции. Мы использовали селекторы для выбора элементов на странице, функции html()
и text()
для изменения содержимого элементов, функцию attr()
для изменения атрибутов элементов и функцию on()
для обработки событий.
jQuery - мощная библиотека, которая упрощает работу с DOM и делает создание динамических веб-страниц проще и быстрее. Если вы еще не использовали jQuery, я настоятельно рекомендую начать изучение этой библиотеки прямо сейчас!
Понравилась статья? Поделитесь ею с друзьями:
Файлы для скачивания
![]() |
HTML код страницы изменения содержимого элементов + Обработка событий..txt | 1 Kb | 184 | Скачать |
Вернуться в раздел: Шпаргалки для фронтенд-разработчика. Дата публикации 1 апреля , 2023
Читайте также
Комментарии
Войдите или Зарегистрируйтесь И Вы сможете общаться на форуме и оставлять комментарии без капчи.