JQuery(제이쿼리)
Javascript의 라이브러리(library) 중 하나다
Library(라이브러리)
자주 사용하는 코드를 미리 작성해 놓은 묶음이다
예를들어 소문자를 대문자로 바꿔주는 toUpperCase 함수나, 문자열을 특정 문자로 나눠주는 split함수 등이 JS에서 기본으로 제공하는 라이브러리에서 사용하는 함수이다(내가 따로 함수를 만들지 않아도 미리 약속되어 있는 함수)
JQuery와 Javascript - 코드 길이 비교
jQuery를 이용하는 이유는 좀더 코드를 직관적이고 짧게 쓸 수 있기 때문이다. 다음의 예시를 보자
JS
document.getElementById("apple").style.display = "none";
document.getElementById("apple") → 문서내에 "apple"라는 Id 속성을 가진 요소를 가져와서
(getElementById 함수 → get:가져오다, Element: 요소, By: ~로부터, Id: Id)
.style.display = "none" → 스타일에서 디스플레이(화면표시) 부분이 없게 해라("none")
(화면을 보이게 하려면 "block"을 적용하면 된다.)
JQuery
$('#apple').hide();
$('#apple').hide(); → "apple"이라는 id 속성을 사진 요소를 숨겨라(hide), JQuery에서는 항상 $로 시작한다
(보이게 하려면 .show();를 적용하면 된다)
클래스(class)와 아이디(id)
클래스는 이전 포스팅에서 '이름표'라고 밝힌적 있다. 아이디 역시 이름표이다. 다만 클래쓰는 한 document에서 같은 이름을 여러번 사용이 가능하고, 아이디는 같은 아이디를 여러번 쓸 수 없다.
<style>
.a {
color: blue;
}
#b {
color: red;
}
</style>
</head>
<body>
<p class="a" , id="b">클라쓰 a다 아이디 비다</p>
<p class="a" , id="c">클라쓰 a다 아이디 씨다</p>
</body>
예를 들어 위의 코드처럼 "a"라는 클래스를 두 개의 <p>태그에 적용할 수는 있지만, id는 각각 "b"와 "c"로 한번씩만 쓸 수 있다.
그리고 "a"라는 클래스를 가진 태그를 글자색을 파란색으로 적용시켰지만(.a { color: blue; } ) "b"라는 id를 가진 태그는 빨간글자를 적용시켰기 때문에(#b { color: red; } ) 출력해보면 b라는 id를 가진 태그는 빨간색으로 나온다.
JQuery 사용 준비 (Import)
JQuery를 사용하기 위해선 "미리 작성된 코드(JQuery)를 가져오겠다!"고 명령해 줘야 한다. → Import
<head>와 </head> 사이에 아래 코드를 넣으면 된다
(JQuery 3.5.1 버전을 불러와!)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
여기에서 최신 버전의 JQuery를 확인하고 버전 숫자를 변경해주면 된다.
https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
jQuery Get Started Adding jQuery to Your Web Pages There are several ways to start using jQuery on your web site. You can: Download the jQuery library from jQuery.com Include jQuery from a CDN, like Google Downloading jQuery There are two versions of jQuer
www.w3schools.com
여기는 참조(jQuery import 방법이 영어로 나와있다)
다음시간에는 JQuery 연습을 해보겠다
공감 부탁 드려요 :)
'아무것도 모르고 시작하는 코딩' 카테고리의 다른 글
| 제이쿼리(JQuery) 박스 열기 닫기(hide, show) 클릭하면 글자 바꾸기 (text) | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.13 |
|---|---|
| 자바스크립트 이미지 가운데 정렬 안됨(부트스트랩bootstrap 사용) | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.13 |
| 자바스크립트 n-1까지의 합, 갯수 세기, 조건 항목 추출하기 | 아무것도 모르고 시작하는 코딩 (1) | 2020.08.10 |
| 자바스크립트 조건문,반복문(if, else if, for) | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.10 |
| 자바스크립트 기본 함수(return 함수) | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.10 |