jQuery는 DOM,이벤트,Data 등의 핸들링을 쉽게 하기 위해 만들어진 자바스크립트 함수의 모음(라이브러리)이다.
메서드는 함수의 구성인 '함수명()' 처럼 생겼지만 앞에 .(점)을 찍어 사용하는 API를 말한다.
이번 페이지에서는 지금까지 배운 제이쿼리의 메서드들을 정리하며 복습해보려 한다!
그에 앞서, 자바스크립트 코드가 제이쿼리로 어떻게 바뀌는지 간단히 살펴보자.
//제이쿼리 파일다운 후 연결
<script src="./js/jquery.min.js"></script>
//easing 함수시트 사용 시 파일다운 후 연결
<script src="./js/jquery.easing.min.js"></script>
<script>
//변수선언 - 선택자는 모두 $로 한다.
const box = document.querySelector('.box'); //Js
const $box = $('.box'); //jQuery
//클래스선택($)과 이벤트구문(.on)
document.querySelector('.start').addEventListener('click',function(){}); //Js
$('.start').on('click',function(){}); //jQuery
//jQuery 메서드 체인 방식 : 띄어쓰기해서 작성 가능. 마지막에 세미콜론 ;
$box.delay(3000)
.animate({left:700},2000,"easeOutBounce")
.animate({left:0});
</script> 궁금했던 것
- $(window) = 브라우저 전체화면
- 왜 어떤 변수명에는 $붙고 어떤건 안붙을까 = $'변수명'은 어떤 태그를 정확히 짚어서 가져올 때 의례적으로 쓰인다.
const $slides = $('.slides'); - 제이쿼리 파일 다운로드 방법
제이쿼리 홈페이지에 접속 후 빨간박스 안의 링크 클릭 후 ctrl+s 로 저장하기
jQuery 홈페이지
이벤트메서드 : on
.on은 이벤트를 실행하는 메서드로, 자바스크립트의 .addEventListener 함수를 jQuery 식으로 작성한 것이다.
- 이벤트명
.on('이벤트명',function(){});
- load : 컨텐츠가 페이지에 노출된 시점에 딱 한번 일어나는 이벤트
- resize : 브라우저의 크기가 바뀌면 일어나는 이벤트
- keyup : 키보드의 키를 눌렀다 뗐을 때 일어나는 이벤트
- mouse 관련 이벤트
- mouseenter / mouseleave : 마우스가 요소 '내부'로 들어가고 나올 때의 이벤트 (= hover)
- mouseover / mouseout : 마우스가 요소의 '상공'에 진입하고 나오는 이벤트 (이벤트 버블링 발생)
- 이 둘의 차이는 부모자식관계가 설정된 경우에 발생한다. mouseenter/mouseleave는 자식에게 발생한 이벤트가 부모에게 전파되지 않고 독립적으로 사용된다면, mouseover/mouseout은 자식에게 발생한 이벤트가 부모에게 전파되는 이벤트버블링이 발생한다.
.on('mouseenter',function(){});을 줄여.mouseenter(function(){});으로 사용 가능하다.
<script>
// mouse 관련 이벤트
$(function(){
let count_box = 0;
// box안에 집입 시 카운트 1증가
$('.box').on('mouseenter',function(){
count_box++;
$('p').text(count_box);
});
//box에 진입 시 배경색 변경
$('.box').mouseenter(function(){
$('.box').css({'background-color':'red'});
});
//keyup 이벤트 : esc(27)를 누르면 박스를 숨겨라
//js에서는 .keyCode / jQuery에서는 .which로 키코드를 추출
$(document).on('keyup',function(evt){
if(evt.which=='27'){
$lightbox.hide();
});
});
</script>animate / delay / stop
- animate는 특정 css 속성을 애니메이션처럼 자연스럽게 변경하기 위해 사용하는 메서드이다.
.animate({변화될속성명:값},시간(기본값400),"easing함수",function(){});
- delay는 시작을 지연시킴
- stop은 현재 진행중인 요소를 정지시킴
<script>
$(document).ready(function(){ //제이쿼리의 준비함수 = $(function(){});
const $box = $('.box');
$('.start').on('click',function(){ //click이벤트
$box.delay(2000) //2초뒤 시작
.animate({left:700},2000,"easeOutBounce") //오른쪽으로 700px만큼 2초동안 이동
.animate({left:0}); //왼쪽 기준 0 값인 제자리로 돌아옴
});
$('.stop').on('click',function(){ //클래스 stop을 클릭하면
$box.stop(); //box 변수가 정지됨(여기서는 위의 animate가 두개라 두번 클릭해야된다.ㅋㅋ;)
});
});
</script>hover
마우스를 hover 했을 때 콜백함수를 실행한다. 이 때 함수를 2개 넣을 수 있는데, 첫번째 함수는 mouseenter에 해당하고 두번째 함수는 mouseleave에 해당한다.
.hover(함수1, 함수2);
<script>
$(function(){
// mouseenter 이벤트
$('.box').on('mouseenter',function(){
$(this).text("마우스엔터");
});
// mouseleave 이벤트
$('.box').on('mouseleave',function(){
$(this).text("마우스리브");
});
// hover 메서드 : 위의 두 이벤트 합친 것
$('.box').hover(
function(){
$(this).text("마우스엔터");
}
,
function(){
$(this).text("마우스리브");
}
);
});
</script>first / eq / last
nth-of-type()처럼, 몇번째 태그를 선택할 것인지에 따라 골라서 사용하면 된다.
<script>
$(document).ready(function(){
//첫번째 li에 대한 click 이벤트 구문
$('ul>li').first().on('click',function(){
console.log("첫번째 li");
});
//두번째 li에 대한 click 이벤트 구문 (eq는 0부터 시작)
$('ul>li').eq(1).on('click',function(){
console.log("두번째 li");
});
//마지막 li에 대한 click 이벤트 구문
$('ul>li').last().on('click',function(){
console.log("마지막 li");
});
</script>index / text
- index는 해당 요소의 인덱스번호를 추출할 때 사용하며, 보통 현재 위치를 추출할 때 많이 쓴다.
- text는 값을 텍스트로 출력한다.
<script>
$(document).ready(function(){
$('ul>li>a').on('click',function(evt){
evt.preventDefault(); //a는 다른 링크로 넘어가니까
let idx = $('ul>li>a').index(this); //a를 클릭한 현재위치
$('span').text(idx); //span에 idx(인덱스번호) 텍스트로 출력하기
});
});
</script>css
css style을 지정할 때 사용한다. ({}) 안에 작성하며 세미콜론(;)은 사용하지 않는다.
<script>
$(document).ready(function(){
$('.text').on('click',function(){
$('.text').css({
color:'blue',
fontWeight:'800',
backgroundColor:'yellow'
border: '3px double black'
});
});
});
</script>attr / removeAttr
해당 요소의 html 속성(attribute) 값을 가져오거나 추가할 때 사용한다.
.attr('속성명', '속성값');
<script>
$('h1').attr('class'); //h1의 class를 추출
$('div').attr('class','box'); //div에 class=box 추가
$('div').removeAttr('class'); //div의 class 속성 삭제
$('a').children('img').attr({
src : $('a').attr('href'),
}); //img의 속성 src에 a태그의 href값을 부여
</script>addClass / removeClass / toggleClass
클래스를 추가하거나 지우고, 토글(껐다켰다하는 스위치!)처럼 클래스 추가,삭제를 번갈아 실행하는 메서드
<script>
$(document).ready(function(){
//첫번째 버튼을 click하면 첫번째 li에 .yellow 클래스를 추가
$('button').first().on('click',function(){
$('ul>li).first().addClass('yellow');
});
//두번째 버튼을 click하면 두번째 li의 .green 클래스를 제거
$('button').eq(1).on('click',function(){
$('ul>li').eq(1).removeClass('green');
});
//마지막 버튼을 click하면 세번째 li에 .pink가 없으면 추가, 있으면 삭제
$('button').last().on('click',function(){
$('ul>li').last().toggleClass('pink');
});
});
</script>parent / siblings / children / find
- .parent() : 해당요소의 직계부모 선택
- .siblings() : 해당요소의 형제 선택
- .children() : 해당요소의 직계자식 선택
- .find() : 해당요소의 자손 선택
<script>
$(document).ready(function(){
//버튼의 부모요소에 노란배경색 적용
$('button').on('click',function(){
$(this).parent().css({
backgroundColor:'yellow'
});
});
//클래스를 클릭하면 형제요소의 글자크기를 25px로 변경
$('.pain').on('click',function(){
$(this).siblings().css({
fontSize:'25px'
});
});
//p요소의 직계자식에 이중테두리선 적용
$('p').children('span').css({
border : '3px double black'
});
//li 요소의 자손 중 strong 선택 후 폰트색 변경
$('li').find('strong').css({
color : 'red'
});
});
</script>show / hide / toggle
- show(시간) : 지정 시간동안 0의 위치에서 요소의 원래 크기까지 점점 펼쳐짐
- hide(시간) : 지정 시간동안 0의 위치로 점이 되며 사라짐
- toggle(시간) : 지정 시간동안 현재 상태에 따라 show 또는 hide 실행
<script>
$(function(){
//첫번째 버튼을 누르면 p영역이 2초동안 커지며 나타남
$btn.first().on('click',function(){
$p.show(2000);
});
//두번째 버튼을 누르면 p영역이 2초동안 width,height가 0이 되면서 사라짐
$btn.eq(1).on('click',function(){
$p.hide(2000);
});
//마지막 버튼을 누르면 현재 상태에 따라 위의 요소들을 번갈아 실행
$btn.last().on('click',function(){
$p.toggle(2000);
});
});
</script>remove / empty
- remove : 해당 요소를 완전히 삭제
$('h1').remove(); - empty : 해당 요소의 내용을 비움
$('p').empty();
fadeIn / fadeOut / fadeToggle
- fadeIn : 요소를 자연스럽게 나타나게 (불투명도를 0에서 1로 수렴)
- fadeOut : 요소를 자연스럽게 사라지게 (불투명도를 1에서 0으로 수렴)
- fadeToggle : 토글스위치처럼 보이는건 사라지게, 사라진건 보이도록- 켰다 껐다!
- 입력값으로는 fast,slow 또는 초단위를 넣을 수 있다.
fadeIn(slow)fadeIn(fast)fadeIn(1000) //1초동안 나타나기 - 콜백함수 사용가능
fadeIn(3000,function(){}); //3초동안 함수 실행
- 입력값으로는 fast,slow 또는 초단위를 넣을 수 있다.
<script>
$(function(){
//스크롤을 150이상 내리면 aside(top화살표)를 나타내고 아니면 사라지게 한다.
$('window').on('scroll',function(){
if(scrollTop>150){
$aside.fadeIn();
}else{
$aside.fadeOut();
}
});
//해당요소의 이전 요소(버튼)을 클릭할 때 3초동안 서서히 나타나게
//fadeIn 콜백함수를 활용하여 박스 안의 텍스트도 나타나도록 : 박스가 3초동안 나타난 '이후' 텍스트가 1초동안 나타난다.
$btn.prev().on('click', function(){
$box.fadeIn(3000,function(){
$('.text').fadeIn(1000);
});
});
});
</script>slideDown / slideUp
- slideDown : 부드럽게 아래로 슬라이드되며 보여줌
$(this).stop().slideDown(200); - slideUp : 부드럽게 위로 슬라이드되며 사라짐
$(this).stop().slideUp(200);
(실제로 실무에서 잘 사용되진 않음)
innerHeight / innerWidth / outerHeight / outerWidth
- height, width : 순수 요소의 높이와 너비
- innerHeight, innerWidth : 여백을 포함한 요소의 높이와 너비
- outerHeight, outerWidth : 여백과 선의 두께까지 포함한 요소의 높이와 너비
<style>
p{
width: 100px;
height: 60px;
padding: 10px;
boder: 5px solid #fff;
}
</style>
<script>
$(function(){
let value1 = $('p').width();
console.log(value1); // 100
let value2 = $('p').innerwidth();
console.log(value2); // 120
let value3 = $('p').outerwidth();
console.log(value3); // 130
});
</script>위치메서드 position / offset
- position : 해당 요소의 부모요소(relative)를 기준으로 상대 위치를 반환한다.
- offset : HTMl문서(브라우저)를 기준으로 절대적인 위치 값을 가져온다.
<script>
//요소의 top값(body로부터의 상단 거리) 구하는 방법- .offset().top
for(let i=0;i<$mnu.size();i++){
arrTopVal[i] = $("#visual~section").eq(i).offset().top;
}
</script>scrollTop / scrollLeft
- scrollTop : 수직 스크롤 위치를 가지고 오거나 값을 지정한다.
- scrollLeft : 수평 스크롤 위치를 가지고 오거나 값을 지정한다.
<script>
$(function(){
//스크롤탑 값 콘솔창에 출력
$(window).on('scroll',function(){
let scrollTop = $(this).scrollTop();
console.log("scrollTop = ",scrollTop);
});
// scrollTop은 2100으로, scrollLeft는 2000으로 이동
$(window).click(function(){
$(window).scrollTop(2100).scrollLeft(2000);
});
});
</script>size / length
둘다 해당요소의 개수를 리턴하는 동일한 기능을 수행한다.
실질적으로는, .size는 메서드, length는 속성이라 함수호출이 필요없는 length가 선호된다고 한다. 또한 size는 jQuery3.0 이후 제거되었기 때문에 length 속성을 사용하길 권장한다.
<ul>
<li>list1</li>
<li>list2</li>
</ul>
<script>
alert("Size : "+$("li").size() ); //size : 2
alert("length : "+$("li").length ); //length : 2
</script>append / appendTo
어떠한 요소의 마지막 자식으로 다른 요소를 추가하는 메서드, 둘의 쓰임은 방법만 다를 뿐 결국 같다.
- A.append(B) : A의 마지막 자식으로 B를 추가
- B.appendTo(A) : B를 A의 마지막 자식으로 추가
<script>
$(function(){
//ol의 마지막 자식으로 li를 추가하는 두가지 방법
$('button').on('click,function(){
$('ol').append('<li>리스트 추가</li>');
});
$('button').on('click,function(){
$('<li>리스트 추가</li>').appendTo('ol');
});
});
</script>preventDefault / stopPropagation / return false
- .preventDefault() : 기본 사용자 정의 이벤트만 제거 (ex_ a태그)
- .stopPropagation() : 둘러싸고 있는 상위 요소로의 이벤트 전파 차단 (이벤트 버블링 막아줌)
- 부모자식간에 이벤트를 동시에 걸었을 때, 자식이 먼저 실행되고 부모에서 실행되기 때문에
- return false = .preventDefault() + .stopPropagation()
- 순수 자바스크립트에서 return false는 기본 이벤트만 제거한다. =.preventDefault()
<script>
$(function(){
$('a').on('click',function(evt){
evt.preventDefault(); //a의 초기값 제거
evt.stopPropagation(); //상위 요소로 이벤트버블링 차단
return false; //초기값 + 이벤트버블링 둘다 차단
})
});
</script>
가치와 의미를 쫓는 개발자 되기✨