.png)
자바스크립트&제이쿼리 국비수업(그린컴퓨터학원) 내용 중 제이쿼리의 기초에 대해서 정리해보자
제이쿼리의 기초
제이쿼리란?
- 제이쿼리는 모질라 사의 자바스크립트 개발자였던 존 레식이 JS를 이용해 만든 라이브러리 언어이다
- 라이브러리 언어란 JS로 만들어진 다양한 함수들의 집합을 의미한다
제이쿼리 사용법
- 제이쿼리도 자바스크립트처럼 HTML에 라이브러리를 연결해야 사용할 수 있다
✨ 제이쿼리 라이브러리 연동하는 방식 2개- 다운로드 방식
제이쿼리 라이브러리를 제공하는 사이트에서 제이쿼리 라이브러리 파일을 직접 내려받아 HTML에 불러오는 방식- 1단계 : https://jquery.com/에 접속
- 2단계 : Download jQuery 클릭
- 3단계 : Download the compressed, production jQuery 3.6.0 클릭(버전명은 계속 바뀐다)
- 4단계 : 해당 URL로 들어가면 소스코드들이 나온다. Cntrl + S를 누르면 다운을 받을 수 있다. 이 js파일을 작성하고자 하는 프로젝트 폴더에 js라는 이름으로 폴더를 만들어서 저장한다
- 5단계 : HTML head 영역에
<script>태그를 삽입해서 연결해준다
<script src="./js/jquery-3.6.0.min.js"></script>
- 네트워크 전송방식
온라인에서 제공하는 제이쿼리 라이브러리 파일을 네트워크를 통해 HTML에 불러오는 방식이다. 인터넷이 연결된 환경에서만 이 방식을 사용할 수 있다- 1단계~3단계까지는 다운로드방식과 동일하다
- 4단계 : 해당 URL로 들어가 URL 주소를 복사한다
- HTML head 영역에
<script>태그를 삽입해서 연결해준다
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
- 다운로드 방식
선택자 사용하기
- 선택자를 사용하기 위해서 문서 객체를 불러와야 한다
✨ 기본형 : 선택자는$()에 문자형 데이터로 CSS 선택자를 입력하면 된다$> 제이쿼리 객체라는 뜻$("CSS 선택자").css("스타일 속성명","값");$("CSS 선택자").attr("속성명","값");
제이쿼리 사용해보기
HTML
- HTML 파일과 JS파일, 제이쿼리 파일을 연결해주는 script 코드 2줄을 보라!
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제이쿼리의 기초!</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/main1.js"></script>
</head>
<body>
<h1 id="a">title</h1>
<h2>title</h2>
<h3 class="a">title</h3>
<h4 class="b">title</h4>
<h5 class="c">title</h5>
</body>
</html>JQuery
- $(document).ready() : 예약함수이다. 문서를 위에서 아래로 쭉 해석한 후, 한 번 실행하게끔 예약이 된 함수이다.
- $(document).ready(function(){}) : 한 번 실행이 될 때, 실행될 명령(function(){})들을 넣어둔 것
- $(".a").css("color","red"); : a라는 클래스를 선택해서 글자색을 빨간색으로 바꾼다
- $("#a").css("color","blue"); : a라는 아이디를 선택해서 글자색을 파란색으로 바꾼다
- $("body > h2").css("color","orange"); : body tag들 중 h2 태그를 선택해서 글씨 색깔을 orange로 바꾼다
- $(".b").css("color","#fff").css("background-color","blue"); : b라는 클래스를 선택해서 글씨색깔을 흰색으로 바꾸고, 배경색깔을 blue로 바꾼다
- $(".c").css({"color":"orange","background-color":"aqua"}); : 위의 명령을 객체스타일로 한 것. 여러 스타일 변경을 한 번에 할 수 있다.
$(document).ready(function(){
$(".a").css("color","red");
$("#a").css("color","blue");
$("body > h2").css("color","orange");
$(".b").css("color","#fff").css("background-color","blue");
$(".c").css({"color":"orange","background-color":"aqua"});
});
JQuery로 제어한 결과창
👏 워후!
♪(^∇^*) 워-후!!（＾∀＾*）ﾉｼ