본문 바로가기
프로그래밍_기타 언어

jquery 메서드 종류 및 기본 설명

by 떠도리c 2024. 9. 22.
반응형

스타일 메서드

분류 핵심 내용 핵심 프로퍼티 및 메서드
스타일다루기 스타일 값 구하기 $대상.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()  

 

반응형