티스토리 뷰

jQuery/jQuery 강좌!

[ jQuery 강좌] 프로토타입 안녕! jQuery 의 사용! - Selector(선택자) 1강.

멍발멍발 2011. 3. 13. 00:11


Ajax 강좌를 포스팅 하려다 jQuery의 강좌가 필요할 것 같아 급히 jQuery 강좌로 변경하였습니다.




안녕하세요. ^^
요즘 조금 여유 시간이 생겨 이렇게 다시 강의를 이어 갑니다.
혹시라도 그동안 제 강의를 기다리신 분이 혹시라도 있을까 모르겠습니다. ㅎㅎ

2년전 이맘때쯤 강의를 막 올리기 시작했었네요. ^^
그리고 2년이란 시간이 지난 후 많은 기술의 변화가 있었습니다.
프레임웍도 많이 등장했고요. 2년 전만 해도 ajax 라는 기술이 많이 보편화 되지는 않았었는데,
이젠 어느 곳에서든 쉽게 접하실 수 있으실 겁니다.

통신 객체도 조금의 변화가 있었지요. ^^
3강의 내용을 다시 살펴보니 xml 의 중요성. 즉 통신 객체의 중요성에 대해 설명해 드린 듯 합니다.

간략하게 말씀드리면 통신객체의 중요성은 더이상 말 할 것도 없습니다.
요점만 말씀드리자면 "데이터가 조금 더 정확하게 전달되어야 하기 때문에 XML 이라는 객체를 사용한다." 라는 것을 3강에 말씀드렸었습니다.
요즘은 JSON/JSONP 라는 통신객체도 많이 사용하게 되었지요. 이 부분에 대해서는 조금 후에 설명드리도록 하겠습니다.

요번 강의에서는 원래 [4강 - 파싱후 결과값 처리] 에 대한 부분을 말씀드리고자 했습니다.
하지만 잠시 이전 강의를 보니 prototype 을 통해 통신했었군요!

하지만 제가 prototype에서 jQuery로 갈아탄 관계로! ^^ ㅎㅎ;
jQuery의 통신에 대해 말씀드리고자 합니다.

일단 jQuery에 대해 잠시 설명드릴까 합니다.
jQuery는 이전 강의에서 사용했던 prototype 과 같은 JS프레임워크입니다.
프레임워크란 개발자들이 많이 사용하는 것들을 모아모아 쉽고 편리하게 사용할 수 있도록 만들어 놓은 일종의 작은 프로그램 이라고 생각하시면 되겠습니다.
주의 하실 점은 Ajax가 곧 jQuery이다 라고 생각하시면 안된다는 겁니다. Ajax는 많이 사용되는 기술이기 때문에 JS 프레임워크인 jQuery에서 이 부분에 대한 것을 쉽게 사용할 수 있도록 정규화 한 것입니다. 즉, jQuery라는 큰 틀안에 Ajax 기술을 사용할 수 있도록 프로그램을 작성해 놓은 것이지요.

자 그럼 이제 jquery에 대해 설명을 드리겠습니다.
jQuery는 아래 링크에서 다운로드 받으실 수 있습니다.

다운로드 : http://www.jquery.com/
레퍼런스 : http://docs.jquery.com/Main_Page

그리고 다운 받지 않고 사용하는 또 한가지 방법! 포탈사이트에서 제공하는 jsapi 기능을 사용하는 것이지요! ^^
요즘 GOOGLE이나 MS 에서 제공하는 api 기능들을 쉽게 찾을 수 있습니다. ^^ 편리한 기능이지요. 사용법은 아래와 같으니 사용해보세요^^

<script type="text/javascript" src="http://www.google.com"></script>
<script type="text/javascript">
google.load("jquery","1.4.4");
</script>

위의 소스를 작성하신 프로그램에 로딩하시면 바로 사용하실 수 있겠습니다^^
찾아보시면 MS 의 주소도 있고 직접 링크하는 google 주소도 있으니 어떻게 사용하셔도 무방하겠습니다.

위의 소스를 넣으시거나 다운받아서 js include 시키신 후라면 이제 jQuery를 사용 가능합니다.

1. jQuery의 기본 Selector (선택자)
  jQuery는 쉽게 설명드리면 아래의 형태로 사용하실 수 있습니다.
 $(오브젝트).함수명(파라미터);

** 함수명 대신 attribute 의 형태가 올 수도 있습니다.

자, 이렇게 보시면 쉽게 이해하기 힘드실 것입니다. 따라서 예제를 하나 들겠습니다.
여러분이 작성하신 아래와 같은 코드가 있습니다.

위에 보시는 코드에 보시면 abcd 라는 ID 값을 가진 DIV 태그가 있습니다.
이 부분 안쪽에 코드를 넣고 싶습니다. 기존에 이 값을 바꾸고자 한다면 아래와 같은 방법으로 바꾸어 줘야 했습니다.
<script type="text/javascript">
document.getElementById('abcd').innerHTML = "이것으로 바꾸어 볼까요? ^^";
</script>

자 그럼 이 코드를 실행해보겠습니다.



"여기에 값을 넣고 싶어!" 라는 부분이 "이것으로 바꾸어 볼까요?^^" 로 변경된 것을 확인 하 실 수 있습니다.
여기서 html 태그를 벗어나 script 태그를 써 준 것은 페이지 로딩시에 이 코드를 실행하기 때문입니다.
<head>와 </head> 사이에 이 코드를 두게 된다면 에러가 발생 합니다. 이 이유는 생각해보면 간단합니다.
모든 프로그램은 윗쪽에서 아래쪽으로 흐르게 되어 있습니다. 따라서 로딩시에 getElementById('abcd') 라는 코드로 abcd라는 아이디를 가진 태그를 찾습니다. 허나 이 코드가 실행될때는 값이 존재하지 않습니다. 따라서 에러가 발생하게 됩니다.

