공식사이트
- www.jquery.com
- 현재 버전 : 1.4.2 (10/02/19)
- 다운로드 http://docs.jquery.com/Downloading_jQuery
- 도큐멘트 http://docs.jquery.com/Main_Page
- tutorials http://docs.jquery.com/Tutorials
- JQUERY UI http://jqueryui.com
jquery란?
- jQuery는 자바스크립트와 HTML 사이의 상호작용을 강조하는 경량화된 웹 애플리케이션 프레임워크이다. 존 레시그에 의해, 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 릴리즈되었다.
- jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서의 듀얼 라이선스 하의 자유 오픈 소프트웨어이다.
- 사용법은 가장 잘 정리해둔 곳 : 위키백과 jquery
한국어 : http://ko.wikipedia.org/wiki/JQuery
영어 : http://en.wikipedia.org/wiki/JQuery - 참고자료 : prototype javascript framework
http://ko.wikipedia.org/wiki/Prototype_%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC
jquery 잘 설명한 사이트
- (왕추천) 김영삼 프로그래밍/jquery (링크추천 : 트위터 @zzeetaroo 님 감사)
http://youngsam.kr/category/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/JQuery - http://countryman.springnote.com/pages/1957700
- http://pupustory.tistory.com/242
동영상! 동영상! 읽기 싫어 보여줘~~~
- jquery의 놀라움
http://blog.naver.com/ddeng722/120102153477 - 웹에서도 이렇게 구현할 수있다
http://www.pandora.tv/my.epainter/33210994 - 해외 advancing javascript with libraries
1편: http://video.yahoo.com/watch/410472/2391234
2편: http://video.yahoo.com/watch/412541/2395771
책!! 나는 진정한 개발자. 책으로 독파할거야
- (추천) JQUERY 1.3(작고 강력한 자바스크립트 라이브러리) 09/09/17
http://book.naver.com/bookdb/book_detail.nhn?bid=6080987 - 프로그래밍 jquery 09/07/20
http://book.naver.com/bookdb/book_detail.nhn?bid=4742946 - jquery api 활용 08/12/19
http://book.naver.com/bookdb/book_detail.nhn?bid=5273462
응용사례
- imagebox http://www.intelliance.fr/jquery/imagebox/
- modal window http://blog.naver.com/aner2000?Redirect=Log&logNo=90048170911
기타 jquery plug-in 모음 링크
다음은 트위터 http://twitter.com/ropik 친구가 정리해주었습니다. 너무 감사합니다.
[[ jQuery ]]
◆ 기본 Selector
$("tagName1 tagName2");
$("#elementID");
$(".cssClassName");
$("*");
$("E1");
$("E1.class");
$("E1.#id");
$("E1 E2");
$("E1 > E2"); // E1 요소 바로 아래 자식 E2 요소
$("E1 + E2"); // E1 요소 바로 다음 형제 요소 E2
$("E1 ~ E2"); // E1 요소 다음에 나오는 모든 형제요소 E2
$("E1[attr]");
$("E1[attr=val]");
$("E1[attr^=val]");
$("E1[attr$=val]");
$("E1[attr*=val]");
ex)
a[title]
a[href^='mailto:']
a[href$='.pdf']
◆ Selector:Filter
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:header
:animated
ex)
tr:odd
tr:gt(4)
tr:last
:header:eq(1)
◆ Selector:ContentFilter
:contains(text)
:empty
:has(selector)
:parent
ex)
b:contains('j')
div:has('ul')
◆ Selector:ChildFilter
* 집합으로 일치
:nth-child(index|even|odd)
:first-child
:last-child
:only-child // 자신의 부모 요소의 유일한 자식인 모든 요소와 일치
◆ Selector:FormFilter
* 생각보다는 많이 사용되지 않음. 전체를 선택하는 경우는 거의 없기에..
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
:enabled // enalbe 상태인 모든 요소와 일치
:disabled
:checked // 체크된 모든 요소와 일치
:selected
.next()
.text() // text 가져오기, set: text setting
.html() // html 가져오기, set: html setting
$("#DoIt").click( someFunction ).mouseover( otherFunction ).css("color", "red");
$("#DoIt").bind("click", someFunction );
jQuery(selector).each( function );
// function(i) ** 주의 i, i=0 부터 시작
jQuery(selector).each( function(i) {
// logic
});
ex)
a.
var sports = $("input:checkbox");
for (var i = 0; i < sports.length; i++)
{
if (sports[i].checked == true)
{
// logic
}
}
b.
$("input#UserID")
c.
var sports = $("input:checked");
var result = "";
for (var i = 0; i < sports.length; i++)
{
// logic
}
d.
$("#DoIt").click(function() {
var result = "";
$("input:checked")
.each(function(i) {
result += $(this).next().text() + ",";
})
.css("background", "yellow");
$("#result").text(result);
});
◆ $(), jQuery()
1. 인자로 셀렉터를 지정한 경우에는 일치되는 모든 요소를 찾는다.
2. 인자로 html 태그를 지정한 경우에는 동적으로 그 요소를 생성한다.
3. 인자로 특정 DOM 요소를 지정하면, 그 요소의 jQuery 래퍼를 생성한다.
4. 인자로 function을 지정하면, 그는 $(document).ready() 메서드와 동일하다.
◆ 조작(Manipulation) 메서드
text() // 일치된 모든 대상의 텍스트를 결합해서 반환
html() // 일치된 요소들 중 첫 번째 요소의 html 만을 반환
text(val)
html(val)
ㅁ추가(요소 내부에) 관련 메서드
append(content) // 일치된 요소의 내부에 content를 덧붙입니다.
appendTo(selector) // 일치된 요소를 selector에 의해 일치된 모든 요소들 내부에 덧붙입니다. 만일, 일치된 요소가 본문에 존재하는 개체(예, $("#some")과 같은)라면 그를 제거한 후 복사(즉, 이동)합니다. 설명이 어려우면 밑의 예제를 참고하세요.
prepend(content) // append(content)와 동일하며, 다만, 내부 앞쪽에 붙여 넣습니다.
prependTo(selector) // appendTo(selector)와 동일하며, 다만, 내부 앞쪽에 붙여 넣습니다.
ㅁ추가(요소 외부에) 관련 메서드
after(content) 일치된 요소 뒤에 content를 삽입합니다. 요소 내부가 아닌 외부에 삽입된다는 것을 제외하면 append와 동일합니다.
before(content) 일치된 요소 앞에 content를 삽입합니다. 요소 내부가 아닌 외부에 삽입된다는 것을 제외하면 prepend와 동일합니다.
insertAfter(selector) 일치된 요소를 selector에 의해 일치된 모든 요소들 뒤쪽에 삽입합니다.
요소 내부가 아닌 외부에 삽입된다는 것을 제외하면 appendTo와 동일합니다.
insertBefore(selector) insertBefore(selector)와 유사하나, 요소 앞쪽에 삽입합니다.
요소 내부가 아닌 외부에 삽입된다는 것을 제외하면 prependTo와 동일합니다.
ㅁ삭제 메서드
empty() 모든 일치된 요소들의 자식 노드들을 제거합니다.
remove() 모든 일치된 요소들을 DOM에서 제거합니다.
ㅁ복사 메서드
clone() 일치된 요소를 복사하고, 그를 선택합니다.
clone(bool) 이벤트 처리기를 포함하여 DOM 요소를 복사하고 그를 선택합니다.
- true: 그 요소에 달려있는 이벤트 처리기(ex. click, mouseover) 등도 복사가 된다.
◆ 탐색(Traversing) 메서드
eq(index) 일치된 요소들 중에서 인덱스와 일치하는 단일 요소를 가져옵니다.
filter(expr) 지정된 표현식과 매치되지 않는 모든 요소들을 제거합니다. 즉, 매치되는 요소들만을 가져옵니다.
filter(func) 지정된 함수와 매치되지 않는 모든 요소들을 제거합니다.
is(expr) 현재 개체와 표현식에 해당한다면 true, 표현식에 여러 개의 조건이 있다면 그 중 한 개만 맞아도 true가 됨
map(callback) jQuery 개체 안에 있는 요소들의 집합을 다른 집합으로 변경해서 옮긴다.
not(expr) 지정된 표현식과 매치되는 모든 요소들을 제거합니다. 즉, 매치되지 않는 요소들만을 가져옵니다.
ex)
$("div:eq(1)").addClass("blue");
$("div").eq(1).addClass("blue"); // end() 를 사용해서 바로 전 상태로 복귀 가능
end() 메서드 :
현재 일치된 개체 집합을 변경하여, 방금 일어난 "파괴적인 작업" 직전의 상태로 되돌린다.
ex)
a.
$("div:odd").eq(0).css("background", "orange");
$("div:odd").eq(1).css("background", "blue");
b. // 동작 안함. 이미 집합이 div:odd 임.
$("div:odd")
.eq(0).css("background", "orange")
.eq(1).css("background", "blue");
c.
$("div:odd")
.eq(0).css("background", "orange")
.end() // $(div:odd) 와 동일 집합
.eq(1).css("background", "blue");
d.
$("div:odd")
$("div").filter(":odd") // end() 사용 가능. method 를 사용하면 end() 사용 가능.
$("div").filter(":odd")
.eq(0).css("background", "orange")
.end() // filter(":odd")
.eq(1).css("background", "blue")
.end() // filter(":odd")
.css("color", "red"); //이 코드는 odd인 div들의 폰트색상을 red로 적용한다.
// 변수명 유의. $myDiv <- $ 사용하여, 일반 변수와 jQuery 개체변수 구분되도록 한다.
var $myDiv = $("div").eq(5);
if ($myDiv.is("div"))
{
$myDiv.css("border", "4px solid yellow");
}
원본 출처 : http://blog.daum.net/sitehis/184?srchid=BR1http://blog.daum.net/sitehis/184
'프론트앤드 개발' 카테고리의 다른 글
Jquery 체크시 값을 더하고 빼주는 스크립트 (0) | 2010.10.15 |
---|---|
웹표준 경진대회 기출 + 예상 문제 (0) | 2010.10.15 |
당신은 웹표준개발자인가? (0) | 2010.10.15 |
e-preventDefault 와 return false 의 차이점... (0) | 2010.10.15 |
JavaScript 재입문 (0) | 2010.10.15 |