close

Манипуляции с DOM с помощью jQuery — методы и примеры

Управление DOM с помощью jQuery позволяет вам изменять, добавлять, удалять или взаимодействовать с данными на веб-странице, ориентируясь на структуру DOM. jQuery предоставляет удобные методы и функции для выполнения задач манипулирования DOM.

Вот пояснения к каждому разделу вместе с конкретными примерами:

 

Выбор элементов

  • $("p"): выделить все <p> элементы на странице.
  • $(".myClass"): выберите все элементы с классом myClass.
  • $("#myElement"): Выберите элемент с идентификатором myElement.
  • $("parentElement").find(".childElement"): выберите все дочерние элементы с классом childElement в parentElement.

Пример:

$("p").css("color", "red");

 

Изменение содержимого

  • $("#myElement").html("<b>Hello World</b>"): Установите содержимое HTML для элемента с идентификатором myElement.
  • $("p").text("New text"): установить текстовое содержимое для всех <p> элементов.

Пример:

$("p").text("New paragraph");

 

Добавление и удаление элементов

  • $("ul").append("<li>New item</li>"): добавить <li> элемент в конец ненумерованного списка( <ul>).
  • $(".myClass").remove(): удалить все элементы с классом myClass со страницы.

Пример:

$("ul").append("<li>Item 4</li>");

 

Изменение атрибутов и классов

  • $("img").attr("src", "new-image.jpg"): изменить src значение атрибута для всех <img> элементов.
  • $("#myElement").addClass("newClass"): добавить класс newClass к элементу с идентификатором myElement.
  • $("#myElement").removeClass("oldClass"): удалить класс oldClass из элемента с идентификатором myElement.

Пример:

$("img").attr("alt", "New Image");

 

Обработка событий

$("button").click(function() { }): Зарегистрируйте функцию обработчика событий при <button> щелчке элемента.

Пример:

$("button").click(function() {  
  alert("Button clicked!");  
});

 

Эффекты и анимация

  • $("#myElement").hide(): скрыть элемент с идентификатором myElement.
  • $("#myElement").show(): Показать элемент с идентификатором myElement.
  • $("#myElement").fadeOut(): применить эффект затухания к элементу с идентификатором myElement.
  • $("#myElement").fadeIn(): Выполните эффект плавного появления элемента с идентификатором myElement.

Пример:

$("#myElement").fadeOut(1000, function() {  
  console.log("Fade out complete");  
});