jQuery는 자바스크립트를 더 간편하게 사용하기 위해 만들어진 JavaScript라이브러리이다. 라이브러리가 뭔가다. 라이브러리가 무엇인가? 도서관이다. 그와 유사하게 기능/지식들을 모아둔 저장소에서 필요할 때마다 기록된 코드를 빼와서 재사용할 수 있도록 class나 function으로 만들어둔 것이다.
우리가 기존(쌩)JS코드로 이 빨간색 블럭(div태그)들을 노란색으로 바꾸어보자.
document.getElementsByTagName('div')[0].style.backgroundColor = 'blue';
document.getElementsByTagName('div')[1].style.backgroundColor = 'blue';
document.getElementsByTagName('div')[2].style.backgroundColor = 'blue';
document.getElementsByTagName('div')[3].style.backgroundColor = 'blue';
document.getElementsByTagName('div')[4].style.backgroundColor = 'blue';
document.getElementsByTagName('div')[5].style.backgroundColor = 'blue';
document.getElementsByTagName('div')[6].style.backgroundColor = 'blue';
document.getElementsByTagName('div')[7].style.backgroundColor = 'blue';
document.getElementsByTagName('div')[8].style.backgroundColor = 'blue';
document.getElementsByTagName('div')[9].style.backgroundColor = 'blue';
//document <- 웹문서(주어의 역할)
//.(의)get(가져와라)Elements(엘리먼트를)ByTagName(태그이름으로)
//('태그이름')[몇 번째] - 컴퓨터는 0부터 세기 때문에 0이 첫번째,
//[]몇 번째꺼를 지정해야하는지 선정해야한다. TagName이 div인것을 모두 찾고 모두 바꾸는 것은 불가능
//.(의)style(css).(의)backgroundColor(background-color를)
// = 'blue'(blue로 바꾸어라)
//10번 반복
/*
태그들은 사람, document.getElementsByTagName('div')는 사람들이 들어가있는
차라고 할 수 있다. 사람 옷의 색을 바꾸고 싶을 때 차에게 말하는 게 말하는 게 맞는가
사람에게 말하는게 맞는가. 바로 사람이다. 그래서 document.getElementsByTagName('div')
이후에 몇 번째것인지 확실히 지정해줘야하는 것이다.
*/이렇게 쌩JS코드는 코드가 길고 HTML을 조절하는데 약간 불편함이 있다.
그래서 jQuery라는 것이 생겨났다. 쌩JS코드에서
document.getElementsByTagName('div')는 $('div')와 같다.
$('')괄호 안에 CSS셀렉터처럼 사용한다 ID가 apple인 요소는 $('#apple')로, class가 banana인 요소는 $('.banana')이렇게 사용한다.
하지만 document.getElementsByTagName('div')보다 강력한 기능을 가지는데 쉽게 말해 $('div')는 관리자의 역할을 한다고 할 수 있다. 몇 번째 것인지 지정해주지 않아도 CSS처럼 일괄처리해서 모든 태그들에게 명령을 할 수 있다.(JS에서 일괄처리라는 것은 없다.)
또한 옛날 옛적에 브라우저가 많을 시절, 브라우저마다 JS구현 방식이 달라 동일한 기능이어도 브러우저별로 다른 코드를 작성해야했다. jQuery가 생긴 또다른 이유이기도 하다.
React가 생겨서 이제 jQuery를 안쓴다고는 하지만 이미 jQuery로 만들어진 사이트가 무수히 많고 React다음으로는 절대적으로 사용하기 때문에 안 배울 수는 없다.
