학습내용

제이쿼리 기본 (1), (2)
github소스코드

jQuery 기본

자바스크립트 라이브러리 jQuery

• 라이브러리: 반복적으로 사용되는 주요 기능 더 쉽게 제작할 수 있도록 미리 작성된 코드
• 압축된 production vs 압축 안 된 development 버전
• production 파일은 속도 빠르게 하기 위해 용량 적게 압축한 버전으로 보통 min.js 이름을 붙인다.
• 강의에선 development 버전 파일을 저장해서 사용하였다.

jQuery 사용

• jQuery 사용 방법 정석: 아래 구조 안에 작성

$(function () {
  console.log('hi im jQuery');
  ...
}

• jQuery 선택자 지정 방법: querySelector와 동일

$('.masthead').css('border', 'solid 10px yellow');
$('.masthead-heading').css('color', 'blue');

• jQuery로 할당한 값을 자바스크립트 변수에 담을때 변수명 앞에 $사용해줌

var $masthead = $('#masthead-id');

jQuery 가상선택자

• 항상 0번째부터 시작함
• :odd 0부터 홀수번째 선택. 즉 0, 2, 4..
• :even 0부터 짝수번째 선택. 즉 1, 3, 5...
• :eq(i): 0부터 i번째 선택

$('li.nav-item:odd').css('background-color', 'green');
$('li.nav-item:even').css('background-color', 'blue');
$('.nav-item:eq(0)').css('background-color', 'pink');

jQuery Events

• 이벤트 일어나는 객체를 this로 사용 가능
• mouseenter: 한번 마우스 올리면 그 후 지속
• mouseleave: 한번 마우스 올린 것 벗어나면 그 후 지속
• click: 한번 마우스 올리면 그 후 지속
• 하나의 영역에 여러 개의 이벤트 -> on({})으로 결합
• fadeTo(속도, opacity, callback())

$('header #masthead-id').on({
  mouseenter: function() {
    $(this).fadeTo('fast', 1);
  },
  mouseleave: function() {
    $(this).fadeTo('fast', 0.5);
  }
})

display:none 처리 메소드

• hide(): display:none 적용
• show(): display:none 제거
• hide() + show() -> toggle()
• slideDown(), slideToggle() 등: 위, 아래로 슬라이드되면서 사라지는 효과. display:none 속성 기준으로 적용된다.
• fadeIn(), fadeOut()

클래스 제어

• addClass('클래스명'): 클래스 삽입
• removeClass(): 클래스 제거
• toggleClass(): 클래스 유무에 따라 삽입 및 제거

jQuery 실습 1

• 목표: 토글 버튼 만들기

var $favoriteIcon = $('.favorite-icon'); // 클래스 객체들이 유사배열로 반환
$favoriteIcon.click(function() {
    $(this).toggleClass('on');
})

jQuery 실습 2

• 목표: 다른 버튼 클릭하면 기존에 켜져있던 버튼 끄기
  

• 강의대로만 하면 자기 자신 클릭해서 끄기는 안 되서 약간의 코드를 추가함

• siblings(): 자기 자신 제외한 모든 형제들 반환

$select.click(function() {
    if($(this).hasClass('on')) {
        $(this).removeClass('on');
    } else {
        $(this).addClass('on').siblings().removeClass('on');
    }
})

jQuery 실습 3

• 목표: 프로필 영역에 마우스 hover하면 영역 아래에 프로필 상세 정보 나타내기
  

• parent(): 태그의 직계 부모에 접근

• find(): 인수로 css 클래스 선택자 전달해서 객체 찾기

• 클래스로 선택한 객체가 여러 개고 그 중 클릭한 것만 선택할 때 $(this) 활용

• next(): 부모 경유 없이 바로 다음 형제 태그 선택 next().next()중복 가능

• prev() : 바로 이전 형제 태그 선택. 중복가능

• fadeIn(), fadeOut(): 부드럽게 나타나고 사라지기

var $profile = $('.profile');

$profile.on({
  mouseenter: function() {
    // $(this).parent().find('.profile-popup').css('display', 'block')
    $(this).next().fadeIn();
  },
  mouseleave: function() {
    $(this).next().fadeOut();
  }
})

jQuery 실습 4

• 목표: 리스트 모두 접기 및 모두 열기 기능 -> 개별 클릭 시 개별 개체 열고 닫기
  

1. 모두 접기 및 모두 열기

• close, open 버튼 각각에 click 이벤트를 만들어 hide(), show()로 버튼을 조작함
• 클래스명으로 리스트 본문을 전부 선택해 hide 클래스 추가 및 삭제함

2. 클릭한 영역 본문만 열고 닫기

• $(this), next(), toggleClass() 이용해 간단히 제작

$listTitleWrap.click(function() {
  $(this).next().toggleClass('hide');
}

3. 본문 영역 보이는지 여부에 따라 버튼 바꾸기

• 하나씩 닫아서 다 닫으면 버튼 종류 바뀌어야 함
• hide 클래스를 이용할지 hide()를 이용할지 결정해야 한다. hide()와 같은 메서드를 사용할 경우 html에 style=display:none 형식으로 추가해버려서 캐스캐이딩에 의해 class보다 먼저 적용되므로 기능이 꼬이게 된다. 강의에서는 class를 사용하는 방식으로 통일하였다.
• 아티클 중 hide 클래스 있는 아티클 개수에 따라 조건문

var hideLength = $('.list-article-wrap.hide').length;
if(hideLength === 3) {
  $openText.show();
  $closeText.hide();
}
if(hideLength === 0) {
  $openText.hide();
  $closeText.show();
}

어려웠던 점

1. 어제 헷갈렸던 css animation delay 시작시간 관련

해결방법

1. 여러 개의 애니메이션 효과가 있을 때 나중에 오는 것의 딜레이를 없애자 첫 번째 애니메이션과 동시에 시작하는 것을 볼 때 모든 애니메이션은 동시에 로드되는 것으로 이해했다.
   

소감

자바스크립트 라이브러리 중 하나인 jQuery 기초를 배웠다. 부드럽게 사라지는 효과 등을 아주 간단히 구현할 수 있어서 편리했다. 찾아보면 훨씬 다양한 기능이 많을 것 같다.