재유's

[jQuery] 요소의 탐색 본문

IT Story/ : : JQuery

[jQuery] 요소의 탐색

Stella_NY 2019. 2. 12. 12:20

요소의 탐색


메서드 체인

 - 하나의 jQuery요소에 대하여 메서들 연속적으로 호출하는 기법

 - 특별한 경우가 아닌이상 jQuery()의 함수들은 객체 자신을 리턴한다.

1
2
3
4
ja$("#foo").attr(key, value)
            .css(key, value)
            .addClass(cls)
            .click(function() {}));



주변 요소 탐색하기

함수

설명

 prev()

 이전 요소를 리턴한다.

 next()

 다음 요소를 리턴한다.

 parent()

 상위 요소를 리턴한다.

 children()

 하위 요소(들)을 리턴한다.

 eq(n)

 n번째 요소를 리턴한다.


부모 요소 얻기

주어진 셀렉터를 갖는 가장 인접한 부모 요소를 리턴한다.

1
$("#foo").parents("셀렉터");



자식 요소 얻기

주어진 셀렉터를 갖는 가장 인접한 자식 요소를 리턴한다.

1
$("#foo").find("셀렉터");




요소의 숨김, 표시 처리

함수

설명

 show([time,[function]])

 요소를 표시한다.

 hide([time,[function]])

 요소를 숨긴다.

 toggle([time,[function]])

 요소의 숨김과 표시를 자동 반복한다.

 fadeIn([time,[function]])

 페이드 효과를 적용하여 요소를 표시한다.

 fadeOut([time,[function]])

 페이드 효과를 적용하여 요소를 

 fadeToggle([time,[function]])

 페이드 효과를 적용하여 요소의 숨김과 표시를 자동 반복한다.

 slideDown([time,[function]])

 요소를 아래로 펼쳐서 표시한다.

 slideUp([time,[function]])

 요소를 위로 접어서 요소를 숨긴다.

 slideToggle([time,[function]])

 요소를 위, 아래로 적고 펼치는 효과를 사용하여 

숨김과 표시를 자동반복한다.




HTML요소의 위치 변경

append(), prepend(), inserBefore(), insertAfter() 함수등을 동적 요소가 아닌 

기존에 존재하는 HTML요소끼리 사용하면 서로 위치를 바꿀수 있다.

1
2
3
4
5
6
7
8
<body>
    <div id="foo"></div>
    <div id="bar"></div>
</body>
 
<script>
    $("foo").insertAfter("#bar");
</script>



Comments