반응형
jQuery 메서드
jQuery 메서드를 이전 1편에 이어 정리하고자 합니다.
사용 용도에 따라 분류하였습니다.
맑은커뮤니케이션 웹퍼블리셔 및 웹퍼블리싱 업무중 스크립트를 작성하다 갑자기 메서드가 기억나지 않는 분들에 참고가 되었으면 합니다.
스타일 메서드
| 분류 | 핵심 내용 | 핵심 프로퍼티 및 메서드 |
|---|---|---|
| 스타일 다루기 |
스타일 값 구하기 | $대상.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.width screen.height |
| 유효한 전체 화면 크기 구하기 | screen.availWidth screnn.availHeight | |
| 윈도우 크기 구하기 | 기본 크기 구하기 window.innerWidth window.innerHeight 기본 크기+메뉴바+툴바 영역이 포함된 크기 구하기 $(window).width() $(window).height() 기본 크기+메뉴바+툴바+스크롤바 영역이 포함된 크기 구하기 window.outerWidth window.outerHeight | |
| 윈도우 크기 설정하기 | window.resizeTo(width,height) | |
| 윈도우 변경 이벤트 처리 | $(window).on("resize", function(){}) | |
| 윈도우 위치 다루기 | 위치 값 구하기 window.screenLeft window.screenTop 위치 값 설정하기 window.moveTo(dx,dy) window.moveBy(dx,dy) | |
| 윈도우 스크롤 다루기 | 스크롤 위치 값 구하기 window.pageXOffset window.pageYOffset 스크롤 위치 설정하기 window.scrollTo(x,y) window.scrollBy(x,y) 스크롤 이벤트 처리하기 $(window).on("scroll",function(){}) | |
| 마우스의 위치 및 크기 관련 기능 |
클릭한 전역 위치 | 윈도우 영역을 기준으로 하는 전역 위치 mouseEvent.clientX mouseEvent.clientY 문서 영역을 기준으로 하는 전역 위치 mouseEvent.pageX mouseEvent.pageX |
| 클릭한 지역 위치 | var offsetX = mouseEvent.pageX - $(타깃).offset().left var offsetY = mouseEvent.pageY - $(타깃).offset().top |
애니메이션 효과 메서드
| 분류 | 핵심 내용 | 핵심 프로퍼티 및 메서드 |
|---|---|---|
| 일반 효과 다루기 |
나타나고 사라지는 효과 | 나타나기 $대상.show() 사라지기 $대상.hide() |
| 페이드 인/아웃 효과 | 페이드 인 $대상.fadeIn() 페이드 아웃 $대상.fadeOut() | |
| 슬라이드 업/다운 효과 | 슬라이드 업 $대상.slideUp() 슬라이드 다운 $대상.slideDown() | |
| 사용자 정의 효과 다루기 |
사용자 정의 애니메이션 효과 만들기 | $대상.animate({스타일 속성 이름:속성값, ...},애니메이션 시간) |
| 애니메이션 효과 멈추기 | $대상.stop() |
참조 - (메소드 정리표)
자바스크립트 + jQuery 완전정복 스터디(김춘경 지음)
반응형
'javascript' 카테고리의 다른 글
| 반응형 슬라이더 Swiper (사용 방법/예제) 웹퍼블리싱 (0) | 2020.02.17 |
|---|---|
| placeholder 제대로 사용하기 (2) | 2019.01.17 |
| jQuery란 무엇인가? jQuery 메서드 정리표 1편 (0) | 2018.10.15 |
| 웹퍼블리싱을 위한 JQUERY Plugin (0) | 2012.05.25 |
| 퍼블리셔를 위한 기본 자바스크립트 강좌(1편) (0) | 2012.04.12 |