자료를 뒤지다가 jQuery에 대해서 잘 정리된 자료가 있어서 업어온 정보.
(원본 : http://funnygangstar.tistory.com/category/jQuery)
1. jQuery를 잘(?) 사용하기 위한 기본 환경 셋팅
- 아래의 사이트에서 jQuery 라이브러리(jquery-1.2.6.js)를 다운로드 받는다.
: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.js&can=1&q=
- VisualStudio에서 jQuery의 인텔리전스 기능을 사용하기 위해서는 아래의 순서대로 실행한다.
1) VisualStudio 2008 SP1을 설치한다.
2) VisualStudio의 패치를 실시한다.
: http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736
3) jQuery-vsdoc.js 파일을 다운로드한다. ( ~vsdoc.js 파일은 js 파일의 인텔리전스를 위한 도움말 파일임)
: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6-vsdoc.js&can=1&q=
2. jQuery의 시작
jQuery를 사용하기 위해서는 $ 로 시작하거나 jQuery로 시작하면 된다.
: 예) $(“div”) or jQuery(“div”)
페이지가 로드 되었을때 특정한 jQuery를 실행시키기 위해서는 아래의 세가지 방법이 있을 수 있으며 마지막 방법이
일반적으로 가장 많이 사용된다.
1) window.onload = function() {
alert('aaa');
}
2) $(document).ready(function(){
alert('aaaa');
});
3) $(function(){
alert('aaaa');
});
* 일반적인 HTML 페이지의 로딩이벤트에서는 첫번째 방법처럼 사용하게되고 단점은 단 한번밖에는 사용할 수 없다는 단점이 있습니다만, 두번쨰나 세번째 처럼 jQuery를 사용하게 되면 페이지 로드 이벤트시 여러 개의 함수를 호출할 수 있다는 장점이 있습니다.
3. jQuery로 엘리먼트 선택하기
3-1 알아두어야할 기본 사항
조작하려는 HTML 엘리먼트 선택하는 방법
1) a => <a> 태그로 시작하는 모든 엘리먼트를 선택한다.
예) $(“a”)
2) #ID => ID에 지정한 id를 가지는 모든 엘리먼트를 선택한다.
예) $(“div#myID)
3) .CLASS => CLASS에 지정한 class를 가지는 모든 엘리먼트를 선택한다.
예) $(“tr.myClass)
3-2 기본형 선택방식
1) 엘리먼트 사이에 스페이스를 두면 하위의 엘리먼트를 선택하게 된다.
예) $(“ul li a”) è ul 태그 하위에 li 태그 하위에 있는 a 태그를 선택한다.
: 주의할 것은 첫번째 나오는 엘리먼트(위에서는 ul 태그)라고 해서 전체 HTML에서 최상위에 있는 엘리먼트를 지칭하지는
않는다는 것이며, 또한 스페이스는 하위 엘리먼트를 선택하는 것이지 바로 아래의 엘리먼트를 선택하는 것이 아니다
예)
<body>
<div id="all">
<a href="http://www.naver.com">네이버링크</a>
<div>
<div><b><a href="http://www.daum.net">5-2</a></b></div>
</div>
</div>
</body>
와 같은 HTML이 있을 경우 $(“div a”)라고 한다면 위에서 두가지 <a> 태그 모두를 선택하게 된다.
2) 자주 쓰이는 셀렉터
- * => 모든 엘리먼트 => $("ul li *")
- E => 태그명이 E인 모든 엘리먼트 => $(“div”)
- E F => E 엘리먼트의 자손이면서 태그명이 F인 모든 엘리먼트 => $(“div a”)
- E > F => E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트 => $(“div > a”)
- E:has(F) => 태그명이 F인 엘리먼트를 하나 이상 가지는 모든 E 엘리먼트 => $(“ul li ul:has(li)”)
- E.C => 클래스명 C를 가지는 모든 E 엘리먼트, E를 생략하면 *.C와 동일 => $(“ul:myList”)
- E#I => 아이디가 I인 엘리먼트 E 엘리먼트, E를 생략하면 *#I와 동일 => $(“div#someID”)
- E[A] => 어트리뷰트 A를 가지는 엘리먼트 E => $(“img[src”)
- E[A=V] => 값이 V인 어트리뷰트 A를 가지는 엘리먼트E => $(“table[id=languages]”)
- E[A^=V] => 값이 V로 시작하는 어트리뷰트 A를가지는 E 엘리먼트 => $(“table[id^=lan])
- E[A$=V] => 값이 V로 끝나는 어트리뷰트 A를 가지는 E 엘리먼트 => $(“table[id$=ges])
- E[A*=V] => 값에 V가 들어있는 어트리뷰트 A를가지는엘리먼트 => $(“table[id*=g])
3) 하나의 $()에 콤마(,)를 사용하여 여러 요소를 접근할 수 있습니다.
div와 p요소를 선택하고자 한다면
$('div,p')
3-3 위치 기반 선택 방식
- B:first => 페이지에서 첫번째 B요소와 매칭
- B:last => 페이지에서 마지막 B요소와 매칭
- B:first-child => 첫번째 B요소와 매칭
- B:last-child => 마지막 B요소와 매칭
- B:only-child => B요소가 하나일 경우 B요소와 매칭
- B:nth-child(n) => n번째 B요소와 매칭(n:one-based)
- B:nth-child(odd|even) => 홀/짝수 B요소와 매칭
- B:nth-child(Xn+Y) => X배수 + Y인 B요소와 매칭(n:zero-based)
- B:even => 짝수 B요소와 매칭
- B:odd => 홀수 B요소와 매칭
- B:eq(n) => n번째 B요소와 매칭(n:zeno-based)
- B:gt(n) => n번째 초과 B요소와 매칭
- B:lt(n) => n이하 B요소와 매칭
* :nth-child 선택자는 1부터 시작되는 반면에 :eq, :gt, :lt 선택자는 0부터 시작됩니다.
3-4 사용자 정의형 선택 방식
- B:animated => jQuery 애니메이션 메서드로 애니메이션이 활성화된 B요소와 매칭
- B:button => 버튼 형태(button, input[@type=submit], input[@type=reset], input[@type=button])의 B요소와 매칭
- B:checkbox => input[@type=checkbox]인 B요소와 매칭
- B:enabled => 활성화 상태인 B요소와 매칭
- B:file => input[@type=file]인 B요소와 매칭
- B:header => h1~h6인 B요소와 매칭
- B:hidden => 비가시 상태 또는 input[@type=hidden]인 B요소와 매칭
- B:image => input[@type=image]인 B요소와 매칭
- B:input => 입력 요소(input, select, textarea)인 B요소와 매칭
- B:not(f) => :(콜론)으로 시작하는 f를 제외한 B요소와 매칭
- B:parent => 자식요소가 있는 B요소와 매칭
- B:password => input[@type=password]인 B요소와 매칭
- B:radio => input[@type=radio]인 B요소와 매칭
- B:reset => input[@type=reset]인 B요소와 매칭
- B:selected => option요소 중 현재 선택된 B인요소와 매칭
- B:submit => input[@type=submit]인 B요소와 매칭
- B:text => input[@type=text]인 B요소와 매칭
- B:visible => 가시 상태인 B요소와 매칭
4. jQuery의 몇가지 특색
1) 체이닝 호출
- jQuery는 메소드를 연속으로 호출 할 수 있다.
: 예) $(‘#div’).slideup(2000).css("background-color", "#fff0ff").click(function(){ alert(‘completed’); });
2) 유틸리티 함수 지원
- $. 을 사용하면 jQuery에서 지원하는 유틸리티 함수를 사용할 수 있다.
: 예) $.get(), $.ajax() …….
3) 엘리먼트 추가/삭제
- jQuery를 사용하면 손쉽게 HTML 엘리먼트를 추가 삭제할 수 있다. appent(), appentTo(), insertAfter()등의 메소드 사용
: 예) $('#chk').append('<input id=Checkbox6 type=checkbox checked=true />');
4) HTML 어트리뷰트 변경
- HTML 엘리먼트의 어트리뷰트를 변경할 수 있다.
: 예) $('#Img1').attr('width', '200');
5) value 값과 text 값
- HTML 엘리먼트의 value 어트리뷰트를 조작하기 위해서는 val()/val(값) 메소드를 사용하며,
엘리먼트 사이에 있는 Text값 (예: <label>텍스트값</label>)을 조작하기 위해서는 text(), text(값) 메소드를 사용한다
