JQuery: 두 판 사이의 차이

2021년 6월 13일 (일) 08:43 기준 최신판

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

각주

@@ 1번째 줄: / 1번째 줄: @@
-{{소문자}}
+{{소문자 제목}}
-'''jQuery'''는  [[자바스크립트]]를 좀 더 간결하게 사용할 수 있게 만드는 일종의 전처리기(Preprocessor)이다. 자체적으로 독립된 프로그래밍 언어는 아니고, 자바스크립트를
+'''jQuery'''는  [[자바스크립트]]를 좀 더 간결하게 사용할 수 있게 만드는 일종의 전처리기(Preprocessor)이며 자체적으로 독립된 프로그래밍 언어는 아니다.
 == 특징 ==
@@ 15번째 줄: / 15번째 줄: @@
 </syntaxhighlight>
 이것을 jQuery에서는 보다 더 간결하게 정의할 수 있다.
 <syntaxhighlight lang='jquery'>
 $('#id-example').click(function(){ (동작)});
@@ 32번째 줄: / 33번째 줄: @@
 == 미디어위키에서 ==
 [[미디어위키]]는 기본적으로 jQuery를 사용할 수 있다. [[미디어위키:Common.js]]나 사용자 자바스크립트 문서에서도 사용가능하다. 실제로 [[도움말:사용자 자바스크립트]]의 일부 예제들도 jQuery 문법을 사용한 객체들을 볼 수 있다.
 == jQuery Mobile ==
 jQuery를 활용한 모바일 호환 웹 프레임워크이다. 이쪽은 단순한 전처리기가 아닌 [[부트스트랩]]처럼 [[CSS]] 디자인 기능도 제공하는 종합적인 프레임워크이다.
 == 참조 ==
 * [https://jquery.com/ jQuery] 홈페이지
 * [https://jquerymobile.com/ jQuery Mobile]
+{{각주}}
 [[분류:JavaScript]]