2013/11/26 - [Web/jQuery] - 제이쿼리(jQuery) 선택자 - #1
1. 기본 필터 메서드
- 기본적으로 지원하지 않는 필터로 문서 객체를 선택해야 할 경우 filter() 메서드를 사용
- $(selector).filter(selector);
- $(selector).filter(function() {});
메서드명 |
설명 |
filter() |
문서 객체를 필터링 |
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
$('h1:even').css({
backgroundColor: 'black',
color: 'white'
});
*/
/*
위와 같은 기능
$('h1').filter(':even').css({
backgroundColor: 'black',
color: 'white'
});
*/
$(document).ready(function () {
$('h1').filter(function (index) {
return index % 3 == 0;
}).css({
backgroundColor: 'black',
color: 'white'
});
});
});
</script>
2. 문서 객체 탐색 종료
- 체이닝을 사용할 때 문서 객체 탐색을 종료해야 할 경우 end() 메서드 사용
메서드명 |
설명 |
end() |
문서 객체 선택을 한 단계 뒤로 돌림 |
<script src="jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('h1').css('background', '#C9C9C9').filter(':even').css('color', 'red').end().filter(':odd').css('color', 'blue'); }); </script>
3. 특정 위치 문서 객체 선택
- 특정 위치에 존재하는 문서 객체를 선택하는 필터 선택자 대신 간단한 메서드를 사용
메서드명 |
설명 |
eq() |
특정 위치에 존재하는 문서 객체를 선택 |
first() |
첫 번째에 위치하는 문서 객체를 선택 |
last() |
마지막에 위치하는 문서 객체를 선택 |
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').first().css('color', 'red');
$('h1').last().css('color', 'blue');
$('h1').eq(2).css('background', '#C9C9C9');
});
</script>
</head>
<body>
<h1>Header0</h1>
<h1>Header1</h1>
<h1>Header2</h1>
<h1>Header3</h1>
<h1>Header4</h1>
</body>
4. 문서 객체 추가 선택
- 문서 객체의 체이닝을 더 유연하게 추가할 때 add() 메서드를 사용
메서드명 |
설명 |
add() |
문서 객체를 추가적으로 선택 |
<script src="jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('h1').css('color', 'red').add('h2').css('float', 'left'); }); </script> </head> <body> <h1>Header0</h1> <h2>Header1</h2> <h1>Header2</h1> <h2>Header3</h2> <h1>Header4</h1> </body>
5. 문서 객체 특징 판별
- 문서 객체가 특징이 있는디 판단할 때 is() 메서드를 사용
메서드명 |
설명 |
is() |
문서 객체의 특징을 판별 |
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').each(function() {
if ($(this).is('.header')) {
$(this).css('color', 'red');
}
});
});
</script>
</head>
<body>
<h1 class="header">Header1</h1>
<h1>Header2</h1>
<h1 class="header">Header3</h1>
</body>
6. 특정 태그 선택
- 일반 선택자로 선택할 수 있지만, find() 메서드는 XML 문서에서 데이터를 추출할 때 많이 사용
메서드명 |
설명 |
find() |
특정 태그를 선택 |
<script src="jquery-1.10.2.js"></script> <script type="text/javascript"> // 테스트용 XML 작성 var xml = ''; xml += '<phones>'; xml += ' <phone>'; xml += ' <name>갤럭시노트3</name>'; xml += ' <manufacturer>삼성</manufacturer>'; xml += ' </phone>'; xml += ' <phone>'; xml += ' <name>G2</name>'; xml += ' <manufacturer>엘지</manufacturer>'; xml += ' </phone>'; xml += ' <phone>'; xml += ' <name>아이폰5S</name>'; xml += ' <manufacturer>애플</manufacturer>'; xml += ' </phone>'; xml += '</phones>'; $(document).ready(function() { var xmlDoc = $.parseXML(xml); $(xmlDoc).find('phone').each(function(index) { var output = ''; output += '<div>'; output += ' <h1>' + $(this).find('name').text() + '</h1>'; output += ' <p>' + $(this).find('manufacturer').text() + '</p>'; output += '</div>'; document.body.innerHTML += output; }); }); </script>
'Web > jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery) 문서 객체 조작 - #2 (0) | 2013.11.28 |
|---|---|
| 제이쿼리(jQuery) 문서 객체 조작 - #1 (0) | 2013.11.26 |
| 제이쿼리(jQuery) 선택자 - #1 (2) | 2013.11.26 |
| 제이쿼리(jQuery) 기본 (0) | 2013.11.25 |