/
/

jQuery 메소드 종류와 설명

avatar
전상욱
2025.04.10
·
10 min read

$(this)

  • 자신을 바인딩

  • JSthis === jQuery$(this)[0]

.find()

  • 해당 선택자 자손요소를 선택

.siblings()

  • 선택자의 형제들 선택

.eq()

  • 선택자중에 해당 인덱스 요소를 선택

.add()

  • 해당 선택자의 선택 요소 추가

.not()

  • 해당 선택자 중에 ( )내부의 선택자를 제외 하고 요소 선택

.has()

  • ( )내부의 요소를 가지고 있는 선택자 선택

.parent()

  • 해당 선택자 바로 상위 부모 요소 선택

.parents()

  • 해당 선택자 상위 모든 부모 요소 선택

.next()

  • ( )의 선택 요소의 바로 다음에 위치한 형제 요소 선택

.prev()

  • ( )의 선택 요소의 바로 이전의 위치한 형제 요소 선택

.after()

  • ( )의 선택 요소에 뒤에 새로운 요소 추가 또는 다른 요소를 이동

.before()

  • ( )의 선택 요소에 앞에 새로운 요소 추가 또는 다른 요소를 이동

.css()

  • ( )의 선택 요소의 css속성값을 갖고옴. 또는 style속성 추가

.on()

  • 이벤트를 동시에 실행시킬수 있음. 이벤트 실행

  • 자바스크립트에서 EventListener

.ready()

  • 호출 시점 차이. DOM TREE 생성이 완료된 후 호출

.laod()

  • 웹페이지가 다 구성된 후 호출

.text()

  • 요소내부의 text를 갖고옴. 또는 text바꿈

.html()

  • 요소내부의 html를 String형태로 갖고옴. 또는 html를 바꿈

  • text와 다르게 html태그 기능이 실행

.addClass()

  • ( )의 선택요소에 클래스를 추가

.removeClass()

  • ( )의 선택요소에 클래스를 지움

.toggleClass()

  • 클래스를 실행/삭제 두 기능 (토글기능)

.animate()

  • 애니메이션 기능 (CSS를 객체 형식으로 입력)

.fadeIn()

  • 서서히 나타난다.

.fadeOut()

  • 서서히 사라진다.

.fadeToggle()

  • 서서히 나타남과 사라짐 두 기능 (토글기능)

.slideUp()

  • 슬라이드 효과, 올라가며 사라지게함.

.slideDown()

  • 슬라이드 효과, 내려가며 사라지게함.

.slideToggle()

  • 슬라이드 올라감, 내려감 두기능 (토글기능)

.show()

  • ( )의 선택 요소 보여짐

.hide()

  • ( )의 선택 요소 사라짐

.toggle()

  • ( )의 선택 요소 .show .hide 메서드 두기능 (토글기능)

.append()

  • 해당 선택자 내부 가장 뒤에 새로운 요소나 콘테츠 추가

.prepend()

  • 해당 선택자 내부 가장 앞에 새로운 요소나 콘테츠 추가

.remove()

  • 해당 선택자 요소 삭제

.empty()

  • ( )의 선택요소의 내용을 삭제. 태그는 그대로 남아있음.

.click()

  • 클릭했을 때 실행

.dbclick()

  • 지정한 태그가 더블클릭되었을 때 실행

.change()

  • 요소 값이 변했을 때 실행

.hover()

  • 마우스를 올렸을 때 실행

.mouseover()

  • 마우스를 올렸을 때 실행

.mouseleave()

  • 마우스가 벗어났을 때 실행

.mousemove()

  • 마우스를 움직이면 실행

.mousedown()

  • 마우스가 요소 밖으로 나가면 실행

.mouseup()

  • 마우스를 요소 안으로 들어오면 실행

.focus()

  • 해당 요소에 포커스가 가면 실행

.blur()

  • 해당 요소에 포커스가 나가면 실행

.bind()

  • 선택한 DOM 객체에 이벤트 핸들러를 등록하는 메서드

.keydown()

  • 키보드를 눌렀을 때 실행

.keyup()

  • 키보드를 누른 상태에서 키보드를 떼었을때 실행

.resize()

  • 윈도우 크기가 바뀔 때 실행

.scroll()

  • 스크롤을 할 때 실행

.submit()

  • form요소가 서버로 전송되는 (submit)되는 과정에 실행

.trigger()

  • 이벤트가 발생할 때 실행될 함수나 .bind() 함수로 연결된 어떤 이벤트 핸들러를 강제로 실행시켜줌

.delay()

  • 실행 중인 함수를 정해진 시간만큼 중지(연기)

.stop()

  • 동작하고 있는 애니메이션 것을 중단.

.appendTo()

  • 해당 요소 또는 텍스트를 ( )의 내부 선택요소 뒤에 추가

.prependTo()

  • 해당 요소 또는 텍스트를 ( )의 내부 선택요소 앞에 추가

.attr()

  • ( )요소에 속상 값을 가져오거나 추가.

.height()

  • 선택 요소의 높이

.innerHeight()

  • 선택 요소의 첫 번째 요소에 패딩영역을 포함한 높이

.outerHeight()

  • 선택 요소의 첫 번째 요소에 패딩영역과 테두리를 포함한 높이

.width()

  • 선택 요소의 너비

.innerWidth()

  • 선택 요소의 첫 번째 요소에 패딩영역을 포함한 너비

.outerWidth()

  • 선택 요소의 첫 번째 요소에 패딩영역과 테두리를 포함한 너비

.offset()

  • 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동

.prop()

  • 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가

  • HTML입장의 속성이 아닌, JavaScript 입장에서의 속성

.push()

  • 배열의 맨 끝에 원소를 추가

.pop()

  • 배열의 마지막 원소를 제거

.replace()

  • 특정 문자열을 찾아 다른 문자열로 바꾸는 메서드

.replaceAll()

  • 특정 문자열을 찾아 다른 문자열로 바꾸는 메서드

  • 불특정 문자열도 변환 가능

.val()

  • 요소의 value를 갖고옴

  • 요소의 value를 바꿈

.each()

  • 선택한 요소가 여러 개일 때 각각에 대하여 반복하여 함수

.filter()

  • 요소들을 걸러내는 메서드

.findIndex()

  • 배열의 요소가 객체로 이루어졌을 때 인덱스 탐색하는 메서드

.is()

  • 셀랙터의 대상을 다시 셀렉터로 비교하여 맞으면 true, 아니면 false를 반환

.slice()

  • 배열 또는 문자열을 자름

.length

  • 문자열의 길이를 반환하는 속성

.substr()

  • 문자열에서 특정 부분만 골라낼 때 사용하는 메서드

.substring()

  • 문자열에서 특정 부분만 골라낼 때 사용하는 메서드

.split()

  • 문자열을 분할하는 메서드

.index()

  • 자신이 몇 번 째인지 확인

  • 형제들 끼리만 순서를 매김

.search()

  • 검색된 문자열의 위치값을 내놓는다. (전체 문자열에서 몇번째에 있는지)

Number()

  • 문자열을 숫자로 변환하는 함수

String()

  • 숫자를 문자열로 변환하는 함수

JSON.parse()

  • JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성

$.ajax()

  • 비동기식 Ajax를 이용하여 HTTP 요청을 전송함.

- 컬렉션 아티클