jQuery 공작소 : :odd
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
:odd 셀렉터는 홀수번째 요소를 찾습니다.
예제 1
기본 예제
보기
아래 버튼을 눌러보세요 ^^
그런데 왜 짝수번째들이 반응할까요?
그런데 왜 짝수번째들이 반응할까요?
소스
<style type="text/css">
.css_test {
margin-top : 10px;
}
.css_test img {
width : 80px;
}
</style>
아래 버튼을 눌러보세요 ^^<br><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>
<br>그런데 왜 짝수번째들이 반응할까요?
<script type="text/javascript">
function j_test(){
$('.css_test img:odd').attr('src', '//superkts.com/img/huk2.gif');
// 1초후 원래 표정으로 바꾸기
setTimeout(function(){
$('.css_test img:odd').attr('src', '//superkts.com/img/huk1.gif');
}, 1000);
}
</script>
.css_test {
margin-top : 10px;
}
.css_test img {
width : 80px;
}
</style>
아래 버튼을 눌러보세요 ^^<br><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>
<br>그런데 왜 짝수번째들이 반응할까요?
<script type="text/javascript">
function j_test(){
$('.css_test img:odd').attr('src', '//superkts.com/img/huk2.gif');
// 1초후 원래 표정으로 바꾸기
setTimeout(function(){
$('.css_test img:odd').attr('src', '//superkts.com/img/huk1.gif');
}, 1000);
}
</script>
관련 CSS
jQuery
$( '.css_test img:odd' ) - 홀수번째 요소를 찾습니다.
- 예제에서는 짝수번째 얼굴들이 반응했습니다.
- 1,3,5 같은 것을 찾지만 적용은 0부터 시작하므로 보기에는 짝수것들이 반응합니다.
- 기억하세요 0 부터 시작이다 !
예제 2
:even, :odd 와 애니메이션 효과
보기
아래 버튼을 여러번 눌러보세요.
|
|
|
|
|
|
|
|
소스
<style type="text/css">
.css_test {
margin-top : 10px;
}
.css_test td {
width : 70px;
height : 150px;
}
.css_test img {
width : 60px;
}
</style>
아래 버튼을 여러번 눌러보세요.<br><br>
<button type="button" onclick="j_test('even')">even 얼굴</button>
<button type="button" onclick="j_test('odd')">odd 얼굴</button>
<table class="css_test" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="//superkts.com/img/huk1.gif" /></td>
<td><img src="//superkts.com/img/huk1.gif" /></td>
<td><img src="//superkts.com/img/huk1.gif" /></td>
<td><img src="//superkts.com/img/huk1.gif" /></td>
<td><img src="//superkts.com/img/huk1.gif" /></td>
<td><img src="//superkts.com/img/huk1.gif" /></td>
<td><img src="//superkts.com/img/huk1.gif" /></td>
<td><img src="//superkts.com/img/huk1.gif" /></td>
</tr>
</table>
<script type="text/javascript">
function j_test(v){
$('.css_test img:' + v).stop().slideToggle(1000, 'easeOutElastic');
}
</script>
.css_test {
margin-top : 10px;
}
.css_test td {
width : 70px;
height : 150px;
}
.css_test img {
width : 60px;
}
</style>
아래 버튼을 여러번 눌러보세요.<br><br>
<button type="button" onclick="j_test('even')">even 얼굴</button>
<button type="button" onclick="j_test('odd')">odd 얼굴</button>
<table class="css_test" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="//superkts.com/img/huk1.gif" /></td>
<td><img src="//superkts.com/img/huk1.gif" /></td>
<td><img src="//superkts.com/img/huk1.gif" /></td>
<td><img src="//superkts.com/img/huk1.gif" /></td>
<td><img src="//superkts.com/img/huk1.gif" /></td>
<td><img src="//superkts.com/img/huk1.gif" /></td>
<td><img src="//superkts.com/img/huk1.gif" /></td>
<td><img src="//superkts.com/img/huk1.gif" /></td>
</tr>
</table>
<script type="text/javascript">
function j_test(v){
$('.css_test img:' + v).stop().slideToggle(1000, 'easeOutElastic');
}
</script>
관련 CSS
jQuery
+ 관련 jQuery +
jQuery 홈페이지 :odd API 문서 : http://api.jquery.com/odd-selector/