그럼 이러한 문제를 어떻게 고쳐주면 될까요?
아래와 같이 고치시면 됩니다.



무슨 뜻인지 이해가 되시나요?
window 객체에 보면 onload 라는 이벤트가 있습니다. 이 이벤트는 window를 모두 불러왔을때 라는 뜻이 되겠습니다.
따라서 onload 가 모두 되었을 시에 abcd라는 아이디를 가진 태그를 찾고 그 안쪽 html에 해당 값을 넣어주겠다 라는 뜻이 되겠습니다.

이것저것 설명드리다 보니 배가 산으로 가는 느낌이 마구마구 몰려옵니다.. 그러나 꼭 알고 가셔야 하는 내용이기 때문에 설명드리고자 합니다.
자, 이 부분 까지 되었으면 이제 이것을 jQuery 소스로 바꿔보도록 하겠습니다.

jQuery에서는 css에서 제공하는 셀렉터 기능을 제공합니다. 셀렉터란 한글로 하면 무엇일까요? 선택자(selector) 입니다.
선택자란? 말그대로 무엇을 선택하겠다 라는 것이지요. ^^
기존에 css를 공부하신 분이라면 쉽게 사용할 수 있으시겠습니다만 그렇지 않으시다면 아래 간단한 예제들을 보시겠습니다.

선택은 아까 말씀드린 "$(오브젝트)" 부분에 해당합니다. 이부분에서 무언가를 선택하고, attribute나 함수를 호출하는 방식이 되겠지요.
말씀을 드려서는 잘 모르시겠지요? 위의 예제를 가지고 abcd라는 아이디를 가진 div를 선택해 보겠습니다.
소스는 아래와 같습니다.




자 이제 <head> 와 </head> 사이를 봐주세요!! ^^ 보시면 아까 말씀드린 google jsapi 기능을 통해 jquery 1.4.4버전을 로딩한 것을 보실 수 있습니다.

그리고 마지막줄쯤 보시면 아까 설명드린 "$(오브젝트)" 부분에 $('#abcd') 라는 코드를 보 실 수가 있습니다.
abcd는 아이디 값 같은데 # 은 무엇이냐구요? 이것이 셀렉터의 핵심입니다^^
우리는 이 문서의 특정한 어떤 부분을 선택하기 위해 셀렉터를 사용하게 됩니다. (abcd라는 아이디를 가진 div 를 선택하기 위해!)
그러면 id 값으로 선택을 해야 합니다. 이 ID 부분을 대체하는 것이 바로 '#' 이 되겠습니다.
css의 셀렉터 규칙을 따른다고 아까 말씀드렸지요? ^^ 그렇기 때문에 class 라는 attribute 를 사용하면 '.' 을 사용합니다.

즉 qqq 란 class 를 가진 div 를 선택하고자 한다면 아래와 같이 사용하시면 됩니다.

자, 어느정도 이해가 가시나요? 그럼 꼭 div나 기타 태그들이 id나 클래스를 가져야 할까요?
아니겠지요 ^^ 설마 그 두가지만 제공하겠습니까!! ^^
그럼 이번엔 태그명으로 셀렉트하고 그 태그들 중에서 name값으로 셀렉트 해보겠습니다!
아래 소스에 집중해보세요! ㅎㅎ


자 보이시나요? 태그명을 셀렉트하실때는 # . 등과 같은 예약어를 사용하실 필요가 없습니다. 그냥 태그명만 입력해주시구요^^
이 태그명만으로는 여러개의 태그를 가지고 오게 될 것 입니다.
따라서 고유한 한가지를 잡아주시는 게 좋겠지요^^

그렇기 때문에 대괄호속([..])에 name=abcd_name 이라는 값을 넣어주어 셀렉트 한 모습입니다.

대략적인 select 방법들은 이해가 가시겠지요? ^^
이곳에 name 뿐만아니라 여러가지의 attribute를 비교하여 넣을 수 있습니다.
그리고 물론 div 태그 안에 있는 a 태그 이런식으로 선택하는 방법도 있습니다.
잠깐 설명을 드리자면
<div>
    <a id="test" src="http://www.google.com">Google로 가기!</a>
</div>

<script>
     alert( $('div>a[id=test]').attr('src') );
</script>

이런 방식으로 셀렉트가 가능합니다.
div 태그 안에있는 !! 이라는 뜻으로 ' > ' 가 쓰였습니다. 아직 그 뒷부분에 대해서는 설명드리지 않겠습니다^^;;
실행은 한번 해보세요^^

소스는 조만간 정리해서 올려드리도록 하겠습니다.


오늘 셀렉터에 관한 강좌는 여기서 마치겠습니다. 앞으로 jQuery를 한동한 공부해야 할 것 같습니다.
편한 마음으로 따라오신다면 금방 마스터 하실 수 있으리라 봅니다.

태클 늘 항상 환영합니다.^^
감사합니다.


-- 아 그리고 <script> 절을 마지막에 사용한 것은 아직 onload 에 대한 부분을 명확히 하지 않았기 때문입니다. 표준 문법에 어긋나지만 초기 문법을 익히실때만 이렇게 한다는 생각으로 따라오셨으면 좋겠습니다.


Selector 2강에서는 조금 더 강도높은 선택!!!! 에 대해서 알아보겠습니다^^

감사합니다.