lesson-1/jquery/v1.html

<html>
<head>
  <title>Selectors</title>
  <style>
    .output {
      background-color: yellow;
      margin: 10px;
    }
    .output1 {
      width: 50px;
      height: 50px;
      text-align: center;
    }
    .output2 { padding: 10px; }
    .red { background: red; }
    .blue { background: blue; }
  </style>
</head>
<body>
<button id="red">Red</button>
<button id="blue">Blue</button>
<div class="output output1"></div>
<div class="output output2">Lorem ipsum, ...</div>

<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>

<script>
  $('#red').click(function() {
    $('.output').css('backgroundColor', 'red')
  })

  $('#blue').click(function() {
    $('.output').css('backgroundColor', 'blue')
  })
</script>
</body>
</html>