원래 제이쿼리를 사용하면 코딩하는 양도 줄어들고 예전에는 크로스 브라우징 문제로 인해
많이 사용했었다고 한다. 크롬 파이어폭스 등 특히 인터넷 익스플로러의 자바스크립트 스펙이
많이 달랐었는데 (브라우저별로 자바스크립트를 준비해야 했을 정도로) 요즘엔
웹브라우저 버전이 올라가면서 어느 정도 브라우저 통합이 이루어졌고 이로 인해 제이쿼리 수요가 많이 줄었다.
제이쿼리의 수요가 계속해서 줄어듦에도 갑자기 제이쿼리 포스팅?이라고 생각할 수 있겠지만
예전에 많이 사용했기 때문에 유지보수를 겸해야 하는 일을 할 때는 꼭 마주치게 될 것이라는 얘기를 들었고
사실 모든 배워서 나쁠 건 없다고 생각한다.
그리고 이번에 직접 제이쿼리를 배워보고 조금 사용해보니까 정말 편하다..
왜 제이쿼리 페이지에 write less, do more라고 적혀있는지 단박에 이해가 갔다
그렇담 제이쿼리를 사용하는 방법에 대해 알아보기로 하자
1.
제이쿼리 사이트 접속 후, 상단의 다운로드 클릭
2.
다운로드 페이지에서 쭉 스크롤을 내리다 보면
Other CDNs가 나온다. 여기서 google cdn을 클릭
3.
3번째 버전인 script를 그대로 복사한다
4.
편집기 <body> 태그에 그대로 붙여 넣어준다
이렇게 하면 제이쿼리를 사용할 준비가 모두 끝났다
5.
제이쿼리 사용을 위한 세팅이 잘 되어있나 확인하기 위해,
소스 탭에서 하단의 ajax.googleapis를 클릭하면 jquery.min.js로
제이쿼리 세팅이 잘 된 것을 확인 가능하다
제이쿼리는 어떻게 사용할까?
제이쿼리 공식 홈페이지를 참고하면 많은 정보를 얻을 수 있다.
여기서 순수 바닐라 자바스크립트와 제이쿼리를 비교해보면
위의 전체 주석 처리되어있는 코드가 자바스크립트로 작성한 것이고,
이와 똑같은 동작을 하도록 하단에 제이쿼리로 코드를 작성했다.
코드의 양이 확연히 차이가 난다는 것을 알 수 있다.
제이쿼리 코드의 기본 형태로서
$( ) 안의 요소들은 모두 배열 array [ ]에 담아주고,
. 뒤의 행동을 반복문 돌 필요 없이 앞의 모든 요소에 적용시켜준다
여기서도 위에는 자바스크립트로 작성하고
밑에는 제이쿼리로 작성한 것이다.
옆에 결과물을 보면 똑같이 빨간 텍스트의 김구라가 나온 것을 볼 수 있다
따로 값을 주어도 가능하지만
밑에처럼 체이닝으로 연결해서 사용도 가능하다