박시은

(❁´◡`❁)

1 분 소요


제이쿼리를 왜 사용할까?

➡️ 순수 js만 사용하면 길고 복잡하니까 JQuery를 쓴다! js는 코드가 복잡하고, 브라우저 간 호환성 문제도 고려해야 해서, JQuery라는 라이브러리가 등장하게 되었다.


  • 제이쿼리 사용 전 순수 js만 사용한 코드 → 길고 복잡하다.
function hey() {
  document.getElementById("title").style.color = "red";
}


  • 제이쿼리 사용 후 훨씬 간단해졌다!!😻🎇
function hey() {
  $("#title").text("쥬라기월드");
}


제이쿼리를 사용하려면, css에서의 class처럼 js에서 html을 움직이게 하기 위한 명찰, id 값이 필요하다! 따라서 html 태그에 id를 적어주어야 한다.


한번 연습해볼까? 새 html 파일 생성 후, 아래의 코드를 붙여넣어보자!

<!DOCTYPE html>
<html>
  <head>
    <title>자바스크립트 문법 연습하기!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <style>
    .button-part {
      display: flex;
      height: 50px;
    }
  </style>
  <script>
    function checkResult() {}
  </script>
  <body>
    <div class="top-part">
      <h1>자바스크립트 문법 연습하기!</h1>
    </div>
    <hr />
    <br />
    <h2>1. 함수</h2>
    <div class="button-part">
      <button onclick="checkResult()">결과 확인하기!</button>
    </div>
    <div class="list-part">
      <h2>2. 리스트</h2>
      <div id="q1"></div>
    </div>
    <div class="dict-part">
      <h2>3. 딕셔너리</h2>
      <div id="q2"></div>
    </div>
    <div>
      <h2>4. 리스트 딕셔너리</h2>
      <div id="q3"></div>
    </div>
  </body>
</html>



목표 : q1이라는 곳에 텍스트를 입력하기!

  • function checkResult() 함수 안에 아래와 같이 입력해주자
  • $(’#아이디값’) 으로 어떤 html 태그를 바꿀 것인지 지정한 후, text("바꿔줄 명령어")를 넣어 바꿔줄 명령어를 적어준다.
function checkResult() {
  $("#q1").text("쥬라기월드");
}
  • 짜잔!🎇 버튼 클릭시 정상적으로 “쥬라기월드”가 출력된 것을 볼 수 있다.


목표 : 배열을 사용하여 텍스트 입력하기! 《 배열 》 에 대해 자세히 알고싶다면 클릭하기 

function checkResult() {
  const value = ["sieun", "Happy", "smile", "good"];
  $("#q1").text(value[1]);
}
  • 짜잔!🎇


목표 : 객체를 사용하여 텍스트 입력하기! 《 객체 》 에 대해 자세히 알고싶다면 클릭하기 ➡️ 아래와 같이 객체의 키 값을 불러내서 q1라는 아이디 값이 있는 곳에 넣을 수 있다.

function checkResult() {
  var person = {
    name: "kori",
    age: 7,
  };
  $("#q1").text(person["name"]);
}
  • 짜잔!🎇


목표 : 객체와 배열을 동시에 사용하여 텍스트 입력하기! ⭐좀 헷갈린다! 중요!

  • 아래 코드에서 사과가 0번째, 배가 1번째 인덱스인 것처럼
let a = ["사과", "배"];
  • 아래 코드의 경우도 마찬가지로, { name: "영수", age: 30 }가 0번째 인덱스가 되는 것이다.
let c = [
  { name: "영수", age: 30 },
  { name: "철수", age: 35 },
];


  • 따라서 아래와 같이 배열에서 원하는 객체를 부르고, 딕셔너리에서 키 값을 불러내서 q1에 저장할 수 있다.
function checkResult() {
  let c = [
    { name: "영수", age: 30 },
    { name: "철수", age: 35 },
  ];

  $("#q1").text(c[1]["name"]);
}
  • 짜잔!🎇

태그:

카테고리:

업데이트:

댓글남기기

참고