반응형

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

반응형

+ Recent posts