HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/each.js"></script>
</head>
<body>
</body>
</html>JS
/**
*
*/
$(document).ready(function(){
//배열선언과 동시에 초기화
var array=[
{name:"Naver",link:"https://www.naver.com"},
{name:"Daum",link:"https://www.daum.net"},
{name:"Google",link:"https://www.google.com"}
];
//each() 메서드를 사용하여 array배열을 관리하자
$.each(array,function(index,item){
//html에 출력할 출력문을 저장하기 위한 변수지정
var output="";
//html에 출력하고자하는 문자열을 만들자
output+="<a href='"+item.link+"'>" //주소가 여기로 들어옴 item.link의 값이 들어옴
output+="<h1>"+item.name+"</h1>" //사이트명이 여기로 들어옴
output+="</a>"
//+는 문자열이라서 붙여주는것
/* output이
<a href="https://www.naver.com">
<h1>Naver</h1>
</a>
<a href="https://www.daum.net">
<h1>Daum</h1>
</a>
<a href="https://www.google.com">
<h1>Google</h1>
</a> 이렇게됨 무한반복 for문이니까 */
document.body.innerHTML+=output;
//innerHTML이 태그와 태그사이에 들어가는것이기때문에 output의 결과를 body사이에 넣어준다는것
})
})
결과
클릭하면 해당 사이트로 이동됨!
'Programming > JQuery' 카테고리의 다른 글
| [JQuery/실습] 테이블 홀수행 , 짝수행에 배경색 넣기 / each() 배열 (0) | 2020.10.27 |
|---|---|
| [JQuery/실습] 필터선택자-기호필터선택자/입력양식필터선택자 (0) | 2020.10.27 |
| [JQuery/실습] 속성 선택자 - 같은 속성선택자에 같은 CSS적용하기 (0) | 2020.10.27 |
| [JQuery/실습] 자식선택자 - JS에 CSS적용하기 (0) | 2020.10.27 |
| [JQuery/실습] 회원가입 폼 - 입력 아이디 유효성 체크 (0) | 2020.10.27 |