자바스크립트 프레임워크 제이쿼리를 아주 간단하게 소개할께요
자바스크립트 프레임워크가 뭐야?
기본적으로 우리가 자주 사용하는 자바스립트를 보다 편리하게 사용할수 있는 일종의 라이브러리가 보면 됩니다~
지금 버젼이 1.2.6 버젼까지 나와있지만 오픈 소스이기 때문에 자신의 입맛에 따라 직접 코드를 수정할수도 있어요
하지만 소스를 열어보는순간 얼.음. 이 되고 말테니 자신이 없다면 그냥 있는것을 사용하길 권장 ^^;;
그럼 왜 제이쿼리를 사용해야 하는지 간단하게 설명을 하고 넘어가 봅시다~!
제이쿼리 장점
1. 가볍고 편리하다.
제이쿼리는 약 100kb 정도의 파일로 이루워져 있으며 우리가 웹환경에서 개발시
미친듯이 for 문을 쓰고 if문을 쓰고 난리를 치던것을 초간단하게 몇줄로 해결할수 있다.
2. 불필요한 소스를 줄일수 있다.
고로 깔끔한 UI가 재탄생한다.
UI 개발자들도 적극 제이쿼리를 적용해서 만든다면 좀더 간결하고 멋진 소스들이 나올것으로 기대한다.
3. FF나 IE에서 제대로 동작.
웹표준과 타브라우저 효환성 용의 제이쿼리를 쓰면 왠만한건 FF나 IE에서 제대로 동작한다.
4. 아주 편리한 ajax호출.
ajax를 사용하려면 document.getElementById 에서 시작부터 브라우저별 XMLHTTP 까지 소스가 엄청 길어지는 것을 볼수 있는데
get방식, post방식 아주 간단하게 사용할수있다.
한달간 사용하면서 내가 느낀 제이쿼리의 장점은 위와 같다고 보면 될것 같다.
아직 많은것을 아는것은 아니지만 제이쿼리는 정말 매력적이며 웹과 때놓으라면 때놓을수 없는 사이인것 같아 완전 사랑한다~ ㅋㅋㅋ
나의 귀차니즘을 해결할수 있으니깐~ ㅋ
현재의 웹페이지는 자바스크립트가 없으면 아무것도 구동할수 없을만큼 비중이 커져만 가면서 한 웹페이지에 자바스크립트가 많게는 한페이지가 넘도록 줄줄이 쓰곤 한다. 그렇다면 맨날 쓰는 자바스크립트를 좀더 편하게 쓸수 있고 좀더 타이핑을 줄일수만 있다면 얼마나 좋을까?? (난 정말 타이핑을 치는게 싫다. 안그래도 노가다인데 정말 피토한다. ㅠ 그래서 최대한 타이핑수를 줄이고 개발하는게 좋다.)
자 그러면~~!!
고민하지말고 제이쿼리를 <head> 태그안에 추가하자~! 그러면 이러한 고민은 없어질테니깐~~
제이쿼리 설치 방법
위에 사이트에 가서 해당 파일을 받으면 된다.
다운 받은 파일은 <head></head> 태그안에 <script src="./jquery.js"></script> 이런식으로 넣어주면 이제 모든 준비가 끝났다.
그럼 간단하게 제이쿼리에 맛만 보고 글을 마치겠습니다.
자바스크립트에서 해당 ID를 찾을 쓰는 구문을 제이쿼리로 한다면
document.getElementById("test")
-> $("#test")
자바스크립트로 스타일을 변경하고 싶을때
document.getElementById("test").style.display = 'none'
-> $("#test").css("display","none")
자바스크립트로 select box 안에 선택된 값을 찾을때
document.getElementById("test").options[document.getElementById("test").selectedIndex].value
-> $("#test option:selected").val()
자바스크립트로 checkbox 중 선택된거 알아올때
var ck = document.getElementByName("test");
var str = "";
for(var i = 0;i<ck.length;i++){
if(ck[i].chekced)
str += ck[i].value + "|";
}
->
var str = "";
$("#test:checked").each(
str += $(this).val() + "|";
);
대충 봐도 소스가 간결한걸 느낄수 있겠죠?
현업에서 일해본사람이라도 더 많이 공감할것이라 믿고 글을 끝내도록 할께요 -0-;;
언넝 하던일을 마무리하고 퇴근해야 하니깐;;;;
다음 포스팅은 제이쿼리의 위력(?)에 대해서 하나 하나씩 알아보도록 합시다. -ㅁ-;
[출처] http://hanjiq.egloos.com/2108204
[출처] [jQuery] jQuery 바로 사용해보자.|작성자 주한길
'jQuery' 카테고리의 다른 글
| [jQuery] jQuery 시작하기 - Aptana 편집기 (0) | 2015.07.09 |
|---|---|
| [jQuery] jQuery 유용한 Tip (0) | 2015.07.09 |
| [jQuery] jQuery 1.4 버전에 추가된 기능 15개 (0) | 2015.07.09 |
| [jQuery] jQuery Core에 대해 알아보자 (0) | 2015.07.09 |
| [jQuery] jQuery 과연 무엇인가? (0) | 2015.07.09 |