자바스크립트 : 제이쿼리

종류	제이쿼리	자바스크립트
기본 선택자	$("*")	document.querySelector("*")
	$(".class")	document.querySelector(".class")
	$("div")	document.querySelector("div")
	$("#id")	document.querySelector("#id")
	$("#id, .class")	document.querySelector("#id, .class")
계층 선택자	$("div p")	document.querySelector("div p")
	$("div > p")	document.querySelector("div > p")
	$("div + p")	document.querySelector("div + p")
	$("div ~ p")	document.querySelector("div ~ p")
속성 선택자	$("div[class]")	-
	$("div[class='name'][id='name']")	-
	$("div[class='name']")	-
	$("div[class!='name']")	-
	$("div[class~='name']")	-
	$("div[class*='name']")	-
	$("div[class\|='name']")	-
	$("div[class^='name']")	-
	$("div[class$='name']")	-

Dimensions	width()	-	요소의 가로값(padding/border/margin 미포함)
	height()	-	요소의 세로값(padding/border/margin 미포함)
	innerWidth()	clientWidth	요소의 가로값(padding 포함, border/margin 미포함)
	innerHeight()	clientHeight	요소의 세로값(padding 포함, border/margin 미포함)
	outerWidth()	offsetWidth(속성 / 제이쿼리에서는 메서드)	요소의 가로값(padding/border 포함, margin 미포함)
	outerHeight()	offsetHeight(속성)	요소의 세로값(padding/border 포함, margin 미포함)
	outerWidth(true)	-	요소의 가로값(padding/border/margin 포함)
	outerHeight(true)	-	요소의 세로값(padding/border/margin 포함)
	$(window).width()	innerWidth / outerWidth	브라우저 가로 값(스크롤바 미포함 / 포함)
	(window).height()	innerHeight / outerHeight	브라우저 세로 값(스크롤바 미포함 / 포함)
offset	offset().top / offset().left	offsetTop / offsetLeft	요소의 좌표값(문서 기준)
	offsetParent()	offsetParent	요소의 좌표값(부모 기준)
	position()		요소의 좌표값(기준점 기준)
	scrollLeft()	pageXOffset / window.scrollX	요소의 가로 스크롤 값
	scrollTop()	pageYOffset / window.scrollY	요소의 세로 스크롤 값