본문 바로가기
강좌/jQuery

제이쿼리(jQuery) - filter()와 slice() 메서드.

이번엔제대로 2013. 4. 22. 06:20


//filter메소드의 예제


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

<meta http-equiv="content-type" content="text/html;" charset="utf-8" >

        <title> Filter method </title>

<script src="http://code.jquery.com/jquery-1.7.2.js"></script>

<style type="text/css">

            .redBorder{border:solid 1px red;}

.five{border-width:5px;}

</style>

<script>

   $(document).ready(function (){

$('img').addClass('redBorder') //모든 이미지에 redBorder 클래스 적용

.filter('[title*=naver]').addClass('five')

.end() //부모로 이동(이미지태그로)

.filter('[title$=gle]').removeClass('redBorder')

;

});


</script>

    </head>


    <body>

        <img src="" title="yahoo" alt="yahoo" />

        <img src="" title="naver" alt="naver" />

        <img src="" title="google" alt="google" />

    </body>

</html>



//slice메소드




<예제>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
        <title> slice method </title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<style type="text/css">
            .red{color:red;}
</style>
<script>
   $(document).ready(function (){
   //size() 해당 결과값(집합)의 개수
   alert("현재 웹 페이지에는 " + $('input').size() + "개의 input 태그가 있다.");
//2, 3째만 스타일 적용
$('input').slice(1, 3).addClass('red') //1번째 인덱스에서 (3-1)번째 인텍스 까지
});
</script>
    </head>

    <body>
        <h1> 2번째와 3번째 버튼에만 빨간 글씨 적용</h1>

<input type="button" value="button" />
<input type="button" value="button" />
<input type="button" value="button" />
<input type="button" value="button" />
    </body>
</html>

저작자표시

'강좌 > jQuery' 카테고리의 다른 글

제이쿼리(jQuery) - css() 메서드와 콜백함수(CallBack)  (0) 2013.04.22
제이쿼리(jQuery) - toggle(), toggleClass(), hover(), one() 메서드.  (0) 2013.04.22
제이쿼리(jQuery) - addClass()와 removeClass()  (0) 2013.04.20
제이쿼리(jQuery) - Selector (선택기 / 선택자) 전반적인 내용  (0) 2013.04.16
제이쿼리(jQuery) - 선택기(Selector)로 자식요소 선택  (0) 2013.04.16

'강좌/jQuery' Related Articles

티스토리툴바