javascript, jQuery & Node.js

jQuery 복습~

yy_dd2 2021. 10. 20. 17:24
반응형

자꾸 사용했던것들도 어떻게 사용하는지 까먹는데 한번 더 하고 나면 오래 기억에 남는거 같다

다시 하는 jQuery 복습~ 다음번엔 AJAX를 복습하려한다 jquery와 json을 사용하는걸로 기억하는데

학원 다니면서 너무 많은걸 배웠던터라 복습이 필요하다.

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"  />
    <!-- <script type="text/javascript" src="jquery.js" ></script> -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul id="list">
      <li>empty</li>
      <li>empty</li>
      <li>empty</li>
      <li>empty</li>
  </ul>
  <input type="button" id="execute_btn" value="execute">
  <input type="button" id="empty_btn" name="" value="empty" style="display:none">
  <script type="text/javascript">
    // jQuery의 제약어 $
    // $('#list li').text('coding everybody');
    $('#execute_btn').click(function(){
      $('#list li').text('coding everybody');
      $('#execute_btn').css( "display", "none" );
      $('#empty_btn').css( "display", "block" );
    })
    $('#empty_btn').click(function(){
      $('#list li').text('coding empty');
      $('#execute_btn').css( "display", "block" );
      $('#empty_btn').css( "display", "none" );
    })
  </script>
</body>
</html>

 

 

제이쿼리 연결하는건 https://jquery.com/download/

홈페이지를 통해서 하면되고 파일내용을 복사해서 새파일을 만들거나 인터넷에서 바로 끌어와 쓸수있게 링크를 걸거나

    <!-- <script type="text/javascript" src="jquery.js" ></script> -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js">

 

버튼  id="execute_btn"  클릭하면 ul li 안에 empty의 내용이 모두 coding everybody로 바뀌는 것 까지가 생활코딩에서 일러준 내용

 

그리고 나는 여기에 하나를 더해

<input type="button" id="empty_btn" name="" value="empty" style="display:none">

버튼을 만들고

이 버튼은 처음에 감춰져있다가 execute_btn 버튼을 누르면 나타나고 execute_btn의 버튼은 사라지도록 만들기

그리고 ul li 의 내용도 다시 돌아오게 만들었다~

 

생활코딩의 유투브 내용을 다 듣기엔 이미 아는 내용들이라 그냥 작성된 코드만 봤고

조금 더 스스로 코딩해서 복습했다~

 

 

반응형