습관제작소

22-11-24 JavaScript jQuery 본문

Programing Language/JavaScript

22-11-24 JavaScript jQuery

KUDO 2022. 11. 25. 01:34

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <title>Hello, world!</title>
  </head>
  <body>

    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <span class="navbar-brand">Navbar</span>
          <button  class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </nav> 
      <!-- 클래스를 탈부착 하는 방법으로 디스플레이를 만져보자 -->
      <ul class="list-group" id="test1">
        <li class="list-group-item active" aria-current="true">An active item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
        <li class="list-group-item">A fourth item</li>
        <li class="list-group-item">And a fifth one</li>
      </ul>

      <p class="hello">안녕</p>
      <p class="hello">안녕</p>
      <p class="hello">안녕</p>
      <p class="hello">안녕</p>
      <button id="test-btn">버튼</button>

      <script>
      // text 바꾸기
        $('.hello').html('바보');
      // css   
        $('.hello').css('color','red');
      // class   
        $('.hello').toggleClass('show')
      // 이벤트  
        $('#test-btn').on('click', function(){
            $('.hello').slideUp();
        })

      </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  </body>
</html>

'Programing Language > JavaScript' 카테고리의 다른 글

22-11-24 JavaScript 서브메뉴 만들기  (0) 2022.11.25
22-11-23 JavaScript addEventListener  (0) 2022.11.23
22-08-21 JavaScript 연산자  (0) 2022.08.21
22-08-15 JavaScript 현재시각  (0) 2022.08.15
22-08-06 JavaScript (나이 계산기)  (0) 2022.08.06
'Programing Language/JavaScript' Related Articles more
Comments