«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
반응형
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

java,javascript,android,php,sql,공부용,메모용

jQuery 복습~ 본문

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 의 내용도 다시 돌아오게 만들었다~

 

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

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

 

 

반응형

'javascript, jQuery & Node.js' 카테고리의 다른 글

객체 만들고 값 변경하고 추가하고 삭제하기 Object - 객체지향 자바스크립트 01  (0) 2022.04.25
자바스크립트 onclick 버튼 배경 바꾸기, querySelector, querySelectorAll, while, for, 배열  (0) 2022.04.24
자바스크립트 객체만들기 보여주기 반복문 사용해서 보여주기  (0) 2021.10.14
javascript 문서로딩 load 이벤트 실행, html 아이디 클래스 선택 addEventListener / querySelector & getElementById / LastModified / 현재시간  (0) 2021.03.10
javascript 간단한 event / 버튼클릭 마우스오버 alert / 클릭하면 random값 / 자바스크립트로 style 변경하기  (0) 2021.03.10
'javascript, jQuery & Node.js' Related Articles more
Comments