Работа со свойствами и атрибутами элементов в jQuery

Задание:

Продемонстрировать, как осуществляется работа со свойствами и атрибутами элементов html-документа в jQuery.

html-документ (index.html):

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Работа со свойствами и атрибутами элементов в jQuery</title>
     <link rel="stylesheet" href="styles.css">
     <script src="/js/jquery-3.6.0.min.js"></script>
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <a href="/lessons/06/" id="lessonSixLink">Урок #6</a><br><br>
     <a href="/lessons/07/" id="lessonSevenLink">Урок #7</a><br><br>
     <a href="/lessons/08/" id="lessonEightLink">Урок #8</a><br><br>
     <a href="/lessons/09/" id="lessonNineLink">Урок #9</a><br><br>
     <a href="/lessons/10/" id="lessonTenLink">Урок #10</a><br><br>
   
     <ul data-year="2010" data-description="lang">
      <li>Пункт 1</li>
     </ul>
   
     <button id="myButton">Нажми меня</button>
    </body>
   
   </html>

CSS–разметка (styles.css):

   #myButton		{ width: 140px; height: 30px; border: 1px solid #d0d0d0; background-color: #f0f0f0; color: #000000; outline: none; margin-top: 20px; }

JS–скрипты (scripts.js):

   window.onload = function()
   {
    document.getElementById('myButton').onclick = function()
    {
     $('a').each(function(index, element)
     {
      alert($(element).prop('href'));
     });
   
     $('a').each(function(index, element)
     {
      alert($(element).attr('href'));
     });
   
     alert($('ul').data('year'));
     alert($('ul').data('description'));
   
     $('a').first().prop('innerHTML','yandex.ru');
     $('a').first().prop('href','https://yandex.ru/');
    };
   };

Работа со свойствами и атрибутами элементов в jQuery

Задание:

html-документ (index.html):

CSS–разметка (styles.css):

JS–скрипты (scripts.js):

Результат: