jQuery?
제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리!
제이쿼리를 사용함으로써 자바스크립트를 손쉽게 활용할 수 있으며, 자바스크립트와 비교했을 때 같은 기능을 하는 코드여도 제이쿼리로 코딩한 코드가 짧고 단순한 코드로도 웹페이지에 다양한 효과나 연출을 적용할 수 있다.
- 엘리먼트를 선택하는 강력한 방법
- 선택된 엘리먼트들을 자바스크립트보다 효율적으로 제어할 수 있는 다양한 수단을 제공
라이브러리? (library)
자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들
jQuery 사용법
1.
html <head> 태그 안에 밑에 소스를 추가한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
2.
http://code.jquery.com/jquery-3.5.1.min.js
위 링크를 직접 들어가서 - 마우스 우측 클릭 - 다른 이름으로저장 - jquery-3.5.1.min.js
다운로드한 jquery-3.5.1.min.js 파일을 사용하는 ide에 추가 해준 다음 html 문서 <head> 태그 안에 <script src="./jquery/jquery.min.js"></script> 소스를 추가해주면 된다.
jQuery 기본 문법
$(선택자). 동작 함수();
달러($) 기호는 제이쿼리를 의미.
선택자 '#id', '.class', 'tag명'
window.onload = function() {
// JavaScript Code
};
$(document).ready(function(){
// jQuery Code
});JavaScript에서 Window 객체의 onload() 메서드를 이용하면 html문서가 모두 로드된 뒤에 window.onload 함수가 실행이 된다. $(document).ready(function(){ }); 같은 개념이다.
JavaScript vs jQuery
| JavaScript | jQuery |
| value | val() |
| innerHTML | html() |
| text() |
JavaScript
1)getter
let val = document.getElementById('id').value;
2)setter
document.getElementById('id') = 'abc123';
3)일반태그인 경우
document.getElementById('demo').innerHTML
4)html문서의 모든 p태그의 값을 수정할 때
let arrP = document.getElementsByTagName('p');
for(let i=0; i < arrP.length; i++){
arrP[i].innerHTML = "Java Script로 변경한 p 태그입니다";
}jQuery
getter
$('#id').html(); $('#id').text();
setter
$('#id').val('abc123');
일반태그인 경우
$('#demo').html();
4)html문서의 모든 p태그의 값을 수정할 때(p태그의 class명이 cls인 태그)
$("p.cls").text("p tag class cls");
'프로그래밍 언어 > jQuery' 카테고리의 다른 글
| [jQuery] 문서 객체 메소드 정의 및 예제코드 (0) | 2021.06.10 |
|---|---|
| [jQuery] 간단한 예제를 통해 getter, setter 이해하기 (0) | 2021.06.10 |
| [jQuery] .click 함수 사용 (JavaScript onclick()와 차이점) (0) | 2021.06.10 |