[jQuery] 배열 html에 쏴주는 방법

졸업 작품 준비하면서 요즘 정신이 없었다...ㅎㅎ

아직 끝난 것은 아니지만 어제 2차 심사가 끝이났고 어제 긴장이 풀려서 딥 슬립을 해버렸다..ㅎㅎㅎ

이제 정신 차리고 내 공부를 이어나가봐야지

길게 가려면 천천히 무리 없게...하지만 꾸준히..!

 

 

오늘은 jQuery 상에서 배열 값을 html로 쏴주는것을 공부해 보았습니다.

평상시에 이거 될까? 하는 것들을 구현하다 보면 항상 이 개념에서 막혔었던 것 같아서

부족한 부분이기에 이해한 것을 바탕으로 정리해보려 합니다.

 

 

순서

 

Html

<div>
	<h3>안녕.<h3>
    <p>안녕하세요?<p/>
</div>

먼저 Html 상에 배열을 담을 공간을 마련해준다.

 

 

Script (배열)

//script 상에 배열을 적어줍니다.

const list = [

{
title: '오늘은 날씨가 어떤가요?',
text:'쌀쌀합니다.'
},
{
title:'오늘의 상태는 어떠신가요?'
text:'정신이 맑습니다.'
},
{
title: '오늘의 점심은 무엇인가요?',
text: '김치찌개입니다.'
},
{
title: '오늘의 저녁은 무엇인가요?',
text: '소고기 입니다.'
}

html에 바뀌고 싶은 내용을 작성해줍니다.

 

 

 

Script (jQuery)

$(function(){

$('li).click(function(){

const index = $(this).
}
  //html의 h3선택자에 텍스트를 적어주세요// list 배열 안의, 해당 인덱스 번호에 맞는, title내용을
  $('h3').text(list[index].title);
  //html의 p태그 요소에 적어주세요// list 배열 안의, 해당 인덱스 번호에 맞는, text 내용을
  $('p').text(list[index].text);
}

 

 

제이쿼리 핵심 코드의 작동원리는 다음과 같습니다..!

 

[Summary]

배열 값을 불러오는 단계는 3단계로 이루어집니다.

 

1. Html에 값을 바꿔줄 태그를 작성

2. Script 상에 배열을 작성. (배열 안에 바꿀 값을 적어주기)

3. 제이쿼리 선택자로 해당 배열값을 불러와주는 코드 작성하기

 

 

 

 

 

 

이것으로 배열 값을 불러오는 코드 원리를 작성해보았는데요..!

읽어주셔서 감사합니다 :)