jQuery란?
존 레식에 의해, 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 릴리즈되었다
jQuery는 자바스크립트와 HTML 사이의 상호 작용을 강조하는 경량화된 웹 애플리케이션 프레임워크이다.
jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서의 듀얼 라이선스 하의 자유 오픈 소프트웨어이다.
기능
jQuery는 다음과 같은 기능을 갖고 있다.
- DOM 엘리먼트 선택
- DOM 트래버설 및 수정 (CSS 1-3지원. 기본적인 XPath를 플러그인 형태로 지원)
- 이벤트
- CSS 조작
- 특수효과 및 애니메이션
- Ajax
- 확장성
- 유틸리티 - 브라우저 버전, "each"함수
- 자바스크립트 플러그인
사용법
jQuery는 한 개의 JavaScript파일로 존재한다. 공통의 DOM, 이벤트, 특수효과, Ajax함수를 포함한다. 다음 코드를 쓰면,
웸 페이지로 포함시킬 수 있다.
<script type="text/javascript" src="path/to/jQuery.js"></script>
jQuery는 두 가지의 상호 작용 스타일을 갖고 있다.
- $함수 이용 . jQuery 오브젝트의 팩토리 메소드이다. 이 함수들은 "chainable"하다: 각각은 jQeury 오브젝트를 리턴한다.
- $. - 가 붙은 함수 이용. 이들 함수는 jQuery 오브젝트 그 자체와 연동되지는 않는다.
일반적으로 여러 개의 DOM노드들을 조작하는 웍플로우는 $함수로 시작된다. CSS 셀렉터 스트링을 가지고 호출된다. 결과적으로
0개 혹은 그 이상을 HTML 페이지 내의 엘리먼트를 리퍼런스하는 jQuery 오브젝트가 리턴된다. 이 노드 집합들은 jQuery 오브젝트에
대해 인스턴스 메소드 들을 적용함으로써 조작될 수 있다. 혹은 노드들 그 자체가 조작될 수 있다.
예를 들면 다음과 같다.
$("div.test").add("p.quote").addClass("blue").slideDown("slow");
.. div 태그가 달리 모든 엘리먼트를 찾되, 클래스 애티르뷰가 test인 것을 찾는다. <p>태그를 찾되, 클래스 애트리뷰트가
quote인 것을 찾는다. 찾아낸 각각의 엘리먼트에 대해 클래스 애트리뷰트 blue를 추가한다. 그 뒤 애니메이션 효과를 주어 아래쪽으로
슬라이드(미끄러지게) 시킨다. $및 add함수는 찾아낸(matched) 집합(set)에 영향을 준다. addClass및 slideDown는 리퍼런스된
노드들에 영향을 준다.
$.가 앞에 붙은 함수들은, 글로벌 프로퍼티나 비해이비어에 영향을 주는, 간편한(유틸리티)메소드들이다. 예를 드면 다음과 같다.
$.each([1,2,3], function() {
document.write(this + 1);
});
... 234를 도류먼트에 출력한다.
Ajax 루틴들은 $.ajax및 관련 코드를 이용하여 수행할 수 있다. 이를 사용하여, 원격 데이터(remote data)를 로드하거나 조작할 수 있다.
$.ajax({
type: "POST",
url: "result.jsp",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data : " + msg );
}
});
파라미터 name=John, location=Boston을 주면서 some.php에 요청을 보낸다.
요청이 성공적으로 수행되었으면, 그 응답이 alert()된다.
* 위 내용은 위키백과에 등록된 내용입니다.(http://ko.wikipedia.org/wiki/JQuery)
jQuery가 무엇일까?
jQuery가 무엇일까? 라는 고민을 가지고 jQuery를 처음 접하게 되었다.
jQuery를 알게 된 것은 아는 형이 회사에서 jQuery를 쓰고 있다는 애기를 듣고 난 후였다.
처음에는 Query라고 해서 SQL Query문을 만들어 주는 것이 아닌가? 라느 생각을 가졌었다.(참 민망하다..) ㅡ.ㅡ;;
나중에야 검색을 하고 난후에야 웹 페이지에서 쓰이는 Javascript 프레임워크라는 걸 알게 된것이다.
프레임워크라고 하면 배우기만 하면 쓰기 편안한데, 막상 배우려면 시간이 꽤 많이 든다. 프로그래머라면 이 말에 공감이 갈 것이다.
어떤 프로그래머들은 프레임워크에 대해 안좋은 생각을 가지고 있는 분들고 있을 것이다. (뭐, 생각은 자유니깐..^^v)
본좌 또한 배우기에 귀찮다는 생각을 가지고 있었기에 열나게 DOMScript 만을 썼었다.
그러나 막상 개발에 들어가니 Javascript코드가 굉장히 길어지게 된것이다.
뭐 나만 보는 것이면 상관이 없었지만 다른 사람이 만약 내가 개발한 코드를 보고 분석할려면 시간이 좀 걸릴 것이다.
또한, 코드가 길다보니 마우스의 휠과 Ctrl + F 만을 열나게 사용해야만 했다. 본좌는 이게 가장 싫었다.
분할해서 Javascript 코드를 작성하면 되지 않냐! 라는 말 하시는 분들도 계시겠지만 본좌는 단순한 걸 좋아 한답니다. ^^v
그래서 코드를 경량화 시켜보고자 우선 Prototype을 배우고자 했지만, 갑자기 jQuery가 생각 났고,
누군가 Prototype보다 가볍다고 해서 jQuery를 쓰게 된 것이다.
우선 jQuery를 어떻게 사용하는 지를 알아 보자.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready( function() { $("#my").css("border", "3px solid red") }); </script> </head> <style> div {
float: left; width: 90px; height: 90px; padding: 5px; margin: 5px; background-color: #EEEEEE; } </style>
<body> <div id='you'></div> <div id='my'></div> </body> </html>
-------------- 실행 경과 -----------------
jQuery의 시작은
$(document).ready(function(){
// 여기에 코딩!!
});
이렇게 시작이 된다. 이제 가운데 부분에 코딩만 하면 되는 것이다.
$(document).ready(function(){..}) 이부분에 자세히 알아 보면
$(document).ready(function(){..}) == window.onload = function(){....} 이런 공식이 된다.
하지만 약간 다르다. 그 이유를 살펴보면...
대부분 자바스크립트 프로그래머들은 브라우저의 document가 모두 로딩되고 난 후에 코딩을 하기 위해서
<body> 태그에 onload 이벤트를 사용하거나 window.onload = function(){....} 이와 같은 스크립트 코드를 넣는다.
그러나 이 경우에는 이미지까지 다운로드가 모두 완료 된 후 이벤트가 호출되기 때문에,
큰 이미지의 경우 실행속도가 늦은 것처럼 사용자에게 보일 수 있다.
jQuery는 이러한 문제를 해결하기 위해 다음과 같은 이벤트를 제공한다.
$(document).ready(function(){
// 여기에 코딩!!
})
이 이벤트는 브라우저의 document(DOM)객체가 준비가 되면 호출이 된다.
따라서 이미지 다운로드에 의한 지연이 없다.
위 코드를 생략하면
$(function(){
// 여기에다가 코딩을 하세요
});
이렇게 사용이 가능합니다.
자바스크립트 프레임워크 제이쿼리를 아주 간단하게 소개할께요
자바스크립트 프레임워크가 뭐야? 기본적으로 우리가 자주 사용하는 자바스립트를 보다 편리하게 사용할수 있는 일종의 라이브러리가 보면 됩니다~ 제이쿼리 장점 제이쿼리는 약 100kb 정도의 파일로 이루워져 있으며 우리가 웹환경에서 개발시 미친듯이 for 문을 쓰고 if문을 쓰고 난리를 치던것을 초간단하게 몇줄로 해결할수 있다. 고로 깔끔한 UI가 재탄생한다. UI 개발자들도 적극 제이쿼리를 적용해서 만든다면 좀더 간결하고 멋진 소스들이 나올것으로 기대한다. 웹표준과 타브라우저 효환성 용의 제이쿼리를 쓰면 왠만한건 FF나 IE에서 제대로 동작한다. ajax를 사용하려면 document.getElementById 에서 시작부터 브라우저별 XMLHTTP 까지 소스가 엄청 길어지는 것을 볼수 있는데 get방식, post방식 아주 간단하게 사용할수있다. 나의 귀차니즘을 해결할수 있으니깐~ ㅋ 자 그러면~~!! 제이쿼리 설치 방법 위에 사이트에 가서 해당 파일을 받으면 된다. 다운 받은 파일은 <head></head> 태그안에 <script src="./jquery.js"></script> 이런식으로 넣어주면 이제 모든 준비가 끝났다. 자바스크립트에서 해당 ID를 찾을 쓰는 구문을 제이쿼리로 한다면 -> $("#test") 자바스크립트로 스타일을 변경하고 싶을때 -> $("#test").css("display","none") 자바스크립트로 select box 안에 선택된 값을 찾을때 자바스크립트로 checkbox 중 선택된거 알아올때 현업에서 일해본사람이라도 더 많이 공감할것이라 믿고 글을 끝내도록 할께요 -0-;; 언넝 하던일을 마무리하고 퇴근해야 하니깐;;;; 다음 포스팅은 제이쿼리의 위력(?)에 대해서 하나 하나씩 알아보도록 합시다. -ㅁ-; [출처] [jQuery] jQuery 과연 무엇인가? |작성자 주한길
지금 버젼이 1.2.6 버젼까지 나와있지만 오픈 소스이기 때문에 자신의 입맛에 따라 직접 코드를 수정할수도 있어요
하지만 소스를 열어보는순간 얼.음. 이 되고 말테니 자신이 없다면 그냥 있는것을 사용하길 권장 ^^;;
그럼 왜 제이쿼리를 사용해야 하는지 간단하게 설명을 하고 넘어가 봅시다~!
1. 가볍고 편리하다.
2. 불필요한 소스를 줄일수 있다.
3. FF나 IE에서 제대로 동작.
4. 아주 편리한 ajax호출.
한달간 사용하면서 내가 느낀 제이쿼리의 장점은 위와 같다고 보면 될것 같다.
아직 많은것을 아는것은 아니지만 제이쿼리는 정말 매력적이며 웹과 때놓으라면 때놓을수 없는 사이인것 같아 완전 사랑한다~ ㅋㅋㅋ
현재의 웹페이지는 자바스크립트가 없으면 아무것도 구동할수 없을만큼 비중이 커져만 가면서 한 웹페이지에 자바스크립트가 많게는 한페이지가 넘도록 줄줄이 쓰곤 한다. 그렇다면 맨날 쓰는 자바스크립트를 좀더 편하게 쓸수 있고 좀더 타이핑을 줄일수만 있다면 얼마나 좋을까?? (난 정말 타이핑을 치는게 싫다. 안그래도 노가다인데 정말 피토한다. ㅠ 그래서 최대한 타이핑수를 줄이고 개발하는게 좋다.)
고민하지말고 제이쿼리를 <head> 태그안에 추가하자~! 그러면 이러한 고민은 없어질테니깐~~
그럼 간단하게 제이쿼리에 맛만 보고 글을 마치겠습니다.
document.getElementById("test")
document.getElementById("test").style.display = 'none'
document.getElementById("test").options[document.getElementById("test").selectedIndex].value
-> $("#test option:selected").val()
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() + "|";
);
대충 봐도 소스가 간결한걸 느낄수 있겠죠?
'jQuery' 카테고리의 다른 글
| [jQuery] jQuery 시작하기 - Aptana 편집기 (0) | 2015.07.09 |
|---|---|
| [jQuery] jQuery 유용한 Tip (0) | 2015.07.09 |
| [jQuery] jQuery 바로 사용해보자. (0) | 2015.07.09 |
| [jQuery] jQuery 1.4 버전에 추가된 기능 15개 (0) | 2015.07.09 |
| [jQuery] jQuery Core에 대해 알아보자 (0) | 2015.07.09 |