반응형
스타일 메서드
분류 | 핵심 내용 | 핵심 프로퍼티 및 메서드 |
스타일다루기 | 스타일 값 구하기 | $대상.css("스타일 속성 이름")$대상.css(["스타일 속성 이름", ...]) |
스타일 값 설정하기 | $대상.css("스타일 속성 이름",값)$대상.css({스타일 속성 이름:값, ...}) | |
클래스 추가 | $대상.addClass("클래스 이름") | |
클래스 삭제 | $대상.removeClass("클래스 이름") |
속성 메서드
분류 | 핵심 내용 | 핵심 프로퍼티 및 메서드 |
속성다루기 | 속성값 구하기 | $대상.attr("속성이름")$대상.data("data-속성이름") |
속성값 설정하기 | $대상.attr("속성이름","값")$대상.data("data-속성이름","값") |
이벤트 메서드
분류 | 핵심 내용 | 핵심 프로퍼티 및 메서드 |
이벤트다루기 | 일반 이벤트 등록 | $대상.on("이벤트 이름", 이벤트리스너) |
단축 이벤트 등록 | $대상.단축 이벤트(이벤트리스너) | |
등록한 이벤트 제거 | $대상.off("click", 삭제하고 싶은 이벤트 리스너 명)$대상.off("click")$대상.off() | |
이벤트 한 번만 실행 | $대상.one("이벤트 이름", 이벤트리스너) | |
기본 행동 취소 | 이벤트 객체.preventDefault() | |
버블링 멈추기 | 이벤트 객체.stopPropagation() | |
버블링 활용:하나의 이벤트 | $대상.on("이벤트 이름", "선택자", 이벤트 리스너) |
위치 및 크기 메서드
분류 | 핵심 내용 | 핵심 프로퍼티 및 메서드 |
요소의 위치 및크기 관련 기능 | 부모 좌표 노드 구하기 | $대상.offsetParent() |
지역 좌표 위치 다루기 | 지역 좌표 위치 구하기$대상.position().left$대상.position().top지역 좌표 위치 설정하기$대상.css("left",위치값)$대상.css("top",위치값)또는$대상.css({left:위치값,top:위치값}) | |
전역 좌표 위치 다루기 | 전역 좌표 위치 구하기$대상.offset().left$대상.offset().top전역 표표위치 설정하기$대상.offset({left:위치값,top:위치값}) | |
요소 크기 다루기 | 기본 크기 구하기$대상.width()$대상.height()기본 크기+padding 크기 구하기$대상.innerWidth()$대상.innerHeight()기본 크기+padding+border 크기 구하기$대상.outerWidth()$대상.outerHeight()기본 크기+padding+border+margin 크기 구하기$대상.outerWidth(true)$대상.outerHeight(true)기본 크기 설정하기$대상.width(크기값)$대상.height(크기값)기본 크기+padding 크기 설정하기$대상.innerWidth(크기값)$대상.innerHeight(크기값) | |
요소의 위치 및크기 관련 기능 | 요소의 스크롤 위치 다루기 | 스크롤 위치 구하기$대상.scrollLeft()$대상.scrollTop()스크롤 위치 설정하기$대상.scrollLeft(위치값)$대상.scrollTop(위치값) |
문서의 위치 및크기 관련 기능 | 문서 크기 구하기 | $(document).width()$(document).height() |
화면의 위치 및크기 관련 기능윈도우의 위치및 크기 관련기능 | 전체 화면 크기 구하기 | screen.widthscreen.height |
유효한 전체 화면 크기 구하기 | screen.availWidthscrenn.availHeight | |
윈도우 크기 구하기 | 기본 크기 구하기window.innerWidthwindow.innerHeight기본 크기+메뉴바+툴바 영역이 포함된 크기 구하기$(window).width()$(window).height()기본 크기+메뉴바+툴바+스크롤바 영역이 포함된 크기 구하기window.outerWidthwindow.outerHeight | |
윈도우 크기 설정하기 | window.resizeTo(width,height) | |
윈도우 변경 이벤트 처리 | $(window).on("resize", function(){}) | |
윈도우 위치 다루기 | 위치 값 구하기window.screenLeftwindow.screenTop위치 값 설정하기window.moveTo(dx,dy)window.moveBy(dx,dy) | |
윈도우 스크롤 다루기 | 스크롤 위치 값 구하기window.pageXOffsetwindow.pageYOffset스크롤 위치 설정하기window.scrollTo(x,y)window.scrollBy(x,y)스크롤 이벤트 처리하기$(window).on("scroll",function(){}) | |
마우스의위치 및 크기관련 기능 | 클릭한 전역 위치 | 윈도우 영역을 기준으로 하는 전역 위치mouseEvent.clientXmouseEvent.clientY문서 영역을 기준으로 하는 전역 위치mouseEvent.pageXmouseEvent.pageX |
클릭한 지역 위치 | var offsetX = mouseEvent.pageX - $(타깃).offset().leftvar offsetY = mouseEvent.pageY - $(타깃).offset().top |
애니메이션 효과 메서드
분류 | 핵심 내용 | 핵심 프로퍼티 및 메서드 |
일반효과다루기 | 나타나고 사라지는 효과 | 나타나기$대상.show()사라지기$대상.hide() |
페이드 인/아웃 효과 | 페이드 인$대상.fadeIn()페이드 아웃$대상.fadeOut() | |
슬라이드 업/다운 효과 | 슬라이드 업$대상.slideUp()슬라이드 다운$대상.slideDown() | |
사용자정의효과다루기 | 사용자 정의 애니메이션 효과 만들기 | $대상.animate({스타일 속성 이름:속성값, ...},애니메이션 시간) |
애니메이션 효과 멈추기 | $대상.stop() |
반응형
'프로그래밍_기타 언어' 카테고리의 다른 글
뉴스 스크래핑 파이썬 코드 (2) | 2024.09.22 |
---|---|
jquery 에서 사용하는 속성 메서드 정리 (1) | 2024.09.22 |
jquery 노드 메서드 정리 (0) | 2024.09.22 |
jquery 이벤트 메서드 (1) | 2024.09.22 |
JAVA Script 기본적인 내용 (7) | 2024.09.22 |