jQuery 공작소 : :header
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
:header 셀렉터는 H(헤더)태그 요소를 찾습니다.
예제 1
보기
버튼을 눌러보세용
H1 : jQuery 공작소
H2 : jQuery 공작소
H3 : jQuery 공작소
소스
<style type="text/css">
.css_test h1, .css_test h2, .css_test h3 {
margin : 20px 0;
}
</style>
버튼을 눌러보세용<br><br>
<button type="button" onclick="$('.css_test :header').css('background', 'blue')">H요소 배경색 바꾸기</button>
<button type="button" onclick="$('.css_test :header').css('background', '')">다시하기</button>
<div class="css_test">
<h1>H1 : jQuery 공작소</h1>
<h2>H2 : jQuery 공작소</h2>
<h3>H3 : jQuery 공작소</h3>
</div>
.css_test h1, .css_test h2, .css_test h3 {
margin : 20px 0;
}
</style>
버튼을 눌러보세용<br><br>
<button type="button" onclick="$('.css_test :header').css('background', 'blue')">H요소 배경색 바꾸기</button>
<button type="button" onclick="$('.css_test :header').css('background', '')">다시하기</button>
<div class="css_test">
<h1>H1 : jQuery 공작소</h1>
<h2>H2 : jQuery 공작소</h2>
<h3>H3 : jQuery 공작소</h3>
</div>
관련 CSS
jQuery
$( '.css_test :header') - 클래스명이 css_test 인 요소에서 H 요소를 찾습니다.
- 예제에서 h1, h2 는 현재 사이트의 클래스가 적용되어있습니다.
jQuery 홈페이지 :header API 문서 : http://api.jquery.com/header-selector/