[jQuery]제이쿼리 자주쓰는 함수 모음2

 

@wes-hicks unspalsh

스타일 메서드

 

메소드	설명
$(선택자).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()	해당 선택자의 애니메이션 효과 멈추기