С помощью jQuery Вы можете эффективно взаимодействовать с DOM.

Работа с DOM

jQuery содержит набор методов значительно упрощающих взаимодействие с DOM.

Методы, которые будут рассмотрены в данной главе могут применяться и для HTML и для XML документов.

Изменение содержимого элементов с помощью jQuery

С помощью метода html() Вы можете изменить или узнать внутреннее содержимое выбранного элемента.

Синтаксис:

//Узнаем содержимое выбранного элемента
$("селектор").html();
//Изменим содержимое выбранного элемента
$("селектор").html("новое содержимое");

Пример

$(document).ready(function(){

   $("#but1").click(function(){
      $("#par1").html("<b>jQuery</b> - это JavaScript библиотека, значительно 
      упрощающая написание кода.");
   });
   $("#but2").click(function(){
      $("#par2").html("jQuery значительно облегчает взаимодействие с DOM.");
   });
   $("#but3").click(function(){
      alert($("#par1").html());
   });
   $("#but4").click(function(){
      alert($("#par2").html());
   });

});

Попробовать в редакторе

Быстрый просмотр

С помощью метода append() Вы можете вставить произвольный текст после внутреннего содержимого выбранного элемента.

С помощью метода prepend() Вы можете вставить произвольный текст перед внутренним содержимым выбранного элемента.

Синтаксис:

//Добавим текст после внутреннего содержимого элемента
$("селектор").append("произвольный текст");
//Добавим текст перед внутренним содержимым элемента
$("селектор").prepend("произвольный текст");

Пример

$(document).ready(function(){
  
   $("#but1").click(function(){
      $("#par1").prepend("<b>jQuery</b> - это  ");
   });
   $("#but2").click(function(){
      $("#par1").append(" значительно упрощающая написание кода.");
   });
   $("#but3").click(function(){
      $("body").append("<p>Я добавленный абзац.</p>");
   });
});

Попробовать в редакторе

Быстрый просмотр

С помощью метода attr() Вы можете узнать или изменить содержимое указанного атрибута у выбранного элемента.

С помощью метода removeAttr() Вы можете удалить указанный атрибут у выбранного элемента.

//Узнаем значение произвольного атрибута
$("селектор").attr("атрибут");
//Установим новое значение произвольному атрибуту
$("селектор").attr("атрибут", "новое значение");
//Удалим атрибут
$("селектор").removeAttr("атрибут");

Пример

$(document).ready(function(){

   $("#but1").click(function(){
      alert($("#anchor1").attr("href"));
   });
   $("#but2").click(function(){
      $("#anchor1").attr("href","https://wisdom-web.info/JQ/");
   });
   $("#but3").click(function(){
      $("#anchor1").removeAttr("href");
   });
});

Попробовать в редакторе

Быстрый просмотр

Метод wrap позволяет "обернуть" выбранный элемент указанными тэгами.

$("селектор").wrap("<нач_тэг><кон_тэг>");

Пример

$(document).ready(function(){

   $("#but1").click(function(){
       $("#par1").wrap("<i></i>");
   });
   $("#but2").click(function(){
       $("#par2").wrap("<b></b>");
   });
   $("#but3").click(function(){
       $("#par3").wrap("<div id='wrap1'></div>");
   });

});

Попробовать в редакторе

Обратите внимание: полный список всех существующих методов jQuery для работы с DOM с примерами использования Вы найдете в нашем jQuery справочнике.

Сделайте сами

Задание 1 реализуйте подпункты перечисленные ниже путем добавления на страницу соответствующего jQuery кода:

После нажатия на кнопку с id=but1 содержимое невидимого абзаца с id=par1 должно быть считано и вставлено в абзац с id=par2.
После нажатия на кнопку с id=but2 в абзацы par3, par4, par5 и par6 должны добавляться недостающие слова. Слова при вставке должны быть выделены жирным шрифтом.
После нажатия на кнопку с id=but3 элементы с id=href1 и id=par7 должны стать оформленными соответственно своему содержимому.
После нажатия на кнопку с id=but4 элементы должны стать оформленными соответственно своему содержанию. (Необходимые стили уже заданы, нужно только обернуть абзацы в тэги с соответствующими id - style1, style2, style3, style4.)

Пример

$(document).ready(function(){

//Пишите код здесь

});

Попробовать в редакторе

« Предыдущая глава Следующая глава »