jQuery 설치법
https://releases.jquery.com/ -> jQuery 3.x 의 minified 클릭, 코드 복사하여 붙여넣기
jQuery CDN
The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr
releases.jquery.com
<script
src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous"></script>
사용법
● 제이쿼리 cnd을 붙여넣는다. body태그가 끝나기 전에 넣으면 되는데, 나는 head 태그 속에 넣어주었다.
<h1 class="hello">안녕하세요</h1>라는 태그를 넣어, 사이트에 '안녕하세요' 가 표시되도록 한다.
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
// ------------------------------- 제이쿼리 첨부 ------------------------------------ //
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<body>
<h1 class="hello">안녕하세요</h1>
<script>
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
저 '안녕하세요' 롤 '안녕히 가세요' 로 바꾸려면, 생 자바스크립트로는 querySelector이나 getElementsByClassName을 사용해야 한다.
// querySelector
document.querySelector(".hello").innerHTML = "안녕히가세요. ";
하지만 제이쿼리를 사용하면, document.querySelector 부분을 달러 표시 $ 하나로 바꾸어 줄 수 있다.
$('.hello').html('안녕히가세요')
● class를 추가하고 지우는 것 또한 짧게 줄일 수 있다. 생 자바스크립트는 document를 통해 요소를 얻어온 다음, classList 메소드를 사용해야 한다.
document.getElementsById("hello").classList.toggle("somthing");
하지만 제이쿼리는 달러기호와 removeClass(), toggleClass() 등으로 줄일 수 있다.
$(".hello").addClass("somthing");
● 같은 이름의 여러 요소를 한번에 바꾸는 것 또한 간편해진다.
<h1 class="hello">안녕하세요</h1>
<h1 class="hello">안녕하세요</h1>
<h1 class="hello">안녕하세요</h1>
<h1 class="hello">안녕하세요</h1>
<h1 class="hello">안녕하세요</h1>
// 생 자바스크립트
document.querySelectorAll(".hello")[0].innerHTML = "안녕히가세요";
document.querySelectorAll(".hello")[1].innerHTML = "안녕히가세요";
document.querySelectorAll(".hello")[2].innerHTML = "안녕히가세요";
document.querySelectorAll(".hello")[3].innerHTML = "안녕히가세요";
document.querySelectorAll(".hello")[4].innerHTML = "안녕히가세요";
// 제이쿼리
$(".hello").html("안녕히가세요");
● 이벤트 리스너도 .on메소드를 통해 짧게 줄일 수 있다. .on('이벤트명', 콜백함수) 로 작성한다.
<button class="button">버튼</button>
// 자바스크립트
document.querySelector(".button").addEventListener("click", function () {
console.log("실행할 함수..");
});
// 제이쿼리
$('.button').on('click',function(){
console.log('제이쿼리로 실행할 함수')
})
● 애니메이션을 줄 수도 있다.
$(".button").on("click", function () {
$(".hello").fadeOut();
});
● 토글 메뉴 만드는법
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="main.css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<ul class="list-group">
<li class="list-group-item">1</li>
<li class="list-group-item">2</li>
<li class="list-group-item">3</li>
<li class="list-group-item">4</li>
<li class="list-group-item">5</li>
</ul>
<script>
$(".navbar-toggler").on("click", function () {
$(".list-group").toggleClass("show");
});
// document
// .getElementsByClassName("navbar-toggler")[0]
// .addEventListener("click", function () {
// document
// .getElementsByClassName("list-group")[0]
// .classList.toggle("show");
// });
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
댓글