jQuery 공작소 : .first()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

first 메서드는 지정한 셀렉터에 해당하는 요소의 첫번째 것을 찾습니다.

예제 1
기본 예제
보기
제일 처음의 "CSS 공작소" 를 선택합니다.
CSS 공작소
CSS 공작소
CSS 공작소
소스
<style type="text/css">
    .css_test div {
        border-radius : 5px;
        border : 5px solid gray;
        margin : 5px;
        padding : 7px;
    }
</style>

제일 처음의 "CSS 공작소" 를 선택합니다.<br>
<button type="button" onclick="$('.css_test div').first().css('border-color','red')">눌러보세용</button>
<button type="button" onclick="$('.css_test div').first().css('border-color','')">다시하기</button>

<div class="css_test">
    <div>CSS 공작소</div>
    <div>CSS 공작소</div>
    <div>CSS 공작소</div>
</div>
관련 CSS
borderborder-radiusmarginpadding
jQuery

$( '.css_test  div' ).first()  -  클래스명이 css_test 인것의 div 중 처음 것을 찾습니다.
$( '.css_test  div' ).first().css( 'border-color', 'red' )  -  맨처음 div 의 테두리색을 빨간색으로 바꾸기.

예제 2
응용 예제
보기
맨 앞의 사람부터 내보내기
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        padding : 7px;
    }
    .css_test img {
        position : relative;
    }
</style>

맨 앞의 사람부터 내보내기<br>
<button type="button" onclick="j_test()">나가세요</button>

<div class="css_test">
    <img src="//superkts.com/img/huk1.gif" />
    <img src="//superkts.com/img/huk1.gif" />
    <img src="//superkts.com/img/huk1.gif" />
    <img src="//superkts.com/img/huk1.gif" />
    <img src="//superkts.com/img/huk1.gif" />
    <img src="//superkts.com/img/huk1.gif" />
</div>

<script type="text/javascript">
    function j_test(){
        $( '.css_test img' ).first().animate( {left:'-=150', 'opacity':0 }, 500, function(){
            $(this).remove();
        } );
    }
</script>
관련 CSS
borderborder-radiuspaddingposition
jQuery

$( '.css_test  img' ).first().animate( { left : '-=150', 'opacity' : 0 }, 500, function(){
        $(this).remove();
} );

해당 셀렉터의 처음 이미지를 찾아서 왼쪽으로 150px 이동시킴과 동시에 투명해 지도록 만들고
애니메이션이 끝나면 해당 이미지를 삭제합니다.

관련 메서드 : .animate(), .remove()

예제 3
:first 셀렉터와 비교해 보기
보기
:first 셀렉터와 비교해 볼까요? 결과는 같습니다.

소스
<style type="text/css">
    .css_test input {
        border-radius : 5px;
        border : 3px solid gray;
        margin-top : 10px;
        padding : 7px;
        width : 300px;
    }
    .css_test img {
        margin-top : 10px;
        width : 150px;
        cursor : pointer;
    }
</style>

<b>:first</b> 셀렉터와 비교해 볼까요? 결과는 같습니다.<br><br>
<button type="button" onclick="j_test( $('.css_test img').first() )">$( '셀렉터' ).first()</button>
<button type="button" onclick="j_test( $('.css_test img:first') )">$( '셀렉터 :first' )</button>

<div class="css_test">
    <img src="//superkts.com/img/huk1.gif" />
    <img src="//superkts.com/img/huk1.gif" />
    <img src="//superkts.com/img/huk1.gif" />
</div>

<script type="text/javascript">
    function j_test(o){
        $(o).attr( 'src', '//superkts.com/img/huk2.gif' );
        setTimeout(function(){
            $(o).attr( 'src', '//superkts.com/img/huk1.gif' ); // 2초후 원래대로
        }, 1000);
    }
</script>
관련 CSS
borderborder-radiuscursormargin-toppaddingwidth
+ 관련 jQuery +
jQuery 홈페이지 .first() API 문서 : http://api.jquery.com/first/
☞ 목록으로 가기
jQuery 공작소  /   CSS 공작소