티스토리 뷰

1. eq(),first(),last() - 역할

eq() - 특정 위치에 존재하는 객체 선택


first() - 첫번째 위치에 존재하는 객체 선택


last() - 마지막 위치에 존재하는 객체 선택


2. eq() - 예제1

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('h4').eq(1).css('color','blue');
});
</script>
 
<body>
    <h4> 테스트 - 1 </h4>
    <h4> 테스트 - 2 </h4>
    <h4> 테스트 - 3 </h4>
    <h4> 테스트 - 4 </h4>
</body>






◈ 결과화면



3. eq() - 예제2

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>

<script>
$(document).ready(function () 
{
    $('h4').eq(-1).css('color','blue');
});
</script>
 
<body>
    <h4> 테스트 - 1 </h4>
    <h4> 테스트 - 2 </h4>
    <h4> 테스트 - 3 </h4>
    <h4> 테스트 - 4 </h4>
</body>





◈ 결과화면





◈ 설명


음수일 경우에는 역으로 밑에서부터 몇번째 위치인지를 탐색하여 선택합니다




4. first() - 예제

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('h4').first().css('color','blue');
});
</script>
 
<body>
    <h4> 테스트 - 1 </h4>
    <h4> 테스트 - 2 </h4>
    <h4> 테스트 - 3 </h4>
    <h4> 테스트 - 4 </h4>
</body>





◈ 결과화면



5. last() - 예제

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('h4').last().css('color','blue');
});
</script>
 
<body>
    <h4> 테스트 - 1 </h4>
    <h4> 테스트 - 2 </h4>
    <h4> 테스트 - 3 </h4>
    <h4> 테스트 - 4 </h4>
</body>





◈ 결과화면





댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday