(→특징: 설명 추가) |
잔글 (각주 문법 추가) |
||
| 40번째 줄: | 40번째 줄: | ||
* [https://jquery.com/ jQuery] 홈페이지 | * [https://jquery.com/ jQuery] 홈페이지 | ||
* [https://jquerymobile.com/ jQuery Mobile] | * [https://jquerymobile.com/ jQuery Mobile] | ||
{{각주}} | |||
[[분류:JavaScript]] | [[분류:JavaScript]] | ||
2020년 9월 8일 (화) 10:47 판
틀:소문자 jQuery는 자바스크립트를 좀 더 간결하게 사용할 수 있게 만드는 일종의 전처리기(Preprocessor)이다. 자체적으로 독립된 프로그래밍 언어는 아니고, 자바스크립트를
특징
브라우저에 의존적이지 않음
간결한 문법
DOM 자바스크립트는 id 선택자는 document.getElementById('(id명)'), 태그 선택자는 document.getElementsByTagName('(태그명)')등으로 파편화되어 있다. 그러나 jQuery에서는 간단하게 $('(쿼리명)').(명령어)형태로 지정할 수 있다.
예를 들면 div 태그 안에 클릭해서 특정 웹사이트로 연결하는 기능을 추가하고 싶을 땐 바닐라 자바스크립트에서는
// 우선 선택하기. ECMA6부터는 document.querySelector('#id-example')으로도 선택 가능.
idn = document.getElementById('id-example');
idn.onclick = function () {(동작)};
이것을 jQuery에서는 보다 더 간결하게 정의할 수 있다.
$('#id-example').click(function(){ (동작)});
사용방법
우선 HTML 페이지에서 jQuery를 사용할 때에는 jQuery 다운로드 페이지에서 직접 자바스크립트 파일을 다운로드 받을 수 있다. 그 다음에 <body> 태그 아래 안쪽에는 다음과 같은 스크립트를 집어넣는다.
<script type="text/javascript" src="(상대경로)/jquery-3.5.1-min.js"/>
아니면 다음과 같은 코드를 body 태그 안쪽 맨 아래에 입력해도 상관없다. 다만 이 경우는 인터넷이 연결되지 않으면 jQuery 코드를 사용할 수 없다.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"/>
미디어위키에서
미디어위키는 기본적으로 jQuery를 사용할 수 있다. 미디어위키:Common.js나 사용자 자바스크립트 문서에서도 사용가능하다. 실제로 도움말:사용자 자바스크립트의 일부 예제들도 jQuery 문법을 사용한 객체들을 볼 수 있다.
jQuery Mobile
jQuery를 활용한 모바일 호환 웹 프레임워크이다. 이쪽은 단순한 전처리기가 아닌 부트스트랩처럼 CSS 디자인 기능도 제공하는 종합적인 프레임워크이다.
참조
- jQuery 홈페이지
- jQuery Mobile