HTML의 조작하는 Javascript를 플랫폼으로 미리 작성해둔 라이브러리!
CSS에서의 bootstrap과 비슷하당!
주의점!
앞에서 말했듯이 Jquery는 소프트웨어가 아닌 라이브러리 이므로 Import를 하여 사용한다!
document.getElementById("element").style.display = "none";
는 아래와 동일하다
$('#element').hide();
위의 코드문을 보듯이 약간 제이쿼리문은 조금 더 직관적이다!
https://www.w3schools.com/jquery/jquery_get_started.asp
아주 유명한 웹에 바이블 w3schools에 임포트 가능한 것들이 모여있다!
Downloading JQuery -> 직접 스크립트에서 다운로드를 사용하여 이용한다.
<head>
<script src="jquery-3.5.1.min.js"></script>
</head>
JQuery CDN
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
CDN을 이용하여 네트워크상에서 직접 import한다!
여기서 CDN = Content Delivery Network로 다양한 콘텐츠를 사용자에게 네트워크 환경에서 전송해 주는 서비스이다.
내가 배우고 있는 스파르타코딩클럽 에서는 5가지 예시로 만들고 있다.
기타 여러가지를 찾아보고 사용해 봐야겠다.
<linput id="crossfit">
$('#crossfit').val();
JQuery기술 문에서 #뒤로는 id값 .val => 사용기능에 대한 정의
<div id="box">
<input id="btn">
$('#box').hide();
$('#box').show();
input의 버튼을 클릭시 숨기는 hide기능과 show기능 이 있다.
이 기능은 css의 display값을 none으로 바꾸거나 block로 해주는 기능!
$('#box').hide();
$('#box').css(display);
$('#box').show();
$('#box').css(display);
위의 인용문에서 확인차 .css(display)를통하여 확인해 보기
$('#crossfit').text('크로스핏을 할 기회가 생긴다면 도망가세요 마지막 기회입니다.');
input tag일때의 텍스트 값을 변경해준다!(크로스핏 개힘듬 ㅠ)
<div id="samsso">
let temp_html = '<button>먹고싶다...</button>;
$('#samsso').append(temp_html)
그렇다 나는 삼쏘가 땡기고 있다..
button을 temp_html에 넣었다
주의점 ! 위에 같은 코드의 경우는 그냥 별 내용이없지만
문자 중간에 Javascript 변수를 삽입하기 위해서는를 사용해야한다
(backtick)
WEB2.0의 기반 기술!
(Asynchronous Javascript And XML)이며
말 그댜로 HTML만으로 어려운 다양한 작업을 웹페이지에서 구현해 이용자가 웹페이지와 자유롭게
상호작용할 수 있도록 하는 기술이다.
Ajax또한 JQuery와 마찬가지로 Import를 해줘야함
'''
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
'''
Ajax의 기본 골격이며 Ajax는 Api의 방식을 사용한다
tyoe: get,post방식이 있으며
url : api의 주소를 의미한다
data : get방식은 필요없지만 post방식일시 함께 줄 데이터를 요청한다