⭐️ jQuery 란?
jQury란 기존의 자바스크립트 언어만으로 구현하기에는 복잡했던 구문을 간소화 하기 위해
만들어진 JavaScript기반의 라이브러리이다.
라이브러리를 통해 복잡한 JavaScript구문보다 짧고 쉽게 개발이 가능하다 ‼️
🔥 장점
1 ) DOM 요소와 관련된 스크립트를 보다 쉽게 구현할 수 있음 -> 가장 큰 이유 ‼️
2 ) AJAX(비동기 통신) 이벤트 처리등을 폭넓게 지원함
3 ) jQuery와 관련된 확장형 플러그인 , 오픈 API등을 지원 (차트, 슬라이드, 캘린더 등)
⭐️ jQuery 연결 방법
heed 태그내에 script 태그로 외부 jQuery관련 .js파일 연결하는 방법이 있다.
여기에는 오프라인 / 온라인 방식이 있다.
1. 오프라인 - jQuery라이브러리 파일을 직접 다운로드 받은 후 경로 지정
2. 온라인 - CDN(Content Delivery Network)방식
CDN 방식으로 진행 하겠다.
jQuery CDN
jQuery CDN – Latest Stable Versions jQuery Core Showing the latest stable release in each major branch. See all versions of jQuery Core. jQuery 3.x jQuery 2.x jQuery 1.x jQuery Migrate jQuery UI Showing the latest stable release for the current and legac
releases.jquery.com
해당 페이지에 들어가서 사용할 버전의 jQuery 라이브러리를 가져오면 된다.
본인은 jQuery 3.7.1 , jQueryUI 1.14.1 URL을 가져옴.
해당 사진처럼 다운 방식이 4가지가 존재하는데, uncompressed를 다운 받으면 된다.
[ 적용 예시 ]
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 외부 라이브러리 -->
<!-- jQuery 3.7.1 -->
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"
></script>
<!-- jQueryUI 1.14.1 -->
<script
src="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"
integrity="sha256-AlTido85uXPlSyyaZNsjJXeCs07eSv3r43kyCVc8ChI="
crossorigin="anonymous"
></script>
</head>
⭐️ jQuery 사용법
사용하기 전에 jQuery구문으로 dom요소를 다루는 구문을 기본적으로 작성할 것이기 때문에
문서상에 요소들이 다 만들어지고나서 실행되어야 한다 ‼️
그러기 위해선 window.onload 이벤트를 통해 해당 문서의 요소들이 전부 로드되고
외부문서들도 전부 가져온 뒤 실행 시켜야한다.
window.onload이벤트 -> 해당문서의 모든 요소들이 전부 로드되고 외부문서들도 전부 가져온 뒤
실행되는 이벤트
[ onload 사용 예제]
window.onload = function(){
실행 내용;
}
// 위 코드와 같은 역할을하는 jQuery 구문
$(function() {
실행 내용;
});
// 위 코드와 같은 역할을 하는 jQuery 구문
$(document).ready(function (){
실행 내용;
});
위 세 코드는 다 같은 역할을 하고 , 두번째,세번째 코드만 jQuery 구문으로
jQuery를 사용하기 위해 onload 이벤트를 jQuery의 구문을 통하여 사용하여 사용할 수 있다.
[ jQuery 사용 예시 ]
$(function () {
//순수 자바스크립트
document.getElementsByTagName('태그명'); : 배열
const pArr = document.getElementsByTagName('p');
for (let pEl of pArr) {
pEl.style.color = 'red';
}
//jQuery방식 -> $('선택자')
$('p,h5').css('color', 'red');
$('.btn').click(function () {
alert('안녕하세요');
});
let $btnList1 = $('.btn');
let btnList2 = document.querySelectorAll('.btn');
console.log($btnList1);
console.log(btnList2);
});
jQuery 구문으로 $(function){} 안에 순수 자바스크립트를 사용하여 선택자를 통해 속성을 가져올 수 있지만,
jQuery방식으로 $('선택자') 구문으로 동일하게 선택자를 가져와서 사용할 수 있다.
jQuery에는 많은 함수가 있고 사용법이 있지만, 기본 바닐라 자바스크립트와
크게 다를것이 없고 CDN방식으로 가져와서 사용을 하거나
따로 라이브러리를 다운받아서 사용하는 차이가 있다.
그리고 사용할땐 반드시 onload함수가 실행이되고 사용할 수 있음을 기억하자.
또한 DOM 요소와 관련된 스크립트를 보다 쉽게 구현할 수 있는것이 jQuery의 강점이다 ‼️
'Front End > Java Script' 카테고리의 다른 글
| map함수에 대하여 (0) | 2025.02.11 |
|---|---|
| CallBack 과 비동기 함수에 대하여 (0) | 2025.02.11 |
| JavaScript Scope에 대하여 (1) | 2025.02.10 |
| getElementById 와 querySelector 의 차이점 (0) | 2025.02.08 |
| JavaScript란 (1) | 2025.02.07 |