오봉이와 함께하는 개발 블로그

DOM 요소의 클래스 속성 CSS 효과 동적 적용 CSS의 클래스 선택자에게 적용된 여러 효과를 동적으로 추가하거나 제거 addClass('클래스명') : CSS 효과 적용 removeClass('클래스명') : 적용된 CSS 효과 제거(해제) toggleClass('클래스명') : addClass()와 removeClass() 번갈아 실행하는 결과 DOM 요소의 클래스 속성 예제 - DOMaddClass.html 이미지에 마우스를 올려보세요. toggleClass

DOM 요소의 추가 및 삭제 attr('속성명', 값) : 속성 추가 removeAttr('속성명') : 속성 제거 DOM 요소의 추가 및 삭제 예제 - DOMattr.html DOM 요소 속성 추가 DOM 요소의 추가 및 삭제 연습문제 - DOMattrIndex.html

jQuery DOM 요소 조작 동적으로 쉽고 간단하게 DOM 요소 조작 가능 DOM 요소 삽입 / 삭제 / 속성 추가 및 삭제 / 클래스 속성 DOM 요소 조작 관련 메소드 text() : 글자와 관련된 내용을 반환하거나 설정 html() : HTML과 관련된 내용을 반환하거나 설정 $(선택자).append(A) : 선택자의 내부 요소들 맨 뒤에 A를 삽입 $(선택자).prepend(A) : 선택자의 내부 요소들 맨 앞에 A를 삽입 $(A).apeentTo(선택자) : A를 선택자의 내부 요소들 맨 뒤에 삽입 $(A).prependTo(선택자) : A를 선택자의 내부 요소들 맨 앞에 삽입 $(선택자).after(A) : 선택자 뒤에 A 삽입 $(선택자).before(A) : 선택자 앞에 A 삽입 $(A)..

each() 메소드 $(선택자).each(콜백함수function(){}); $.each(배열, 콜백함수); $.each(객체, 콜백함수); each() 메소드 예제 - eachFunction.html a b c

jQuery 이벤트 기존 자바스크립트에서 사용했던 이벤트 대부분 사용 자바스크립트 보다 간단하고 쉽게 이벤트 처리 가능 이벤트 유형 윈도우 이벤트 ready(document) : 문서 객체 요소(DOM 요소)가 로드 되었을 때 발생 문서 객체 요소가 자바스크립트에서 사용 가능한 상태인지 확인하고 작동이 가능한 안전 상태일 때 발생 $(document).ready() document의 DOM 객체가 로드 되고, 브라우저가 DOM 트리를 생성한 직후 외부 리소스, 이미지 등의 로드 여부 상관 없이 실행 resize : 윈도우 창 크기 변경 시 발생 scroll : 윈도우 창 스크롤 이동 시 발생 load : 문서 객체 요소가 모두 로드 되었을 때 발생. ready와 차이점은 리소드, 이미지 또는 음악 등 로..