jQuery 공작소 : .children()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
children 메서드는 지정한 셀렉터내의 자식요소를 찾습니다.
예제 1
부모개를 클릭하면 children 요소인 강아지가 반응합니다.
보기
큰개(부모개)를 클릭해 보세요.
소스
<style type="text/css">
.css_test span {
background-image : url('//superkts.com/img/css/dog061.gif');
background-repeat : no-repeat;
display : inline-block;
}
.css_test .dog {
background-position : top;
background-size : 100px;
height : 170px;
margin : 0 20px;
width : 220px;
}
.css_test .dog2 {
background-size : 50px;
height : 50px;
margin-top : 120px;
position : relative;
width : 50px;
}
.css_test .dog2.Xdog {
background-image : url('//superkts.com/img/css/dog060.gif');
}
</style>
큰개(부모개)를 클릭해 보세요.<br><br>
<div class="css_test">
<span class="dog" onclick="j_test(this)">
<span class="dog2"></span>
<span class="dog2"></span>
<span class="dog2"></span>
<span class="dog2"></span>
</span>
<span class="dog" onclick="j_test(this)">
<span class="dog2"></span>
<span class="dog2"></span>
<span class="dog2"></span>
<span class="dog2 Xdog"></span>
</span>
</div>
<script type="text/javascript">
function j_test(o){
$(o).children().finish().animate( {top:'-=20'}, 100, function(){
$(this).animate( {top:'+=20'}, 300);
});
}
</script>
.css_test span {
background-image : url('//superkts.com/img/css/dog061.gif');
background-repeat : no-repeat;
display : inline-block;
}
.css_test .dog {
background-position : top;
background-size : 100px;
height : 170px;
margin : 0 20px;
width : 220px;
}
.css_test .dog2 {
background-size : 50px;
height : 50px;
margin-top : 120px;
position : relative;
width : 50px;
}
.css_test .dog2.Xdog {
background-image : url('//superkts.com/img/css/dog060.gif');
}
</style>
큰개(부모개)를 클릭해 보세요.<br><br>
<div class="css_test">
<span class="dog" onclick="j_test(this)">
<span class="dog2"></span>
<span class="dog2"></span>
<span class="dog2"></span>
<span class="dog2"></span>
</span>
<span class="dog" onclick="j_test(this)">
<span class="dog2"></span>
<span class="dog2"></span>
<span class="dog2"></span>
<span class="dog2 Xdog"></span>
</span>
</div>
<script type="text/javascript">
function j_test(o){
$(o).children().finish().animate( {top:'-=20'}, 100, function(){
$(this).animate( {top:'+=20'}, 300);
});
}
</script>
관련 CSS
background-imagebackground-positionbackground-repeatbackground-sizedisplayheightmarginmargin-toppositionwidth
jQuery
$( 셀렉터 ).children() - 해당 셀렉터의 자식 요소를 반환합니다.
- 예제에서는 span 안에 들어있는 span 들을 대상으로 했습니다.
- 어미개 아래에 있는 강아지들이죠.
예제 2
셀렉터를 지정하여 필터링하여 찾기
보기
큰개(부모개)를 클릭해 보세요.
소스
<style type="text/css">
.css_test span {
background-image : url('//superkts.com/img/css/dog061.gif');
background-repeat : no-repeat;
display : inline-block;
}
.css_test .dog {
background-position : top;
background-size : 100px;
height : 170px;
margin : 0 20px;
width : 400px;
}
.css_test .dog2 {
background-size : 50px;
height : 50px;
margin-top : 120px;
position : relative;
width : 50px;
}
.css_test .dog2.Xdog {
background-image : url('//superkts.com/img/css/dog060.gif');
}
</style>
큰개(부모개)를 클릭해 보세요.<br><br>
<div class="css_test">
<span class="dog" onclick="j_test(this)">
<span class="dog2"></span>
<span class="dog2"></span>
<span class="dog2"></span>
<span class="dog2"></span>
<span class="dog2 Xdog"></span>
<span class="dog2"></span>
<span class="dog2"></span>
</span>
</div>
<script type="text/javascript">
function j_test(o){
// :not(.Xdog) 셀렉터를 사용해서 스파이를 걸러낸다
$(o).children( ':not(.Xdog)' ).finish().animate({ top : '-=30' }, 100, function(){
$( this ).animate({ top : '+=30' }, 300);
});
}
</script>
.css_test span {
background-image : url('//superkts.com/img/css/dog061.gif');
background-repeat : no-repeat;
display : inline-block;
}
.css_test .dog {
background-position : top;
background-size : 100px;
height : 170px;
margin : 0 20px;
width : 400px;
}
.css_test .dog2 {
background-size : 50px;
height : 50px;
margin-top : 120px;
position : relative;
width : 50px;
}
.css_test .dog2.Xdog {
background-image : url('//superkts.com/img/css/dog060.gif');
}
</style>
큰개(부모개)를 클릭해 보세요.<br><br>
<div class="css_test">
<span class="dog" onclick="j_test(this)">
<span class="dog2"></span>
<span class="dog2"></span>
<span class="dog2"></span>
<span class="dog2"></span>
<span class="dog2 Xdog"></span>
<span class="dog2"></span>
<span class="dog2"></span>
</span>
</div>
<script type="text/javascript">
function j_test(o){
// :not(.Xdog) 셀렉터를 사용해서 스파이를 걸러낸다
$(o).children( ':not(.Xdog)' ).finish().animate({ top : '-=30' }, 100, function(){
$( this ).animate({ top : '+=30' }, 300);
});
}
</script>
관련 CSS
background-imagebackground-positionbackground-repeatbackground-sizedisplayheightmarginmargin-toppositionwidth
jQuery
$( 셀렉터 ).children( ':not(.Xdog)' ) - 해당 셀렉터의 자식 요소를 반환합니다. (클래스명이 Xdog 인것은 제외)
- 자식요소를 필터링 하여 찾는 예제입니다.
- 스파이가 하나 숨어있네요.
jQuery 홈페이지 .children() API 문서 : http://api.jquery.com/children/