-- 여기에 기술되는 모든 내용은 jQuery in Action 2/E 에서 발췌 & 인터넷 서핑을 통한 것입니다. --
<script> 태그를 사용하여 페이지에 추가 <script type="text/javascript" src="script/jquery-1.7.js"></script> |
jQuery를 사용해야 하는 이유
1. 코드의 간결화
var checkedValue; var elements = document.getElementsByTagName('input'); for(var n = 0; n < elements.length; n++) { if(elements[n].type == 'radio' && elements[n].name == 'someRadioGroup' && elements[n].checked) checkedValue = elements[n].value; } |
위의 소스를 jQuery를 이용하여 다음과 같이 바꿀 수 있다.
| var checkedValue = $('[nam="someRadioGroup"]:checked').val(); |
코드의 의미는 간단하다.
어떤 라디오버튼이 선택되었는지 알아내고 Value 어트리뷰트 값을 가져오는 작업을 나타내는 소스이다.
성능상의 이유로 스크립트 블록이 문서 몸체의 끝에 위치하기도 하지만, 최신 브라우저에서는 성능 차이는 거의 없다. 구조와 관련된 엘리먼트 내부에 행위에 관련된 엘리먼트를 삽입시키지 않는 것이 더 중요한 개념이다.
효과적인 스크립트 작성요령
구조에서 행위 분리하여 스크립트에 기술
| <button type="button" onclick="document.getElementById('test').style.color='red';">Click</button> |
다음과 같이 변경한다.
| <button type="button" id="btn">Click</button> <script type="text/javascript"> window.onload = function() { document.getElementById('btn').onclick = function() { document.getElementById('test').style.color = 'red'; }; }; </script> |
jQuery 기초(알아야 할 사항들)
1. jQuery() 함수
P a : <p> 엘리먼트에 포함된 모든 링크의 그룹 참조
$(selector) = jQuery(selector)
기타 등등 많다.
셀렉터의 전체 목록은 http://docs.jquery.com/Selectors 에 있다.
2. 문서 핸들러
window.onload = function() { }; |
: 전체 문서가 모두 로드된 다음 실행할 구문을 명시하고자 window 인스턴스의 onload 핸들러를 사용
문서 전체가 로드된 이후에 정의된 코드가 실행되도록 만든다.
하지만 로드 해야할 리소스가 많은 경우 사용자가 기다리는 시간이 길어지는 단점이 있다.
다음과 같이 작성을 하게 되면 DOM 트리가 로드된 다음 다른 외부 리소스를 로드할 때까지 기다릴 필요 없이 코드를 실행 할 수 있다.
jQuery(document).ready(function() { $("id").hide(); }); |
: read() 메소는 문서를 조작할 준비가 되었을 때 실행될 함수를 매개변수로 전달 받는다.
위의 소스를 다음처럼 더 간단히 기술 가능한다.
jQuery(function() { $("id").hide(); }); |
: jQuery() 혹은 $()에 함수를 전달하면 브라우저는 DOM이 모두 로드될 ㄱ때까지 코드 실행을 미뤄둔다.
3. DOM 엘리먼트 생성하기
$(function() { $("<p> Hello </p>).insertAfter("id"); }); |
: Hello를 id라는 id를 가진 태그 다음에 동적으로 삽입
4. 다른 라이브러리와 함께 사용 가능
다른 라이브러리와 함께 사용시 $ 식별자 쓰임이 겹치기 때문에 충돌 문제를 야기
해결 방법 : jQuery.noConflict();
jQuery() 함수로 할 수 있는 짓(?)
- 확장 메서드로 어떤 동작을 수행하려고 DOM 엘리먼트를 선택하고 확장하기
- 전역 유틸리티 함수의 네임스페이스 제공하기
- HTML 마크업으로 DOM 엘리먼트 만들기
- DOM을 조작할 준비가 되었을 때 실행할 코드 지정하기
------------------------------------------------------------------------------------------------------------
Ajax = Asynchronous Javascript And XML
Web Runtime = 심비안 OS에서 모바일 웹 어플리케이션을 작성할 수 있도록 만들어 주는 개발 플랫폼
CSS = Cascading Style Sheets
HTML = Hyper Text Markup Language
XHTML = Extensible Hyper Text Markup Language
latest jQuery site = http://jquery.com
selector = 페이지에 있는 대상 엘리먼트를 식별하는데 사용되는 표현식
폼 엘리먼트 그룹 = input, select, textarea 등 데이터 전송할 때 사용되는 엘리먼트를 말함
------------------------------------------------------------------------------------------------------------
