실행1 .find( '.cat' ).addClass( 'on' )
실행2 .find( '.dog' ).addClass( 'on' )
실행3 .find( '.dog' ).addClass( 'on' ).find( '.cat' ).addClass( 'on' )
실행4 .find( '.dog' ).addClass( 'on' )
.end() .find( '.cat' ).addClass( 'on' )
실행5 .find( '.dog , .cat' ).addClass( 'on' )
실행3, 실행4를 주의깊게 비교해 보세요~!
<style type="text/css">
.css_test {
text-align : center;
}
.css_test span {
display : inline-block;
border-radius : 5px;
border : 4px solid gray;
}
.css_test .cat {
padding : 18px 10px 0 10px;
}
.css_test .cat.on {
border-color : red;
box-shadow : 0 0 5px red;
}
.css_test .dog.on {
border-color : blue;
box-shadow : 0 0 5px blue;
}
</style>
<button type="button"
onclick= "$('.css_test').find('.cat').addClass('on'); j_test();">실행1</button> .find( '.cat' ).addClass( 'on' )<br>
<button type="button"
onclick= "$('.css_test').find('.dog').addClass('on'); j_test();">실행2</button> .find( '.dog' ).addClass( 'on' )<br>
<button type="button"
onclick= "$('.css_test').find('.dog').addClass('on').find('.cat').addClass('on'); j_test();">실행3</button> .find( '.dog' ).addClass( 'on' ).find( '.cat' ).addClass( 'on' )<br>
<button type="button"
onclick= "$('.css_test').find('.dog').addClass('on')
.end ().find('.cat').addClass('on'); j_test();">실행4</button> .find( '.dog' ).addClass( 'on' )<b>
.end ()</b>.find( '.cat' ).addClass( 'on' )<br>
<button type="button"
onclick= "$('.css_test').find('.dog, .cat').addClass('on'); j_test();">실행5</button> .find( '.dog , .cat' ).addClass( 'on' )<br><br>
<b>실행3, 실행4를 주의깊게 비교해 보세요~!</b>
<div class="css_test mt20">
<span class="cat"><img src="//superkts.com/img/css/cat051.gif" /></span>
<span class="dog"><img src="//superkts.com/img/css/dog061.gif" /></span>
<span class="dog"><img src="//superkts.com/img/css/dog061.gif" /></span>
<span class="cat"><img src="//superkts.com/img/css/cat051.gif" /></span>
<span class="dog"><img src="//superkts.com/img/css/dog061.gif" /></span>
<span class="cat"><img src="//superkts.com/img/css/cat051.gif" /></span>
</div>
<script type="text/javascript">
function j_test(){
setTimeout(function(){
$('.css_test span').removeClass('on');
}, 500);
}
</script>