Jquery는 Javascript 라이브러리이다.
Javascript의 코드를 단순화 해주고, 배우기가 쉽다고 한다.
Jquery는 라이브러리라고 소개했듯이 별도의 설치프로그램이 존재하지는 않는다. 파일을 하나 다운받아서 프로젝트에 심어주는 Download 방식으로 적용하거나, 링크를 걸어 적용하는 CDN 방식이 있다.
어떠한 방식으로 하던 장단점은 있다.
먼저 Download 방식은 내가 작성하고 있는 프로젝트 안에 Jquery 적용 파일이 존재하기때문에 인터넷 환경과는 무관하게
Jquery를 사용할수 있다. 그렇지만 직접적으로 File이 들어가는거기때문에 상대적으로 Project가 무거워진다.
CDN파일은 File이 없기때문에 가볍다. 하지만 Online에서 Jquery를 연동하는거기때문에, 개발자의 환경에서 인터넷 환경이 불안정하거나 끊기게되면 Jquery를 적용할수가 없다.
둘중에 끌리는대로 선택하면 된다. 난 CDN 방식을 선택할것이다.
2022.12.28 - [Study/중앙정보처리학원과정] - 45일차. JQuery와 Connection Pool 환경설정
45일차. JQuery와 Connection Pool 환경설정
Jquery와 Connection Pool 오늘 오전엔 드디어 JQuery를 깔고, 그리고 가볍게 살펴보았다. 먼저 JQuery는 Javascripte Library이다. 그렇기때문에 라이브러리 설치를 해줘야한다 Jquery 라이브러리는 설치(적용)
yat-ong.tistory.com
이전 발행한 글에 보면 CDN 방식으로 사용가능한 Google URL을 링크 걸어놓은게 있다. 이것을 이용하여 Jquery 라이브러리를 설정해주고 기본 문법에 대해서 알아보겠다.
Jquery의 문법은 HTML 요소를 선택하고 작업하기 위해 맞춤 제작 된 라이브러리이다.
기본문법은 $로 시작하며 $('선택자').액션() 으로 이루어져있다.
그리고 이 $로 시작하는 행동단계의 Jquery문을 수행하기 위해서는 기본적으로 문서가 준비되었을때 수행하라는 기본 준비 단계 문법이 있다.
바로 $(document).ready(function(){수행할 jquery 액션}); 이다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<!-- google에서 제공하는 cdn방식의 jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<meta charset="utf-8">
<title></title>
<style></style>
<script>
$(document).ready(function(){ //문서가 준비되면 수행
alert($('p').html()); //Alert으로 P태그의 html부분을 get 하는 Jquery
});
</script>
</head>
<body>
<h1>Jquery의 기본 문법</h1>
<p id="text">새해복 많이 받으세요</p>
</body>
</html>이것이 Jquery의 기본 문법이다.
$('~~~~') ~~의 구간엔 CSS 선택자(ID, CLASS등)를 넣어줄수도있고, 태그 자체를 넣어줄수도 있다. 위의 문법에도 P 태그의 HTML 요소를 가져오는 Jquery 문법이다.
문서가 준비되면 수행하는 문구는 더 축약이 가능하다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<!-- google에서 제공하는 cdn방식의 jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<meta charset="utf-8">
<title></title>
<style></style>
<script>
$(function(){ //문서 준비
alert($('p').html()); //Alert으로 P태그의 html부분을 get 하는 Jquery
});
</script>
</head>
<body>
<h1>Jquery의 기본 문법</h1>
<p id="text">새해복 많이 받으세요</p>
</body>
</html>
$(document).ready 대신 $(function)으로 줄여서 사용 가능하다.
Java script의 라이브러리기때문에 기능에 대한 부분은 Java script와 동일하다, Javascript 보다 추가된 기능들도 많다.
개인적으로 Javascript의 명령어들은 매우 길다. document.getElementById 같은 너무너무~긴 문구들이
$('id명'). 으로 짧게 처리되니 Jquery는 그야말로 코드를 줄여주고 개발 시간을 줄여주는 필수 라이브러리라고 생각한다.