JQuery와 Javascript

JQuery란 무엇인가?

 

JQuery란 HTML의 요소를 조작하는 편리한 Javascript를 미리 작성해둔 것을 말한다.

JQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드(라이브러리)이다.

따라서 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것이므로 ⭐️import 필요⭐️

 

 

 

예시)

 

Javascript

document.getElementById("element").style.display = "none";

 

 

JQuery

$('#element').hide();

 

 

 

 

 

JQuery 사용해 보기!

 

<div class="list-part">    // (1)
	<h2>2. 리스트</h2>
    <div id="q1">test</div>
</div>  
<div class="dict-part">    // (2)
	<h2>3. 딕셔너리</h2>
    <div id="q2">test</div>
</div>   
<div>                      // (3)
	<h2>4. 리스트 딕셔너리</h2>
    <div id="q3">test</div>
</div>

위 html코드에 JQuery 를 사용해 입력하면

 

 

function checkResult() {
	let a = "apple";
	$("#q1").text(a);
}

▶️ test가 apple로 바뀜

 

 

 

function checkResult() {
	let a = ["apple", "pear", "orange", "grape"];
	$("#q1").text(a[2]);
}

▶️ orange로 바뀜

 

 

 

function checkResult() {
	let a = ["apple", "pear", "orange", "grape"];
	$("#q1").text(a[2]);
	$("#q1").css("color", "orange");
}

 

▶️ css도 바꿀 수 있음. test가 orange로 바뀌고 글자색이 주황색으로 바뀜

 

 

 

 

function checkResult() {
	let a = ["apple", "pear", "orange", "grape"];
	$("#q1").text(a[2]);
	$("#q1").css("color", "orange");

	let b = { name: "Alex", age: 20 };
	$("#q2").text(b["name"]);

	let c = [
	{ name: "Alex", age: 20 },
	{ name: "Andy", age: 30 },
	];
	$("#q3").text(c[1]["age"]);
}

▶️ 배열이나 객체에서도 사용할 수 있음!

 

 

 

 

 

---

JQuery로 반복문 조건문 사용하기

 

Javascript에서 반복문

let fruits = ["apple", "pear", "orange", "grape"];
	fruits.forEach((a) => {
	console.log(a);
});

 

 

 

Javascript에서 조건문

 

let age = 24;

if (age > 20) {
	console.log("Adult");
} else {
	console.log("No Adult");
}

 

 

 

Javascript에서 반복문과 조건문

 

let ages = [12, 14, 20, 25, 17, 40, 39];

ages.forEach((a) => {
	if (a > 20) {
		console.log("Adult");
	} else {
		console.log("No Adult");
	}
});

 

 

 

JQuery에서 반복문

let fruits = ["사과", "배", "감", "귤", "수박"];

$("#q1").empty();
fruits.forEach((a) => {
	let temp_html = `<p>${a}</p>`;
$("#q1").append(temp_html);
});

 

let people = [
{ name: "서영", age: 24 },
{ name: "현아", age: 30 },
{ name: "영환", age: 12 },
{ name: "서연", age: 15 },
{ name: "지용", age: 18 },
{ name: "예지", age: 36 },
];

$("#q2").empty();
people.forEach((a) => {
	let name = a["name"];
	let age = a["age"];
	let temp_html = `<p>${name}는 ${age}살입니다.</p>`;
	$("#q2").append(temp_html);
});

 

 

 

https://www.w3schools.com/jquery/jquery_get_started.asp

jQuery Get Started

 

 

 

 

 

---

채용공고 사이트를 보면 기술스택에 JQuery를 사용하는 회사가 꽤 많았던 걸로 기억한다.

오늘 처음 공부해봤는데 아직 익숙하지 않아서 그런지 생각보다 복잡했다. 

물론 구글링 해서 사용하면 된다 하지만 그냥 자바스크립트를 사용하는게 더 편하지 않을까? 흠..😔