TIL 21.09.14 jquery

✍️ jquery

✏️ jquery로 html tag에 접근하기

1. jquery를 이용해 html 요소'id' or 'class' content에 접근하기

  let id = $('#id').val();

  let className = $('#class').val();

  ❗️❕ 주의사항 ❗️❕ 
  jquery 이용시 jquery 관련 <script> 붙일 것

2. jquery를 이용해 <ul> 태그에 입력 값 붙이기 및 초기화하기
   
   📦 준비물
   jquery <script> 태그 html code에 붙어 있을 것

  <!--다음 html code가 있다. 
      해당 코드에서 input에 입력하고 제출한 값을 list에 추가하고 싶을 때
      input에 입력한 값에 접근하는 방법과 해당 값을 list에 붙이는 방법에 대해 알아보자.
  -->
  <form>
    <input id="input" type="text" placeholder="여기에 이름을 입력"/>
    <button>제출</button> 
  </form> 

  <ul id="list">
    <li>세종대왕</li>
    <li>임꺽정</li>
  </ul>

  //javascript

  //우선 input의 id에 접근하고 싶을 때 다음과 같이 작성한다.
  let input = $('#input').val();

  // list에 붙일 태그를 만들기 위해 아래와 같이 백틱(``)을 사용해서 input의 값을 넣어준다.
  let temp_html = `<li>${input}</li>`
  
  // id값을 가져와 해당 영역에 붙인다.
  $('#list').append(temp_html)

✏️ json

사용자가 서버에 요청해서 데이터를 받아올 때 해당 데이터의 양식이 있는데 이를 json이라 한다.
json 파일은 아래와 같은 형태를 띄고있다.

{
  "_comment": "아래",
  "RealtimeCityAir": {
    "list_total_count": 25,
    "ROW": {},
    "ROW": [{...}, ... {...}],
}                  

✏️ Ajax

AJAX

🌐 Ajax
   브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체페이지를 새로고침 할 필요없이
   필요한 일부분의 데이터만을 갱신할 수 있게 도와준다.

💪 ajax 기본골격
   url에 json 파일이 있는 url을 입력해준다.
   url에 있는 값이 response로 들어가게 된다.

    $.ajax({
      type: "GET",
      url: "여기에URL을입력",
      data: {},
      success: function(response){
        console.log(response)
      }
    })

❗️❕ 주의사항 ❗️❕
Ajacx code는 jquery가 import된 곳에서만 사용할 수 있다.

✏️ Ajax html code 내부 특정 속성 값 가져오기

🌐 Ajax
   아래와 같이 html code가 있고 html code 내부 <script> 영역에서 html code
   중 <img> 속성인 'src'에 접근하고자 할 때 작성방법은 두번째 코드와 같다.
   
   아래와 같이 접근하는 이유는 짧은 코드로 <img> 'src' 값을 변경할 수 있어 조작이
   편하다는 것이다. 아니면 위의 방법처럼 값에 접근하여 변수화 시켜 다시 append하는 
   여러번의 작업을 거쳐야 한다. 

 <img id="img-cat" src="route"/>

 $("#img-cat").attr('src', url);

✏️ Ajax 사용하여 웹페이지 열었을 때 특정 함수 호출하기

.ready()는 DOM(Document Object Model)이 완전히 불러와지면 실행되는 Event

디자인이 입혀지지 않은 상태로 문서 구조가 만들어진 시점에 실행.

//기본골격

$(document).ready(function(){
  // 실행할 기능을 정의해주세요.
})