JQuery / Ajax

JQuery

jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리이다.

남이 짜둔 CSS코드는 부트스트랩, 남이 짜둔 javascipt코드는 jQuery!

JQuery 세팅하기

head 에 링크넣기

<script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>

Ajax

AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말한다.

AJAX 주요특징

• 페이지 새로고침 없이 서버에 요청
• 서버로부터 데이터를 받고 작업을 수행

참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.

AJAX 기본코드 꺼내쓰기

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

JQuery + AJAX 조합

* 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
* 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

temp_html 사용하기

let temp_html = `(붙일코드)`
$(‘#id값).append(temp_html)

temp_html 과 if문 동시에 사용하기

let temp_html =``
	if (무언가 > 70) {
		temp_html = `${값}`
	} else {
		temp_html = `${값}`
	}
	$(‘#표시할곳이름’).append(temp_html)