09009

무한 스크롤 사용자가 스크롤을 끝까지 내릴 경우 자동으로 데이터를 추가하여 스크롤이 끝나지 않게 만들어주는 기능 - 스크롤 이벤트가 발생하면, 전체 문서의 높이가 스크롤 높이와 웹 브라우저 창의 높이를 더한 값과 같은지 확인한다. 이 조건을 충족할 경우에만 데이터를 추가하는 원리이다. ✍ 입력 위 소스코드를 실행하면 스크롤이 끝에 도달하는 순간 문서 객체가 새롭게 추가된다.

오직 자바스크립트만 사용하여 문서 객체를 생성하는 것은 매우 복잡한 작업이다. 하지만 jquery 라이브러리를 사용하면 문서 객체를 보다 쉽게 생성할 수 있다. jquery 문서 객체 추가 메서드 $(객체).prependTo(대상) 객체를 대상의 앞부분에 추가 $(객체).appendTo(대상) 객체를 대상의 뒷부분에 추가 $(객체).beforeTo(대상) 객체를 대상의 앞쪽에 추가 $(객체).afterTo(대상) 객체를 대상의 뒤쪽에 추가 생성한 객체는 위와 같은 메서드를 사용하여 화면에 추가한다. prependTo()와 appendTo() 메서드는 대상의 내부에 추가되고, beforeTo()와 afterTo() 메서드는 대상의 외부에 추가된다는것에 주의하자. 기타 jquery 문서 객체 추가 메서드 $..

jquery 라이브러리는 문서 객체를 보이거나 보이지 않게 만드는 효과 메서드를 제공한다. 시각 효과 메서드 • jquery 라이브러리의 시각 효과 메서드 show(속도) 문서 객체가 커지며 표시 hide(속도) 문서 객체가 작아지며 사라짐 toggle(속도) show() 메서드와 hide() 메서드를 번갈아가며 실행 slideDown(속도) 문서 객체가 슬라이드 효과와 함께 표시 slideUp(속도) 문서 객체가 슬라이드 효과와 함께 사라짐 slideToggle(속도) slideDown()과 slideUp()을 번갈아가며 실행 fadeIn(속도) 문서 객체가 선명해지며 표시 fadeOut(속도) 문서 객체가 흐려지며 사라짐 fadeToggle(속도) fadeIn()과 fadeOut()을 번갈아가며 실행..

이벤트 연결 // 이벤트를 연결합니다. $(document).ready(function() { }); ready() : 이벤트 연결 메서드, ready() 메서드를 사용하면 ready 이벤트가 연결된다. 간단한 방식으로 이벤트를 연결할 때는 아래와 같은 코드를 사용한다. $(selector).method(function (event) { }); 간단한 이벤트 연결 메서드: focus, focusin, focusout, load, scroll, click, mouseenter, mouseleave ... 등 click 이벤트 연결 ✍ 입력 click 💻 출력 hover() 메서드 jquery 라이브러리는 mouseenter 이벤트와 mouseleave 이벤트를 동시에 연결하는 hover()라는 이벤트 연결..

속성 조작 jquery 라이브러리를 사용하여 문서 객체 속성을 조작할 때, attr() 메서드를 사용한다. attr() 메서드 : 매개변수를 넣는 방법에 따라 속성을 지정하거나 추출 가능 (문서 객체의 속성 조작) 속성 추출 // img 태그의 src 속성 추출 var src = $('img').attr('src'); 위와 같이 attr() 메서드에 매개변수를 하나 입력하면 해당 속성을 추출한다. jquery 라이브러리는 문서 객체 여러 개를 한 번에 선택한다. 문서 객체 여러 개를 선택하고 속성을 추출하면, 첫 번째 문서 객체 속성을 추출한다. 문서 객체 속성 추출 ✍ 입력 위 소스코드는 jquery 라이브러리를 사용하여 script 태그를 선택하고 src 속성을 추출한 것이다. script 태그가 2..

jQuery 라이브러리 설정 위 코드를 script 태그에 작성한다. jQuery 라이브러리 메서드의 기본 형태 $(선택자).메서드(매개변수, 매개변수) jquery 라이브러리를 사용하면 자바스크립트에서 했던 것보다 더 쉽게 문서 객체를 선택할 수 있다. ✍ 입력 Harry kane Harry kane Harry kane 💻 출력 querySelector() 메서드와 달리 문서 객체 여러 개를 한 번에 선택하고 document.querySelectorAll() 메서드와 다르게 반복문을 사용하지 않아도 된다.