Селекторы 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>
     <div>
      <p id="myParagraph">Одной из&nbsp;важных функциональных возможностей <span class="mySpan">jQuery</span> является выборка элементов <nobr>html-документа</nobr>.</p>
      <p class="secondParagraph">Второй параграф</p>
      <p class="thirdParagraph">Третий параграф</p>
      <p class="fourthParagraph">Четвертый параграф</p>
     </div>
     <button id="myButton">Нажми меня</button>
    </body>
   
   </html>

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

   div			{ border: 1px solid #d0d0d0; }
   
   .mySpan		{ background-color: #ffffff; color: #000000; font-weight: bold; }
   
   #myParagraph		{ background-color: #0000ff; color: #ffffff; }
   #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()
    {
     $("div").css('border', '1px solid #ff0000');
     $("#myParagraph").css('background-color', '#ffff00');
     $("#myParagraph").css('color', '#000000');
     $(".mySpan").css('color', '#ffffff');
     $(".mySpan").css('background-color', '#ff0000');
     $(".mySpan").css('font-style', 'italic');
     $(".secondParagraph, .thirdParagraph").css('color', '#ff00ff');
     $("p[class='fourthParagraph']").css('color', '#00ffff');
    };
   };

Селекторы jQuery

Задание:

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

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

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

Результат: