반응형
BODY 구성
<body>
<h1>Header 1</h1>
<h1 id="target">Header 2</h1>
<h1>Header 3</h1>
<script>
$(document).ready(function() {
$('#target').css('color', 'orange');
});
</script>
</body>HTML웹 표전에 따르면 id속성은 HTML페이지 내에서 유일한 값을 가져야 한다. 즉, 위 구성에서 id속성으로 target은 무조건 한개만 존재해야 합니다. ( 실제 실행에서는 2개 이상이어도 문제는 없습니다. )
h1태그 중 id속성이 target인 문서 객체 선택하기
<script>
$(document).ready(function() {
$('h1#target').css('color', 'orange');
});
</script>클래스 선택자
<body>
<h1 class="item">Header</h1>
<h1 class="item select">Header 1</h1>
<h1 class="item">Header 2</h1>
</body>
<script>
$(document).ready(function() {
$('.item').css('color', orange');
$('h1.item').css('background', 'red');
});
</script>두 class속성이 모두 있는 문서 객체만 적용하기
<script>
$(document).ready(function() {
$('.item.select').css('color', 'orange');
});
</script>현재 body태그에서 두 class속성이 모두 있는 문서 객체는 두번째 위치한 h1태그 이므로, 두번째 h1태그에만 스타일이 적용이 됩니다.
반응형
'JavaScript | TypeScript > Javascript 시작하기' 카테고리의 다른 글
| [ Javascript ] 클로저란 ? (1) | 2022.04.06 |
|---|---|
| [ Javscript ] 자바스크립트 스코프와 클로저 (0) | 2022.04.04 |
| [ Javascript ] 예외처리 (0) | 2022.02.27 |
| [ Javascript ] keydown, keypress, keyup (0) | 2022.02.06 |
| [ Javascript ] 배열 병합 (1) | 2022.01.02 |