jQuery Selector, Filter

출처 : http://www.sqler.com/

이 페이지에는 일부분만 복사해둠.

원문(http://www.sqler.com/index.php?mid=bjQuery&page=2)  보면 예제와 함께 쉽게 설명 되어있다.

셀렉터

형식(셀렉터)	설명
$(Selector[attr])	attr 속성(attribute)값을 가지는 Selector 요소와 일치
$(Selector[attr=”value”])	attr 속성의 값이 value와 동일한 값인 Selector 요소와 일치
$(Selector[attr!=”value”])	attr 속성의 값이 value와 같지 않은 값인 Selector 요소와 일치
$(Selector[attr^=”value”])	attr 속성의 값이 value 값으로 시작하는 Selector 요소와 일치
$(Selector[attr$=”value”])	attr 속성의 값이 value 값으로 끝나는 Selector 요소와 일치
$(Selector[attr*=”value”])	attr 속성의 값이 value 값을 포함하는 Selector 요소와 일치
$(Selector[attr~=”value”])	attr 속성의 값이 공백과 함께 value 값을 포함하는 Selector 요소와 일치

계층접근 셀렉터

형식(셀렉터)	셀렉터 표현식
Child Selector	$(“parent > child”)
Descendant Selector	$(“ancestor descendant”)
Next Adjacent Selector	$(“prev + next”)
Next Siblings Selector	$(“prev ~ siblings”)

기본 필터

형식(표현식)	설명
:animated	에니메이션이 동작중인 모든 요소와 일치하는 요소를 반환합니다.
:eq(index)	Index에 해당하는 요소를 반환합니다.(단일요소)
:even	짝수의 요소를 반환합니다. (0부터 시작)
:odd	홀수의 요소를 반환합니다. (0부터 시작)
:first	첫번째 요소를 반환합니다.
:last	마지막 요소를 반환합니다.
:gt(index)	Index 보다 높은 Index에 해당되는 요소를 모두 반환합니다.
:lt(index)	Index 보다 낮은 Index에 해당되는 요소를 모두 반환합니다.
:header	모든 헤더 요소들을 반환합니다.(h1,h2,h3….)
:not(selector)	Selector와 일치되는 요소를 제외한 나머지 요소를 반환합니다.
:focus	현재 포커스가 위치한 요소를 반환합니다. (1.6 이상에서 지원)

$(“td:eq(0)”)	td 요소중에 첫번째 항목만을 선택합니다. (eq의 index는 0부터 시작입니다.)  eq의 index는 0부터 시작을 하며 0 이면 요소중 첫번째, 1이면 두번째 요소가 됩니다.
$(“td:even”)  $(“td:odd”)	td 요소중에 짝/홀수번째 요소를 선택합니다. 짝/홀수의 구분은 eq의 index와 동일하게 구분이 됩니다.
$(“td:first”)  $("td:last")	td 요소중에 첫번째 요소, 마지막 요소를 선택합니다.
$(“td:gt(2)”)  $(“td:lt(2)”)	td 요소중에 2번째 요소 이후의 모든 요소를 선택하거나 2번째 요소 이전의 모든 요소를 선택합니다.

폼필터

폼 필터 종류	선택 폼
:button	<input type=”butto” />
:checkbox	<input type=”checkbox” />
:checked	<input type=”checkbox” checked=”checked” />
:disabled	<input type=”text” disabled=”disabled” />
:enabled	<input type=”text” enabled=”enabled” />
:file	<input type=”file” />
:focus	(1.6 이상에서 지원)
:image	<input type=”image” />
:input	<input> 모든 input 요소
:password	<input type=”password” />
:radio	<input type=”radio” />
:reset	<input type=”reset” />
:selected	<select><option selected="selected"></option></select>
:submit	<input type=”submit” />
:text	<input type=”text” />
:hidden	<input type=”hidden” />

자식필터<Child Filter>

필터 종류 및 형식	필터 설명
:first-child	자식 요소 중 첫번째에 해당하는 요소를 모두 반환합니다.
:last-child	자식 요소 중 마지막에 해당하는 요소를 모두 반환합니다.
:nth-child(index/odd/even/equation)	자식 요소 중 지정된 값에 해당하는 요소를 모두 반환합니다.
:only-child	자신이 부모 요소와 유일한 자식인 모든 요소를 반환합니다.

필터 관련 메서드

메서드 종류(형식)	메서드 설명
.eq(index)	선택한 요소들 중에서 인덱스와 일치하는 단일 요소를 선택 반환합니다.
.filter(expr)	선택한 요소에서 표현식(expr)과 일치하는 요소의 집합을 선택 반환합니다.  표현식에는 selector, function, element, jQuery object가 올 수 있습니다.
.first()	선택한 요소에서 첫 번째 단일 요소를 선택 반환합니다.
.has(selector)	선택한 요소에서 selector항목을 가지고 있는 요소의 집합을 선택 반환합니다.
.is(expr)	표현식과 일치하는 조건이 있으면 true를 반환합니다.  표현식에는 selector, function, element, jQuery object가 올 수 있습니다.
.last()	.first() 와 반대되는 메서드로 마지막 단일 요소를 선택 반환합니다.
.map(callback)	jQuery 개체에 있는 요소의 집합을 다른 집합으로 변경해서 이동 시킵니다.
.not(expr)	표현식과 일치하지 않는 요소의 집합을 선택 반환합니다.
.slice(start,[end]	선택한 요소에서 start, end번 째에 해당하는 집합을 선택 반환합니다.

    <script type="text/javascript">
        $(document).ready(function () {
            $("td").filter(function (index) {
                return index % 3 == 0;
            }).css("background", "red");
        });
    </script>

Miscellaneous

메서드	메서드 설명
.add()	일치하는 요소의 집합에 요소를 추가합니다.
.andSelf()	현재 설정 스택에 요소의 이전 설정을 추가합니다.
.contents()	텍스트 및 주석 노드를 포함 일치하는 요소 집합의 자식 집합을 반환합니다.
.end()	이전 상태로 일치하는 집합을 반환합니다.

Tree Traversal

메서드	메서드 설명
.children([selector])	선택된 개체의 자식 중 Selector 와 동일한 요소를 가져옵니다.
.closest([selector])	선택된 개체에서 DOM Tree를 통해 가장 가까운 조상 요소를 가져옵니다.
.find([selector])	선택된 개체에서 selector와 일치하는 요소를 가져옵니다.
.next([selector])	선택된 개체에서 selector와 일치하는 형제 요소를 가져옵니다.  일치하는 항목이 없을 경우 다음 항목으로 이동해 요소를 찾습니다.
.parent([selector])	선택된 개체에서 selector와 일치하는 부모의 요소를 가져옵니다.
.prev([selector])	선택된 개체에서 selector와 일치하는 바로 앞의 형제 요소를 가져옵니다.
.siblings([selector])	선택된 개체에서 selector와 일치하는 형제 요소를 가져옵니다.  자신은 제외합니다.

$(“div”).filter(“a”) : filter() 메서드를 사용할 경우는 div요소의 집합에서 “a”를 찾습니다.
$(“div”).find(“a”) : find() 메서드를 사용할 경우 div 요소의 집합 내용에서 “a”의 요소를 가져옵니다.

find()의 경우 이미 탐색된 개체의 내부 요소에서 selector와 동일한 요소를 가져오며, filter()의 경우는 처음 탐색 시에 selector에 해당되는 값으로 탐색을 도와주는(?) 역할을 한다고 보시면 됩니다.

jQuery.noConflict() : 예약어로 사용되는 “$”문자를 다른 라이브러리와 충돌이 나지 않게 하는 역할을 합니다.

noConflict: function( deep ) {
    window.$ = _$;
    if ( deep ) {
        window.jQuery = _jQuery;
    }
    return jQuery;
},

이벤트 bind

<script type="text/javascript">
    var countEnter = 0;
    var countLeave = 0;
    $(document).ready(function () {
        $("#mouseArea").bind({
            mouseenter : function() {
                countEnter++;
                $("#spResult").text(countEnter + " MouseEnter");
            },
            mouseleave : function() {
                countLeave++;
                $("#spResult").text(countLeave + " MouseLeave ");
            }
        });
    });
</script>

.live() : 

.click(), .bind() 와 같은 이벤트 메서드에서는 이미 로드가 완료된 개체에 이벤트를 주었다면, .live() 메서드의 경우 동적으로 생성될 개체나 요소에 대해서도 이벤트를 맵핑 할 수 있습니다.

 $(“a”).live(‘click’, function() { alert(‘live click a’); });를 사용 한다면 처음 로드 된 요소는 물론 로드 후에 동적으로 생성되는 “a” 요소에 대해서도 동일한 이벤트가 적용됩니다.

.die() : 이벤트 죽이기

$(‘li’).die() 의 경우는 요소 “<li>”과 연결된 모든 이벤트를 삭제를 하며, $(‘li’).die(‘click’);이라고 지정할 경우에는 “<li>”요소와 연결된 ‘click’ 이벤트만을 삭제 합니다.

.one() : 이벤트 한번만 동작하고 죽이기