<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.high-light-0{background:yellow;}
.high-light-1{background:orange;}
.high-light-2{background:blue;}
.high-light-3{background:green;}
.high-light-4{background:red;}
.high-light-5{background:gray;}
</style>
<script src ="../js/jquery-3.2.1.js"></script>
</head>
<script>
window.onload=function(){
var hs = document.getElementsByTagName('h1');
hs[0].setAttribute('class','high-light-0');
hs[1].setAttribute('class','high-light-1');
hs[2].setAttribute('class','high-light-2');
hs[3].setAttribute('class','high-light-3');
hs[4].setAttribute('class','high-light-4');
hs[5].setAttribute('class','high-light-5');
}
</script>
<body>
<h1>item - 0</h1>
<h1>item - 1</h1>
<h1>item - 2</h1>
<h1>item - 3</h1>
<h1>item - 4</h1>
<h1>item - 5</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.high-light-0{background:yellow;}
.high-light-1{background:orange;}
.high-light-2{background:blue;}
.high-light-3{background:green;}
.high-light-4{background:red;}
.high-light-5{background:gray;}
</style>
<script src ="../js/jquery-3.2.1.js"></script>
<!-- jQuery 배열 관리
jQuery 로 배열을 관리할 떄는 each() 메서드를 사용
-each() 메서드는 매개변수로 입력한 함수로 for~in 반복문처럼
객체나 배열의 요소를 검사하는 메서드
-each() 메서드는 다음과 같이 두 가지 형태로 사용
1. $.each(object, function(index,item){})
2. $(selector).each(function(index,item){})
첫번째 매개 변수 - index(사용된 배열의 index)
두번째 매개 변수 - item(index에 해당하는 값(value))
-->
</head>
<script>
$(function(){
$('h1').each(function(index,item){
$(item).addClass('high-light-'+ index);
//$(item).addClass('high-light-'+ index);
//this와 item은 의미가 같다
//alert(item.innerHTML); item에 들어있는 value 확인하기
});
});
</script>
<body>
<h1>item - 022</h1>
<h1>item - 1</h1>
<h1>item - 2</h1>
<h1>item - 3</h1>
<h1>item - 4</h1>
<h1>item - 5</h1>
</body>
</html>
' sundries' 카테고리의 다른 글
| 1-22 jQuery 충돌 방지 (0) | 2018.01.11 |
|---|---|
| 1-21 클래스 속성 $.each (0) | 2018.01.11 |
| 1-20 클래스 속성 추가, 제거 (addClass, removeClass) (0) | 2018.01.11 |
| 1-19 요소 (0) | 2018.01.11 |
| 1-18 위치 필터 선택자 odd, even (0) | 2018.01.11 |
