jQuery란?
기존에 자바스크립트 언어만으로 구현하기에는 복잡했던 구문을 간소화 하기 위해 만들어진
javaScript기반의 라이브러리다(유용한 기능의 모음집이다.)
즉, javaScript 언어로 유용한 함수나 내용들을 다른 누군가가 이미 정의해놓은 것
복잡한 javaScript구문보다 짧고 쉽게 개발이 가능하다
(적은 양의 코드로 빠르고, 풍부한 기능을 제공)
장점
1. 돔요소와 관련된 스크립트를 보다 쉽게 구현할 수 있다.
2. AJAX(비동기식 통신) 이벤트 처리등을 폭넓게 지원한다.
3. jQuery와 관련된 확장형 플러그인, 오픈AIP등을 지원(차트, 슬라이드, 캘린더...)
jquery 사용 준비
라이브러리 연결방법.
1. jQuery라이브러리 직접 다운로드 받은 후 경로지정(오프라인/다운로드)
2. CDN방식(온라인) : 파일을 다운로드 받아서 저장할 필요가 없다, 라이브러리를 제공하는 사이트 url제시해서 파일경로를 직접 저장
head에 삽입할 코드
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
jquery사용법
>순수 자바스크립트에서는
document.onload,window.onload = fuction(){ 실행내용;
}
js에서의window, document => onload구문은해당 문서의
요소들이 전부 로드되고 외부 문서들도다 가지고 온 후 뒤에 실행된다.
jquery는 기본적으로 $를 많이쓴다.
<script>
$(document).ready(function(){
console.log('document 로딩 완료');
})
$(function(){
console.log('document 로딩 완료')
//h3 요소들을 I선택해서 배경색 레드로 변경
//const str = document.getElementsByTagNAme('h3'); [h3,h3,h3]
const h3Arr = document.querySelector('h3')
// for( let el of h3Arr){ // 0, 1, 2
// el.style.background = "red";
// };
// jquery 방식
$('h3').css("background", "red");
});
</script>
배열을 처리할 때도 for문으로 하나하나 돌려줘야했지만 jquery는 그냥 사용하면 된다.
<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");
$(":button").css({width : "100px", height : "100px"}).val("왕버튼");
//속성을 변경
$(":checkbox").attr('checked', true);
//첨부파일 input에 배경색을 녹색으로
$(":file").css("background", "green");
//비밀번호 input의 배경색을 노란색으로
$(":password").css("background","yellow");
//라디오버튼 check상태로, 가로50px 세로50px
$(":radio").css({width : "50px", height : "50px",}).attr('checked', true)
//제출버튼 클릭 alert("ㅋㅋㅋㅋ") 실행되도록
$(':submit').click(function(){
alert("ㅋㅋㅋ")
});
$(":submit").mouseenter(function(){
$(this).val("선택");
})
$(":submit").mouseout(function(){
$(this).val("제출");
})
$(":submit").hover(function(){
$(this).val("선택");
}, function(){
$(this).val("제출");
})
const tmpList = {
name : "jiwon",
age: 47,
gender: 'm'
}
const inputList = document.getElementsByTagName("input");
$(inputList).each(function(i,n){
console.log(i)
console.log(n)
})
console.log($(inputList))
})
</script>
그냥 문법이 조금 바뀐 것이니 익숙해지면 된다.
jQuery에서의 이벤트
방법은 총 세 가지가 있다.
1. 이벤트 메소드 , 동적으로 만들어진 요소에 이벤트
<script>
$("#wrap > h6").click(function(){
$("#wrap").append("<h6>클릭시 생성된 h6</h6>");
})
</script>
2. on 메소드
<script>
$("#wrap > h6").on("click", function(){
$("#wrap").append("<h6>클릭시 생성된 h6</h6>");
})
</script>
3. $("부모요소").on(이벤트명, 자식요소, 실행할 함수)
<script>
$("#wrap").on("click", "h6", function(){
$("#wrap").append("<h6>클릭시 생성된 h6</h6>");
})
</script>
번외. 이펙트 효과
동작 시 조금 더 이쁘게 만들어주는 이펙트 효과에 대해 알아보자
점점 커지면서 and 점점 작아지면서 숨기기, 토글
<script>
$("#show_btn").click(function(){ //보여주기
$("#hedeAndShowImg").show(2000);
})
$("#hide_btn").click(function(){ //숨기기
$("#hedeAndShowImg").hide(2000);
})
$("#toggle_btn").click(function(){ //토글
$("#hedeAndShowImg").toggle(2000);
})
</script>
점점 투명해지는 이펙트
<script>
$("#fadein_btn").click(function(){//보여주기
$("#fadeImg").fadeIn(1000);
})
$("#fadeout_btn").click(function(){//숨기기
$("#fadeImg").fadeOut(1000);
})
$("#fadetoggle_btn").click(function(){//토글
$("#fadeImg").fadeToggle(1000);
})
</script>
slideDown과 slideUp
우리가 Q&A 에서 많이 봤던 하나 누르면 목록이 밑으로 스르륵 나오는 느낌이다.
<div class="qa_box">
<div>Q. 반품은 언제되나요?</div>
<p>A. 택배사의 사정에 따라 2~3일 소요됩니다.</p>
<div>Q. 반품은 언제되나요?</div>
<p>A. 택배사의 사정에 따라 2~3일 소요됩니다.</p>
<div>Q. 반품은 언제되나요?</div>
<p>A. 택배사의 사정에 따라 2~3일 소요됩니다.</p>
<div>Q. 반품은 언제되나요?</div>
<p>A. 택배사의 사정에 따라 2~3일 소요됩니다.</p>
<div>Q. 판매자가 연락이 되지 않습니다.</div>
<p>A. 문의량이 많아 지금은 연락이 어렵습니다.</p>
</div>
<script>
$(".qa_box > div").click(function(){
//this => 클릭이벤트가 발생한 요소
//$(this).next() => 선택된 요소의 뒤에 있는 요소
$(this).next()
const $p = $(this).next();
if($p.css("display")==="none"){
$(".qa_box > p").slideUp();
$p.slideDown();
}else {
$p.slideUp();
}
})
</script>
끝!
'JavaScript' 카테고리의 다른 글
정규식 표현 (0) | 2024.03.24 |
---|---|
부트스트랩 사용법 (2) | 2024.03.24 |
[4일차] window용 객체, 이벤트 (0) | 2024.03.20 |
[3일차] JavaScript의 함수와 객체 (0) | 2024.03.19 |
JavaScript의 변수에 함수 넣기, 자료구조 (0) | 2024.03.18 |