Базовый синтаксис jQuery включает использование селектора(селектора в стиле CSS) и методов для управления выбранными элементами. Вот несколько основных примеров синтаксиса jQuery:
Выбор элементов
-
Выбор элементов по имени HTML-тега:
$("tagname")Пример:$("p")выбираются все<p>элементы на странице. -
Выбор элементов по классу CSS:
$(".classname")Пример:$(".myClass")выбираются все элементы с классом «myClass». -
Выбор элементов по идентификатору:
$("#idname")Пример:$("#myElement")выбирает элемент с идентификатором "myElement". -
Выбор элементов по атрибуту:
$("[attribute='value']")Пример: выбирает элементы с установленным$("[data-type='button']")атрибутом «кнопка».data-type -
Объединение вариантов:
$("tagname.classname"),$("#idname .classname"), ...
Управление выбранными элементами
-
Изменение содержимого элемента:
.html(),.text()Пример:$("#myElement").html("New content")задает HTML-содержимое элемента с идентификатором «myElement». -
Изменение атрибутов элемента:
.attr(),.prop()Пример:$("img").attr("src", "newimage.jpg")изменяетsrcатрибут всех<img>элементов. -
Управление классами CSS элемента:
.addClass(),.removeClass(),.toggleClass()Пример:$("#myElement").addClass("highlight")добавляет класс «highlight» к элементу с идентификатором «myElement». -
Скрытие/отображение элементов:
.hide(),.show(),.toggle()Пример:$(".myClass").hide()скрывает все элементы с классом "myClass". -
Обработка событий на элементах:
.click(),.hover(),.submit(), ... Пример:$("button").click(function() { ... })регистрирует обработчик события клика
Работа с коллекциями элементов
-
Итерация по коллекции:
.each()Пример:$("li").each(function() { ... })итерация по каждому<li>элементу на странице. -
Фильтрация коллекции:
.filter(),.not()Пример:$("div").filter(".myClass")фильтрует<div>элементы и выбирает элементы с классом "myClass". -
Вставка элементов в коллекцию:
.append(),.prepend(),.after(),.before()Пример:$("#myElement").append("<p>New paragraph</p>")добавляет новый<p>элемент к элементу с идентификатором "myElement".
Эффекты и анимация
-
Выполнение эффектов постепенного появления/исчезновения:
.fadeIn(),.fadeOut()Пример:$("#myElement").fadeIn(1000)постепенное появление элемента с идентификатором «myElement» в течение 1 секунды. -
Выполнение эффектов slideUp/slideDown:
.slideUp(),.slideDown()Пример:$(".myClass").slideUp(500)сдвигает вверх все элементы с классом «myClass» в течение 0,5 секунды. -
Выполнение пользовательских анимаций:
.animate()Пример:$("#myElement").animate({ left: '250px', opacity: '0.5' })анимирует элемент с идентификатором «myElement», изменяя его позицию слева и прозрачность.
Эти примеры демонстрируют, как использовать различные аспекты базового синтаксиса jQuery для выбора элементов, управления их свойствами и применения эффектов или анимации. jQuery предлагает богатый набор методов и функций для упрощения и улучшения задач веб-разработки.