-
jQuery - jQuery 기본과 사용방법IT/jQuery 2020. 5. 27. 17:31반응형
안녕하세요.
오늘은 웹개발에 유용하게 굉장히 많이 쓰이고 있는 jQuery에 대한
정보들을 작성하려고 합니다.
jQuery는 사용하기 편하기 때문에
많은 사람들에게 사랑을 받고 있는데, 이 jQuery 의 기본은 알고 사용하면 조금 더 수월하고 폭넓은 웹개발을 할 수 있을 것입니다.
출처 : https://poiemaweb.com/jquery-basics 1. jQuery 란 ?
jQuery는 존 레식이 2006년에 발표한 크로스 플랫폼을 지원하는 경량의 자바스크립트 라이브러리이다.
jQuery는 빠르고 기능이 풍부한 자바스크립트이며, 다양한 브라우저에서 작동하기 쉬운 API를 활용하여 HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 Ajax 와 같은 것들을 간단하게 만들 수 있습니다. 다양한 기능과 확정 성의 조합으로 jQuery는 수백만의 사람들에게 사랑을 받고 있습니다.
2017년 기준으로 상위 100만개의 웹 페이지 중 89% jQuery를 사용하고 있다고 합니다.
2. jQuery의 특징
① 크로스 플랫폼을 지원하는 jQuery는 어떠한 브라우저에서도 동일하게 동작한다. 이것은 브라우저 호환성을 고려하여 대체 코드를 작성할 필요가 없다.
② 네이티브 DOM API 보다 직관적이고 편리한 API를 제공한다. CSS 스타일의 selector를 사용할 수 있으며 조작 또한 유연하게 할 수 있다.
③ 이벤트 처리, Ajax, Animation 효과를 쉽게 사용할 수 있다.
④ 다양한 플러그인이 존재하며 다른 라이브러리들과 충돌을 일으키지 않는다.
3. jQuery 문법
제이쿼리를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있습니다.
제이쿼리의 기본 문법은 아래와 같습니다.
$(선택자).동작함수();$ 기호는 제이쿼리를 의미하며, 제이쿼리에 접근할 수 있게 해주는 식별자 입니다.
선택자를 이용하여 원하는 HTML 요소를 선택하고 동작 함수를 정의하여 선택 된 요소에 원하는 동작을 설정합니다.
$() 함수는 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할을 합니다.
$() 함수의 인수로는 HTML 태그 이름 뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있습니다.
이러한 $() 함수를 통해 생성된 요소를 제이쿼리 객체라고 합니다.
제이쿼리는 이렇게 생성된 제이쿼리 객체의 메소드를 사용하여 여러 동작을 설정할 수 있습니다.
4. jQuery 사용하기
jQuery를 사용하는 방법은 두가지가 있습니다.
그 외에 더 있을 수도 있지만 저는 두가지만 알고 있습니다.
첫번째로는,
CDN 호스트를 사용하는 방법입니다.
두번째로는,
직접 내려 받아 사용하는 방법 입니다.
사용할 코드를 HTML <head></head> 태그 내에 작성하여 사용하면 됩니다.
① CDN 호스트를 사용하는 방법
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>② 직접 내려 받아 사용하는 방법
(직접 내려 받아 사용하는 경우에는 경로를 정확히 설정해주어야 합니다.)
<script src="jquery-3.5.1.min.js"></script>
자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 합니다.
보통은 별 다른 문제가 발생하지 않지만,
아직 생성되지 않은 HTML 요소에 속성을 추가하려고 하는 경우와
아직 로드되지 않은 이미지의 크기를 얻으려는 경우 와 같이 이런 경우에는 오류가 발생합니다.
그럼 이제 jQuery 를 사용해보겠습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>hello_jQuery</title> <script src="jquery-3.5.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //웹페이지가 로드가 완료 후에 해당 함수를 실행합니다. alert('1'); }); </script> </head> <body> </body> </html>위와 같이,
$(document).ready(function() {} 내에 있는 코드들은,
웹페이지가 로드 된 후에 실행 합니다.
위의 코드를 해석해보면, 웹 페이지가 로드가 완료되면 경고창 1 을 출력하라라는 의미입니다.
위와 같이 jQuery에 대한 기본과 사용방법에 대하여 알아보았습니다.
다음에는 jQuery를 사용할 때의 기본 문법과 함수 사용,
HTML 요소들을 조작하는 방법 등을 포스팅하겠습니다.
그럼 저는 이만 !
반응형댓글