Jquery/Ajax

abcd·2022년 1월 22일
0

프론트스타트

목록 보기
1/1

Jquery

Jquery란 ?

HTML의 조작하는 Javascript를 플랫폼으로 미리 작성해둔 라이브러리!

CSS에서의 bootstrap과 비슷하당!

주의점!
앞에서 말했듯이 Jquery는 소프트웨어가 아닌 라이브러리 이므로 Import를 하여 사용한다!

예시

document.getElementById("element").style.display = "none";
            는 아래와 동일하다
            $('#element').hide();

위의 코드문을 보듯이 약간 제이쿼리문은 조금 더 직관적이다!

Jquery Import

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로 다양한 콘텐츠를 사용자에게 네트워크 환경에서 전송해 주는 서비스이다.

JQuery 사용해보기!

내가 배우고 있는 스파르타코딩클럽 에서는 5가지 예시로 만들고 있다.
기타 여러가지를 찾아보고 사용해 봐야겠다.

input 박스의 값을 가져와보기

<linput id="crossfit">

$('#crossfit').val();

JQuery기술 문에서 #뒤로는 id값 .val => 사용기능에 대한 정의

div 보이기 / 숨기기

<div id="box">
	<input id="btn">

$('#box').hide();
$('#box').show();

input의 버튼을 클릭시 숨기는 hide기능과 show기능 이 있다.

이 기능은 css의 display값을 none으로 바꾸거나 block로 해주는 기능!

css의 값 가져와보기

$('#box').hide();
$('#box').css(display);

$('#box').show();
$('#box').css(display);

위의 인용문에서 확인차 .css(display)를통하여 확인해 보기

태그 내 텍스트 입력하기

$('#crossfit').text('크로스핏을 할 기회가 생긴다면 도망가세요 마지막 기회입니다.');

input tag일때의 텍스트 값을 변경해준다!(크로스핏 개힘듬 ㅠ)

태그 내 html 입력하기

<div id="samsso">
let temp_html = '<button>먹고싶다...</button>;

$('#samsso').append(temp_html)

그렇다 나는 삼쏘가 땡기고 있다..

button을 temp_html에 넣었다

주의점 ! 위에 같은 코드의 경우는 그냥 별 내용이없지만
문자 중간에 Javascript 변수를 삽입하기 위해서는 를 사용해야한다 (backtick)

Ajax

Ajax란?

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방식일시 함께 줄 데이터를 요청한다

0개의 댓글