밀 종합 ٩(`╹ω╹´)و

const value = $('선택자').css('margin-top').replace(/[^-\d\.]/g, '');

See the Pen [jQuery] .scrollTop() by mill (@millfeel) on CodePen. 화면을 스크롤할 때 현재 사용자가 스크롤한 만큼의 거리를 계산해주거나, 스크롤 위치를 이동한다. // 간격 값 반환 $('선택자').scrollTop(); // 스크롤 위치 이동 $(window).scrollTop(숫자); [JS와 비교하기] // JS const $value = document.querySelector('.value'); const $topBtn = document.querySelector('.topBtn'); window.addEventListener('scroll', function () { const scrollValue = window.scrollY; if (sc..

pageX => clientX / pageY => clientY와 비슷하다. See the Pen [jQuery] e.pageX / e.pageY by mill (@millfeel) on CodePen. 브라우저상에서의 현재 마우스 커서의 위치 값을 구할 수 있다. // 브라우저상 마우스 커서의 x축 좌표 e.pageX // 브라우저상 마우스 커서의 y축 좌표 e.pageY [JS와 비교하기] // JS window.addEventListener('mousemove', function (e) { const x = e.clientX; const y = e.clientY; document.querySelector('.posX').textContent = x; document.querySelector('.po..

.text() => textContent와 비슷 / .html() => innerHTML과 비슷 .text() See the Pen [jQuery] .text() by mill (@millfeel) on CodePen. // 문자 가져오기 $('선택자').text(); // 문자 변경하기 $('선택자').text('변경할 문자열'); [JS와 비교하기] // JS const $bl_palette = document.querySelector('.bl_palette'); const $el_box = document.querySelector('.el_box'); $bl_palette.addEventListener('click', function (e) { const target = e.target; if (!..

See the Pen [jQuery] .addClass() .removeClass() by mill (@millfeel) on CodePen. 특정 요소에 클래스를 추가하고 제거하는 구문이다. // 클래스 추가하기 $('선택자').addClass('추가할 클래스명'); // 클래스 제거하기 $('선택자').removeClass('제거할 클래스명'); [JS와 비교하기] // JS const $box = document.querySelector('.box'); $box.addEventListener('mouseover', function () { this.classList.add('box__circle'); }); $box.addEventListener('mouseout', function () { thi..

구문 // 바로 숨김/보이기 $('선택자').hide() // display: none; $('선택자').show() // display: block; // 서서히 숨김/보이기 처리 // 애니메이션이라 모션 중첩을 멈춰줘야하기 때문에 .stop() 매서드와 함께 사용한다. $('선택자').stop().fadeOut(시간) // display: none; opacity: 0; $('선택자').stop().fadeIn(시간) // display: block; opacity: 1; See the Pen Untitled by mill (@millfeel) on CodePen.

See the Pen [jQuery] .width() .height() by mill (@millfeel) on CodePen. .width()와 .height()는 각각 특정 요소의 넓이와 높이 값을 구하는 구문이다. 또한, 해당 구문을 통해 기존 요소의 넓이 값을 변경할 수 있다. [주의] 이 값은 순수 컨텐츠의 가로/세로 값이다. // 넓이 값과 높이 값 구하기 $('선택자').width(); $('선택자').height(); // 넓이 값과 높이 값 변경하기 $('선택자').width('변경할 수치'); $('선택자').height('변경할 수치'); [속성 종류] $('선택자').height() : 내부높이 $('선택자').innerHeight() : 내부높이 + padding $('선택자')...

$('선택자').each(함수); 원리는 for문과 비슷하다. // jQuery $('.el_boxUnit > div').each(function (idx) { $(this).css({width: '100px', height: '100px'}); }) }); // idx는 JS for문의 i와 같다. // JS const $el_boxUnit_children = document.querySelector('.el_boxUnit').children; for (let i = 0; i < $el_boxUnit_children.length; i++) { $el_boxUnit_children[i].style.width = '100px'; $el_boxUnit_children[i].style.height = '100..

See the Pen [jQuery] 이미지 캡션 애니메이션 by mill (@millfeel) on CodePen. .filter() 메서드 일치하는 요소 집합을 선택자와 일치하거나 함수의 테스트를 통과하는 요소로 줄인다. .filter(선택자 | 요소 | 함수 | jQuery객체) Q. .filter() .find()의 차이는 무엇인가요? See the Pen [jQuery] Q. .filter() .find()의 차이는? by mill (@millfeel) on CodePen. [공부좌표] [jQuery] 탐색 구문 .children() .parent() .find() .eq() 등 .filter()

See the Pen [jQuery] .index() 메서드 by mill (@millfeel) on CodePen. [공부좌표] 인터랙티브 웹디자인북p138