프레임워크/JS(+jQuery)

[jQuery] 시작하기 + $(document).ready()

은돌1113 2022. 4. 15. 15:32

요즘 계속 React, Next.js를 사용하여 프로젝트를 진행하다 보니까 JavaScript는 원하는 대로 잘 쓰는 것 같은 데 jQuery는 교육원 다닐 때 겉할기로 배운 게 전부였던 것 같아서 다시 공부해보고 싶어졌다. 이상하게 HTML, CSS 보다 JS가 재미있다는... 생각이 들어서!! 다시 공부하면서 마스터해볼 생각이다.

JS, jQuery

과정

1. index.html 파일을 생성한다.

2. html:5를 입력해서 HTML 기본 틀을 생성한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>document</title>
  </head>
  <body>
  </body>
</html>

3. 태그를 하나 만들고, id는 "hello"로 설정한다.

<h2 id="hello">안녕하세요</h2>

4. 3번에서 만든 태그 아래에 <script></script> 태그를 생성하고, 아래 코드를 삽입한다.

<script>
  document.getElementById("hello").innerHTML = "안녕";
</script>

위 코드는 JQuery는 아니고, JS의 형태이다.

 

코드 해석

  • document : 웹문서
  • . : ~의
  • get : 가져오다.
  • element : HTML 요소
  • ById : 아이디에 의해서
  • . : ~의
  • innerHTML : 내부 글자
  • = : 대입
  • "안녕" : 대입할 문구

즉, 웹 문서에서 특정 id의 HTML 요소를 가져와서 내부 글자를 "안녕"으로 대입 해주세요. (바꿔 주세요.)라는 의미이다.

 

JS - 사용방법

1. 바꾸고 싶은 HTML 요소의 id(고유한 값)을 적는다. (document.getElementById("");

2. 어떤 속성을 바꿀 지 적는다. (document.getElementById("").#;

3. 선택한 속성에 어떤 값을 넣을지 적는다. (document.getElementById(""). style.color = "#");

→ 빈칸만 잘 채우면 뭐든 원하는 대로 변경 할 수 있다.

 

jQuery - 사용방법

1. head 태그 안에 jQuery를 load하는 script 코드를 추가한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery 연습</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  </head>
  <body>
  </body>
</html>

2. id가 "hello"인 h2 태그를 하나 생성하고 아래에 script 태그를 추가한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery 연습</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  </head>
  <body>
    <h2 id="hello">메로나</h2>
    <script>
      $("#hello").text("바밤바");
    </script>
  </body>
</html>

 

JS와 jQuery를 비교 해보면 JS보다 jQuery에 코드가 확실히 간결한 걸 볼 수 있다.

JS → document.getElementById("hi").innerHTML = "바밤바";
jQuery → $("#hello").text("바밤바");
 

https://www.zerocho.com/category/jQuery/post/57a9a371e4bc011500624ba3

 

www.zerocho.com

$(document).ready()

추가로 .ready는 React의 useEffect와 같은 동작을 하고, 아래와 같이 사용한다.

 

head 태그 안에 script 태그를 생성하고, 그 안에 아래 함수를 추가한다. 그러면 index.html 페이지가 로드 되었을 때

.ready 안에 콜백 함수가 호출 되면서 그 안에 있는 alert()가 실행된다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery 연습</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
      $(document).ready(function () {
        alert("준비 끝");
      });
    </script>
  </head>
  <body></body>
</html>