본문 바로가기
프론트앤드 개발

[펌] JQuery 관련 자료

by 긴자손 2010. 10. 15.
728x90
반응형

공식사이트

jquery란?

jquery 잘 설명한 사이트


동영상! 동영상! 읽기 싫어 보여줘~~~

책!! 나는 진정한 개발자. 책으로 독파할거야

응용사례

기타 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

728x90
반응형
저작자표시 비영리 변경금지

'프론트앤드 개발' 카테고리의 다른 글

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

관련글

티스토리툴바