이론/자바 풀스택 국비수업
220523 jQuery 5
달거북씨
2022. 7. 17. 14:27
1. each()
each() 메서드는 객체나 배열에서 모두 사용할 수 있는 범용적인 반복 함수이다.
$.each(object, function(index, item){});- object : 대상을 전달
- function(index, item){}
- index : 인덱스 값
- item : 해당 인덱스가 가진 값
[예제 코드]
let arr = ['다음', '네이버', '구글'];
$.each(arr, function(index, item){
let result = '';
result = index + " : " + item;
document.write(result + "<br>")
});
[출력 결과]
1-1. 객체 요소 출력하기
[예제 코드]
let obj = {
daum : 'http://www.daum.net',
naver : 'http://www.naver.com'
};
$.each(obj, function(index, item){
// index : 객체의 키
// item : 객체의 값
// 매개 변수이기 때문에 이름은 바꿔도 상관없음!!
let result = '';
result += index + ' : ' + item;
document.write(result + '<br>');
});
[출력 결과]
1-2. 배열 요소 출력하기
[예제 코드]
let arr = [
{title : '다음', url : 'http://www.daum.net'},
{title : '네이버', url : 'http://www.naver.com'}
];
$.each(arr, function(index, item){
let result = '';
result = index + " : " + item.title + ", " + item.url;
document.write(result + "<br>")
});
[출력 결과]
1-3. 선택자의 객체 가져오기
[예제 코드]
<body>
<ul class="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script type="text/javascript">
$('.list li').each(function(index, item){
// index : 말 그대로 index
// item : 해당 선택자인 객체
$(item).addClass('li_0' + index);
});
</script>
<!--
addClass 결과
<li class = "li_00">HTML</li>
<li class = "li_01">CSS</li>
<li class = "li_03">JavaScript</li>
-->
</body>
1-4. 문제 풀어보기
<문제 1>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.s1{color: tomato;}
.s2{color: powderblue;}
.s3{color: green;}
.s4{color: brown;}
</style>
</head>
<body>
<p>HTML</p>
<p>JavaScript</p>
<p>Java</p>
<p>DBMS</p>
<script>
/*
each문을 사용해서 스타일 클래스 p 태그에 적용하기
HTML에는 style class s1,
JavaScript에는 style class s2,
Java에는 style class s3,
DBMS에는 style class s4
*/
</script>
</body>
</html>
<풀이>
$('p').each(function(index, item){
$(this).addClass('s' + (index+1));
});
<문제 2>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.s1{color: tomato;}
.s2{color: powderblue;}
.s3{color: green;}
.s4{color: brown;}
</style>
</head>
<body>
<p>HTML</p>
<p>JavaScript</p>
<p>Java</p>
<p>DBMS</p>
<script>
/*
<문제2>
each문을 사용해서 특정 P태그에 스타일 클래스 적용하기
HTML에는 style class s1,
JavaScript에는 style class s2
*/
$('p').each(function(index, item){
if(index == 2){
return false;
}
$(this).addClass('s' + (index + 1));
});
</script>
</body>
</html>
<풀이>
$('p').each(function(index, item){
if(index == 2){
return false;
}
$(this).addClass('s' + (index + 1));
});
2. extend()
두 개 이상의 객체의 모든 속성을 하나의 객체로 병합한다.
[예제 코드]
let obj1 = {
"name" : "google"
};
let obj2={
"url" : "www.google.com",
"abc" : "def"
};
// 이 메소드는 인수로 전달받은 첫 번째 객체에 두번째 이후 객체의 모든 속성값을 추가한다.
$.extend(obj1, obj2);
$.each(obj1, function(key, value){
document.write("key = " + key
+ ", value = " + value + "<br>");
});
[출력 결과]
2-1. value가 중복될 경우
[예제 코드]
let obj1 = {
"name" : "google"
};
let obj2={
"url" : "www.google.com",
"abc" : "def"
};
let obj3 = {
"name" : "hkd",
"url" : "www.hkd.com",
"book" : "jQuery"
};
$.extend(obj1, obj2, obj3);
$.each(obj1, function(key, value){
document.write("key = " + key
+ ", value = " + value + "<br>");
});
[출력 결과]
▶ value는 중복이 가능하지만, key는 중복이 불가능하다.
▶ 따라서 name, url의 value가 가장 마지막 obj3의 값으로 출력된다.
728x90