jQuery란
편리한 Javascript를 미리 작성해둔 라이브러리다. 따라서 쓰기 전에 import 가 필요하다.
import code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
CSS에서는 선택자로 class를 썼듯 jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리킨다.
보이기 / 숨기기 기능
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();
// id 값이 post-box인 곳을 가리키고, show()로 보이게 한다.
$('#post-box').show();
이미지/텍스트 바꾸기 기능
- 이미지 바꾸기 : `$("#아이디값").attr("src", 이미지URL);`
- 텍스트 바꾸기 : `$("#아이디값").text("바꾸고 싶은 텍스트");`
값 가져오기/입력하기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();
// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');
로딩 후 호출하기
$(document).ready(function(){
alert('다 로딩됐다!')
});
태그 내 html 코드 끼워넣기
let temp_html = `<button>나는 추가될 버튼이다!</button>`; // 추가하고 싶은 html 코드를 ` `안에 입력
$('#cards-box').append(temp_html); // id값이 cards-box인 태그에 temp_html 추가다른 언어와 문법이 많이 달라 가장 헷갈린 부분이었다. $('#id값') , ` ` 기호도 생소하기 때문에 많이 써서 익숙해져야겠다
Ajax 코드해석
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
지우기 기능
아래 코드에서 $('#names-q1').empty() 는
q1함수가 실행됐을 때 ajax가 실행되기 전에 먼저 id 값이 #names-q1인 태그의 내용을 나타내지 않는 기능을 구현한다.
<head>
<meta charset="UTF-8">
<title>jQuery Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
</style>
<script>
function q1() {
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function (response) {
}
}
})
}
</script>
</head>
<body>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
</ul>
</body>
empty() 와 비슷한 기능을 구현하는 함수로는 detach()와 remove()가 있다.
강의는 정말 맛보기용인 것 같아 다음엔 구글링으로 유용한 함수를 더 알아보고 연습해봐할 것 같다.
728x90
'항해99 > 웹개발 종합반' 카테고리의 다른 글
| 1주차 - HTML 태그 (0) | 2022.09.05 |
|---|---|
| 4주차 - FLASK 시작하기 - 서버, 클라이언트 파일 만들기 (0) | 2022.09.02 |
| 3주차 - 파이썬 패키지 사용 & 크롤링 (0) | 2022.09.01 |
| 1주차 - HTML, CSS (0) | 2022.08.28 |
| 웹개발 종합반 1주차 숙제: 팬명록 메인 페이지 만들기 (0) | 2022.08.28 |
댓글