jQuery란?
HTML의 요소들을 쉽게 조작하고 편리하게 사용할 수 있게 만든 라이브러리로 Javascript를 미리 작성해둔 것이다.
Javascript로도 모든 기능을 구현할 수는 있지만, 코드가 복잡하고, 브라우저 간 호환성 문제 등도 고려해야해 JQuery라는 라이브러리가 등장하게 되었다고 한다.
jQuery의 특징
1. 뛰어난 DOM 구조 탐색
jQuery는 DOM(Document Object Model) 구조 탐색이 매우 뛰어나다. DOM은 문서 객체 모델로 트리 자료구조의 형태를 가지고 있는데 말 그대로 나무처럼 뻗어나가면서 하위로 펼쳐져서 내려가는 구조이다.
글을 작성할 때도 서론, 본론, 결론 속에 소제목을 쓰고 내용을 써 내려가는 것처럼 코드에서도 전개 순서가 필요하다. 그 순서에 맞게 코드를 작성하는 것이 DOM이라고 하며 순서대로 작성된 코드 사이에서 원하는 위치의 값을 가져오거나 입력할 때 편리하다.
2. 크로스 브라우징
jQuery는 모든 브라우저를 지원하고 있어, 코드가 깨지지 않고 동작한다. jQuery의 제일 큰 장점이라고도 할 수 있다
jQuery의 단점
1. 느린 구현 속도
jQuery는 순수 자바 스크립트를 이용해 구현한 코드보다 속도가 현저히 느리다.
jQuery가 동작할 때는 라이브러리에 걸쳐 해당 브라우저에 맞는 네이티브 자바 스크립트로 변환 시켜야 하기에 코드가 많아지면 속도가 느려진다.
2. 코드 관리의 어려움
코드가 간결해서 쉽게 느낄 수도 있지만 코드를 관리하는 부분에서는 힘들 수도 있다.
jQuery 적용
- 제이쿼리는 자바스크립트 라이브러리이므로, 제이쿼리 파일은 자바스크립트 파일 형태로 존재하기 때문에 웹 페이지에서 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 먼저 웹 페이지에 로드해야 한다.
- 웹 페이지에 제이쿼리 파일을 로드하는 방법
- 제이쿼리 파일을 다운받아 로드
- CDN(Content Delivery Network)을 이용하여 로드
1. 제이쿼리 파일을 다운받아 로드하는 방법
제이쿼리 공식 사이트 에서 제이쿼리를 다운받은 후 제이쿼리 파일을 서버에 저장하고,
< script> 태그를 웹 페이지의 < head> 태그 내에 삽입.
<head>
<script src="/user(파일경로)/jquery-3.2.1.min.js(제이쿼리파일명)"></script>
</head>2. CDN을 이용하여 로드하는 방법
- CDN(Content Delivery Network) : 웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때, 자동으로 가장 가까운 서버에서 다운받도록 하는 기술.
- CDN(Content Delivery Network) 장점
- 특정 서버에 트래픽이 집중되지 않는다.
- 콘텐츠 전송 시간이 매우 빨라진다.
- 제이쿼리 파일을 서버에 따로 저장하지 않아도 사용 가능.
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>제이쿼리 CDN 공식 사이트
현재 jquery의 최신 버전은 3.7.1 버전.보통은 원본을 압축한 minified 버전을 주로 사용한다.
<script src="https://code.jquery.com/jquery-latest.min.js"></script>jquery 사이트에서 공식으로 사용하는 최신소스이다.
새로운 버전이 나오면 자동으로 업데이트 되기에 테스트 사이트에서 가볍게 쓰기에 용이하다.
jQuery CDN 종류
jquery에서는 uncompressed, minified, slim, slim minified 총 4가지의 패키지를 제공한다.
uncompressed : 원본 파일(확장자 .js)
minified : 원본을 압축한 파일 (확장자 : .min.js)
slim : 해당 버전에서 필요없다고 생각하는 라이브러리를 제거한 파일 (.slim.js)
jQuey.fn.extend
jQuery.fn.load
jQuery.each
jQuery.ajaxSettings.xhr
jQuery.parseXML
jQuery.easing, jQuery.Animation, jQuery.speed
slim minified : slim 파일을 압축한 파일(.slim.min.js)
jQuery 기본 문법
$(선택자).동작함수();[ $ ] 기호는 제이쿼리를 의미하며, 제이쿼리에 접근할 수 있게 해주는 식별자이다.
선택자를 이용하여 원하는 HTML 요소를 선택하고,
동작 함수를 정의하여 선택된 요소에 원하는 동작을 부여한다.
$() 함수
선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할.
() 함수를 통해 생성된 요소를 제이쿼리 객체 (jQuery object)라고 한다.
제이쿼리 객체의 메소드를 사용하여 여러 동작을 부여할 수 있다.
Document 객체의 ready() 메소드
자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 한다.
일반적으로는 별다른 문제가 발생하지 않지만,
아직 생성되지 않은 HTML 요소에 속성을 추가하려고 하거나,
아직 로드되지 않은 이미지의 크기를 얻으려고 할 경우
Uncaught TypeError가 발생하여 실행중이던 스크립트는 중지된다.
이와 같은 상황에서는 Document 객체의 ready() 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정한다.
$(document).ready(function() {
jQuery code
});document.ready를 쓰는 경우는 => 전체적으로 필요한 경우
전체단위로 사용할 경우 ready() 메소드를 사용한다.
함수를 만들어서 쓰는 경우는 => 특정 버튼에만 기능 동작이 필요한 경우
세부단위로 사용할때는 함수를 만들어 사용한다.
요소 선택
제이쿼리를 사용하면 간단하게 HTML 요소를 선택하여, 선택된 요소에 특정 동작을 부여할 수 있다.
// 모든 <p> 요소를 선택합니다.
$("p")
// ID가 "myDiv"인 요소를 선택합니다.
$("#myDiv")
// 클래스가 "highlight"인 요소를 선택합니다.
$(".highlight")
// 특정 조건에 맞는 요소를 선택합니다.
$("input[type='text']")이벤트 처리
이벤트 핸들러를 추가하여 사용자의 상호작용에 반응하는 기능을 부여할 수 있다
// 버튼이 클릭되었을 때 메시지를 출력합니다.
$("button").click(function() {
alert("버튼이 클릭되었습니다!");
});
// 마우스를 요소 위로 올렸을 때 스타일을 변경합니다.
$("p").hover(function() {
$(this).css("color", "red");
}, function() {
$(this).css("color", "black");
});요소 조작
HTML 요소의 내용이나 스타일을 변경하거나 값을 변경한다.
// <p> 요소의 텍스트를 변경합니다.
$("p").text("새로운 내용");
// <div> 요소의 배경색을 변경합니다.
$("div").css("background-color", "yellow");
// <input> 요소의 값을 가져옵니다.
var value = $("input").val();
// input 박스 값을 변경합니다.(또는 해당 값으로 입력하기)
$('#해당 id 값').val('바꿀값);HTML 내용 변경
$("selector").html("new content");CSS 속성 변경:
$("selector").css("property", "value");클래스 추가/제거
$("selector").addClass("class");
$("selector").removeClass("class");
참고
https://jjungslife.tistory.com/40
https://letsplaycoding.tistory.com/31
