Javascript

종류	제이쿼리	자바스크립트	설명
기본 선택자	$("*")	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']")	-
	$("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()	-	요소의 가로(패딩/보더/마진 미포함)
	height()	-	요소의 세로(패딩/보더/마진 미포함)
	innerWidth()	clientWidth	요소의 가로(패딩 포함, 보더/마진 미포함)
	innerHeight()	clientHeight	요소의 세로(패딩 포함, 보더/마진 미포함)
	outerWidth()	offsetWidth	요소의 가로(패딩/보더 포함, 마진 미포함)
	outerHeight()	offsetHeight	요소의 세로(패딩/보더 포함, 마진 미포함)
	outerWidth(true)	-	요소의 가로(패딩/보더/마진 포함)
	outerHeight(true)	-	요소의 세로(패딩/보더/마진 포함)
	$(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	요소의 세로 스크롤값