h1, h2 각각 css 설정하기
실제 예제
<script src="http:⁄⁄code.jquery.com⁄jquery-1.7.js"><⁄script>
<script>
$(document).ready(function() { ⁄⁄ $는 jquery를 사용할 때 명시(?) 해주는 것
$('h1,h2').css('color','Orange');
⁄⁄ h1,h2 에 대해서만 css를 설정할수있게 한다.
});
<⁄script>
<⁄head>
<body>
<h1 >Lorem ipsum<⁄h1>
<h2 >Lorem ip<⁄h2>
<p>Lorem ipsum dolor sit amet.2<⁄p>
<p>Lorem ipsum dolor sit amet.4<⁄p>
<⁄body>
결과 화면
background 에 color 주기
실제 예제
<head>
<meta http-equiv="Content-Type" content="text⁄html; charset=EUC-KR">
<style type="text⁄css">
.high_light_0 {background:Yellow;} ⁄⁄각 스타일을 미리 주고
.high_light_1 {background:Orange;}
.high_light_2 {background:Blue;}
.high_light_3 {background:Green;}
.high_light_4 {background:Rea;}
<⁄style>
<script src="http:⁄⁄code.jquery.com⁄jquery-1.7.js"><⁄script>
<script>
$(document).ready(function () {
$('h1').addClass(function (index){
return 'high_light_' + index; ⁄⁄ jquery 를 사용하여 h1 인덱스별로 백그라운드 칼라를 설정
});
});
<⁄script>
<⁄head>
<body>
<h1>item -0<⁄h1>
<h1>item -1<⁄h1>
<h1>item -2<⁄h1>
<h1>item -3<⁄h1>
<h1>item -4<⁄h1>
<⁄body>
<⁄html>
결과 화면
filter 이용, background 에 color 주기
실제 예제
<head>
<meta http-equiv="Content-Type" content="text⁄html; charset=EUC-KR">
<script src="http:⁄⁄code.jquery.com⁄jquery-1.7.js"><⁄script>
<script>
$(document).ready(function () {
$('h3').filter(function(index) { ⁄⁄필터로 index 별로 backgroundColor 주기
return index % 2 ==0;
}).css({
backgroundColor : "Black",
color: 'White'
});
});
<⁄script>
<⁄head>
<body>
<h3>Header-0<⁄h3>
<h3>Header-1<⁄h3>
<h3>Header-2<⁄h3>
<h3>Header-3<⁄h3>
<h3>Header-4<⁄h3>
<h3>Header-5<⁄h3>
<⁄body>
<⁄html>
결과 화면
원하는 class, background 에 color 주기
실제 예제
<html>
<head>
<script src="http:⁄⁄code.jquery.com⁄jquery-1.7.js"><⁄script>
<script>
$(document).ready(function() {
$('h1').each(function () {
if($(this).is('.select')) { ⁄⁄ select 라는 h1에만 background 주기
$(this).css('background','Orange');
}
});
});
<⁄script>
<⁄head>
<body>
<h1>Header-0<⁄h1>
<h1>Header-1<⁄h1>
<h1 class="select">Header-2<⁄h1>
<⁄body>
<⁄html>
결과 화면
'JavaScript&Web' 카테고리의 다른 글
| [Javascript] 빈칸체크하기 간단예제 (0) | 2013.05.21 |
|---|---|
| [JavaScript] click 이벤트 발생 예제 (0) | 2013.03.31 |
| [JavaScript] innerHTML 활용 예제 (0) | 2013.03.31 |
| [JavaScript] Java 와 JavaScript 는 무엇이 다른걸까? (0) | 2013.03.29 |
| [Web] HTML 태그 정리표 (0) | 2013.03.29 |
