제이쿼리(jQuery) 메서드 정리

jQuery는 자바스크립트 DOM을 좀더 쉽게 작업하기 위한 라이브러리 덩어리이다. 똑같은 작업을 자바스크립트로 코딩하면 10줄, JQuery로 코딩하면 1줄로 처리할 수 있을 만큼 효율적인 코드로 작업할 수 있다. 

 

jQuery 를 사용해야 한다 사용하지 말아야한다로 말들이 많지만 일단은 배워서 익혀놓고 선택은 자신의 판단에 맡기는게 맞지 않나 합니다.

노드 메서드

노드를 선택하거나, 찾아가는 방법(체인기능)의 메서드 입니다.

분류	핵심 내용	핵심 프로퍼티 및 메서드
일반 노드 찾기	아이디 이름으로 노드 찾기	$("아이디 이름")
	태그 이름으로 노드 찾기	$("태그 이름")
	클래스 이름으로 노드 찾기	$("클래스 이름")
	속성으로 노드 찾기	$("[속성이름=값]")
찾은 노드 다루기	찾은 개수 구하기	$대상.length
	n번째 노드 접근하기	$대상.eq(index)
	자바스크립트 DOM 객체 접근하기	$대상.get(index) $대상[index]
	순차적으로 노드 접근하기	$대상.each(function(index){ $(this) 또는 $대상.eq(index); });
	찾은 노드 중에서 특정 노드만 찾기	$대상.filter("선택자")
	찾은 노드의 자손 노드 중 특정 노드만 찾기	$대상.find("선택자")
	인덱스 값 구하기	$대상.index() $목록.index($대상) $목록.index(대상 DOM 객체)
자식 노드 찾기	모든 자식 노드 찾기	$대상.children()
	특정 자식 노드만 찾기	$대상.children("선택자")
	첫 번째 자식 노드 찾기	$대상.children().first() $대상.children(":first") $대상.children().eq(0) $대상.children("eq(0)")
	마지막 번째 자식 노드 찾기	$대상.children().last() $대상.children(":last") $대상.children().eq($대상.children().length-1) $대상.children(":eq("+($대상.children().length-1)+")")
	n번째 자식 노드 찾기	$대상.children().eq(index) $대상.children(":eq("+index+")")
부모 노드 찾기	부모 노드 찾기	$대상.parent()
	조상 노드 찾기	$대상.parents(["선택자"])
형제 노드 찾기	이전 형제 노드 찾기	$대상.prev() $대상.prevAll(["선택자"])
	다음 형제 노드 찾기	$대상.next() $대상.nextAll(["선택자"])
노드 생성 / 추가	노드 생성	$("추가노드 DOM 문자열")
	첫 번째 자식 노드로 추가	$부모노드.prepend($추가노드) $추가노드.prependTo($부모노드)
	마지막 번째 자식 노드로 추가	$부모노드.append($추가노드) $추가노드.appendTo($부모노드)
	특정 노드의 이전 위치에 추가	$기준노드.before($추가노드) $추가노드.insertBefore($기준노드)
	특정 노드의 다음 위치에 추가	$기준노드.after($추가노드) $추가노드.insertAfter($기준노드)
노드제거	특정 노드 제거	$대상.remove()
	모든 자식 노드 제거	$대상.children().remove()
노드 내용 읽기 및 변경	노드 내용을 문자열로 읽기	$대상.html() //태그 내용 포함 $대상.text() //태그 내용 제외
	노드 내용 수정하기	$대상.html("수정할 태그 문자열") $대상.text("수정할 텍스")
	노드 내용을 이용해 여러 개의 자식 노드 추가하기	$대상.html("추가할 태그 문자열")
	노드 내용을 이용해 모든 자식 노드 제거하기	$대상.html("")

스타일 메서드

분류	핵심 내용	핵심 프로퍼티 및 메서드
스타일 다루기	스타일 값 구하기	$대상.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 완전정복 스터디(김춘경 지음)