jQuery란 무엇인가? jQuery 메서드 정리표 2편

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 완전정복 스터디(김춘경 지음)