구문 // 바로 숨김/보이기 $('선택자').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()
문법 $('선택자').animate({속성:'값'}, 시간, 가속도함수, 콜백함수); // 속도함수와 콜백함수는 생략 가능하다. *콜백 함수를 이용하면 모션이 끝난 바로 그 시점에 새로운 모션이나 특정 기능을 이어서 실행 시킬 수 있다. jQuery 가속도 함수를 사용하려면 jQuery UI가 필요하다. https://releases.jquery.com/ui/ jQuery UI – All Versions | jQuery CDN jQuery UI – All Versions jQuery UI - Git Builds UNSTABLE, NOT FOR PRODUCTION jQuery UI 1.13 jQuery UI 1.13.0 - uncompressed, minified Themes base black-tie b..
- Total
- Today
- Yesterday
- 프로퍼티
- @font-face
- 동등 연산자
- clinetTop
- scrollHeight
- property
- constructor
- 동치 연산자
- 링크막기 #a링크막기
- 대괄포 표기법
- clientHeight
- [[Prototype]]
- 부등 연산자
- __proto__
- scrollTop
- 객체의 프로퍼티
- prototype 프로퍼티
- 일치 연산자
- 불일치 연산자
- offsetHeight
- outerHeight
- javascript class
- 점 표기법
- innerHeight
- offsetTop
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |