제이쿼리를 왜 사용할까?
➡️ 순수 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"]);
}- 짜잔!🎇
블로그 이전했습니다!