카테고리 없음
JavaScript AWS 클라우드 기반 Devops 개발자 과정 jQuery
minkhinformation
2025. 3. 11. 10:02
jQuery란?
기존의 자바스크립트 언어만으로 구현하기에는 복잡했던 구문을 간소화하기 위해 만들어진 JavaScript기반의 라이브러리
즉, JavaScript로 유용한 함수나 내용들을 다른 누군가가 이미 정의해 놓은 것이다.
| 장점 |
| 복잡한 JavaScript구문보다 짧고, 쉽게 개발이 가능하다. |
| DOM요소와 관련된 스크립트를 쉽게 구현할 수 있다. |
| AJAX(비동기통신) 이벤트 처리등을 폭넓게 지원한다. |
| jQuery와 관련된 확장형 플러그인, 오픈 API등을 지원한다.(차트, 슬라이드, 캘린더...) |
jQuery 라이브러리 연결방법
haed 태그 내에 script태그로 외부 jQuery관련 .js파일 연결하기
단, 오프라인방식/ 온라인 방식이 있다.
1. jQuery라이브러리 파일을 직접 다운로드한 후 경로를 지정한다.
2. CDN(Content Delicery Network) 방식
CDN방식이란?
파일을 다운로드하여서 저장할 필요 없이 라이브러리를 제공하는 사이트의 url을 제시하면 브라우저에서 로딩 시 직접 해당 서버에서 파일을 다운로드해서 그때그때 사용하는 방식이다.
<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.0/jquery-ui.min.js" integrity="sha256-Fb0zP4jE3JHqu+IBB9YktLcSjI1Zc6J2b6gTjB0LpoM=" crossorigin="anonymous"></script>
</head>
jQuery구문 작성하기
jQuery구문으로 dom요소를 다루는 구문을 기본적으로 작성할 것이기 때문에 문서상에 요소들이 다 만들어지고 나서 실행되어야 한다.
window.onload이벤트 -> 해당 문서의 모든 요소들이 전부 로드되고 외부문서들도 전부 가져온 뒤 실행되는 이벤트
<script>
window.onload = function(){
console.log("js로딩 완료");
}
$(function(){ //window.onload와 동일한 기능을 제공
console.log("jquery 사용준비완료");
})
$(document).ready(function(){ //document.onload와 동일한 기능을 제공
console.log("document로딩 완료")
})
console.log("js실행 시점");
</script>
jQuery에서의 input
jQuery에서 input
텍스트상자 :버튼상자 :
체크박스 :
첨부파일 :
비밀번호 :
라디오버튼 :
초기화버튼 :
제출버튼 :
<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.0/jquery-ui.min.js" integrity="sha256-Fb0zP4jE3JHqu+IBB9YktLcSjI1Zc6J2b6gTjB0LpoM=" crossorigin="anonymous"></script>
</head>
<body>
<h3>jQuery에서 input</h3>
텍스트상자 : <input type="text"> <br>
버튼상자 : <input type="button"> <br>
체크박스 : <input type="checkbox"> <br>
첨부파일 : <input type="file"> <br>
비밀번호 : <input type="password"> <br>
라디오버튼 : <input type="radio"> <br>
초기화버튼 : <input type="reset"> <br>
제출버튼 : <input type="submit"> <br>
<script>
$(function(){
$(":text").css("background", "red").val("빨간상자");
$(":button").css({
width : "100px",
height : "100px"
}).val("큰버튼");
//속성을 변경할 때 .attr이라는 속성을 이용할 수 있다.
$(":checkbox").attr("checked", true);
//첨부파일 input의 배경을 green으로
$(":file").css("background-color", "green");
$(":file").css("background-color", "green");
$(":file").attr("background","green");
//비밀번호 input의 배경색을 yellow로
$(":password").css("background", "yellow");
//라디오버튼 check상태로, 가로 50px, 세로50px로
$(":radio").attr("checked",true).css({
widht : "50px",
height : "50px"
});
//제출버튼 클릭시 alert("제출완료") 실행되도록
$(":submit").click(function(){
alert("제출완료")
});
})
</script>
</body>
jQuery 이벤트
1. 클릭 시 요소 추가
클릭시 h6요소 추가
2. 시각적인 효과(Effect 메서드)
페이지 내에 애니메이션 효과를 주기 위해 사용되는 메서드
선택된 요소가 점점 커지면서 보여지고, 점점 작아지면서 사라지게 만드는 메서드 show | hide | toggle
<body>
<button id="show-btn">보여주기</button>
<button id="hide-btn">숨기기</button>
<button id="toggle-btn">토글</button>
<br><br>
<img id="hide-show-img" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FcoBvhF%2FbtsMF42yw5h%2FAAAAAAAAAAAAAAAAAAAAANEI9SwHi4RlPMCFgbcA5ctFWE_UN2CIk5MsbqvrKv_c%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3Duyw9yAL5mcZm3tgg6IIBaam3Wm0%253D" alt="테스트이미지">
<script>
$("#show-btn").click(function(){
$("#hide-show-img").show(5000);
})
$("#hide-btn").click(function(){
$("#hide-show-img").hide(5000);
})
$("#toggle-btn").click(function(){
$("#hide-show-img").toggle(5000);
})
</script>
</body>
선택된 요소가 점점 투명해지면서 사라지거나 보이게 하는 메서드 fadeIn | fadeOut | fateToggle
<body>
<button id="fadein-btn">보여주기</button>
<button id="fadeOut-btn">숨기기</button>
<button id="fadetoggle-btn">토글</button>
<br><br>
<img id="fade-img" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FcoBvhF%2FbtsMF42yw5h%2FAAAAAAAAAAAAAAAAAAAAANEI9SwHi4RlPMCFgbcA5ctFWE_UN2CIk5MsbqvrKv_c%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3Duyw9yAL5mcZm3tgg6IIBaam3Wm0%253D" alt="테스트이미지">
<script>
$("#fadein-btn").click(function(){
$("#fade-img").fadeIn(500);
})
$("#fadeOut-btn").click(function(){
$("#fade-img").fadeOut(500);
})
$("#fadetoggle-btn").click(function(){
$("#fade-img").fadeToggle(5000);
})
</script>
</body>
요소를 위로 슬라이드하거나 아래로 슬라이드 하는 메서드 slideUp | slideDown | slideToggle
slideDown() 과 slideUp()
Q. 반품은 언제되나요?
A. 택배사에서 수거처리 후 2~10일 이내에 처리가 완료됩니다.
Q. 반품은 언제되나요?
A. 택배사에서 수거처리 후 2~10일 이내에 처리가 완료됩니다.
Q. 환불가능기간은 어느정도 인가요?
A. 환불은 2~5분 이내에만 가능합니다.
Q. 반품은 언제되나요?
A. 택배사에서 수거처리 후 2~10일 이내에 처리가 완료됩니다.
<body>
<h3>slideDown() 과 slideUp()</h3>
<div class="qa-box">
<div>Q. 반품은 언제되나요?</div>
<p>A. 택배사에서 수거처리 후 2~10일 이내에 처리가 완료됩니다.</p>
<div>Q. 반품은 언제되나요?</div>
<p>A. 택배사에서 수거처리 후 2~10일 이내에 처리가 완료됩니다.</p>
<div>Q. 환불가능기간은 어느정도 인가요?</div>
<p>A. 환불은 2~5분 이내에만 가능합니다.</p>
<div>Q. 반품은 언제되나요?</div>
<p>A. 택배사에서 수거처리 후 2~10일 이내에 처리가 완료됩니다.</p>
</div>
<script>
$(".qa-box>div").click(function(){
console.log(this);
console.log($(this).next()); //선택된 요소 뒤에있는 요소
const $p = $(this).next();
if($p.css("display") === "none"){
$(".qa-box>p").slideUp();
$p.slideDown();
}else{
$p.slideUp();
}
})
</script>
</body>