JS 스크롤 끄기/켜기, 그레이브, this, mouse, find, 가족 찾기 메서드

스크롤 끄기 / 켜기

html.overflow-hidden,
html.overflow-hidden > body {
  overflow:hidden;
}

CSS에 적용 후, JS에 html에 addClass, removeClass 작성
(html, html > body 경우가 다르기 때문에 두개 다 작성하기)
html 생략 가능!

창을 늘릴 때마다 CSS를 늘리지 않게 이름 변경하는 법

section[class*="popup-"][class*="-actived"]

-> class 속성 값에 popup-, -actived 모두 포함한 섹션 선택

---

그레이브 문법

function Popup__show(no) {
  $('.popup-' + no).addClass('active');
  $('html').addClass('popup-' + no + '-actived');
}

function Popup__show(no) {
  $(`.popup-${no}`).addClass('active');
  $('html').addClass(`.popup-${no}-actived`);
}

'' + no ''가 번거롭기 때문에
`로 감싸고 / 변수값은 $로 잘라서 간편하게 작성함

---

this

: 값을 정하는 게 아닌 현재 선택된 요소

$('.box-wrap > *').click(function() {
  let $this = $(this);
  $this.addClass('active');
});

prev( ), next( )

: 이전 요소, 다음 요소

---

mouseenter, mouseleave

: 마우스가 닿았을 때, 마우스가 나갔을 때 // 한번 (=hover)

mouseover,mouseout

: 마우스가 닿았을 때, 마우스가 나갔을 때 // 그 안에서 움직여도 실행, 부모도 적용됨

---

parent, children

: 부모를 찾음, 자식을 찾음

$('.box-1 > *').click(function() {
  let $this = $(this);
  $this.parent().children().addClass('active');
//   부모 찾은 다음에 자식을 찾음
  $this.removeClass('active');
});

-> this의 부모를 찾고 그 자식들을 찾아 addClass / this는 removeClass

find

: 모든 하위 자손을 찾을 수 있음
: children은 자식만 찾기 때문에 모든 하위 자손을 찾아야 할 경우 find 사용

$('.box-1 > *').click(function() {
  let $this = $(this);
  $this.parent().find(' > *').addClass('active');
  $this.removeClass('active');
});

-> 부모를 찾고 모든 하위 자손을 찾아 addClass

siblings

: 형제를 찾음

$('.box-1 > *').click(function() {
  let $this = $(this);
  $this.removeClass('active');
  $this.siblings().addClass('active');
});

-> 제일 효율적 ( 부모의 자식들 보다는 내 형제를 가리키는 게 편함 )