티스토리 뷰
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> |
◈ 결과화면
'[개발]프로그래밍 > jquery' 카테고리의 다른 글
[jquery] attr() - 객체 속성 추가, 삭제 (0) | 2016.10.11 |
---|---|
[jquery] add() - 객체 추가 선택 (0) | 2016.10.11 |
[jquery] filter() - 객체 필터링 선택 (0) | 2016.10.01 |
[jquery] addClass() ,removeClass() - 클래스 속성 추가 , 삭제 (0) | 2016.09.30 |
[jquery] 필터 선택자 - :을 포함한 선택자 (0) | 2016.09.28 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday