JQuery 제이쿼리

기본 선택자 종류

※ HTML 문서객체 (DOM : Document Object Model )을 요소 또는 태그로 표현.

구분	종류	사용법	설명
직접 선택자	전체 선택자	$("*")	모든 요소를 선택 합니다.
	아이디 선택자	$("#아이디명")	id 속성에 지정한 값을 가진 요소를 선택합니다.
	클래스 선택자	$(".클래스명")	class  속성에 지정한 값을 가진 요소를 선택합니다.
	요소 선택자	$("요소명")	지정한 요소명과 일치하는 요소들만 선택합니다.
	그룹 선택자	$("선택1, 선택2, 선택 3, ... 선택n")	선택1, 선택2, 선택3, ... 선택n 에 지정된 요소들을 한 번에 선택합니다.
	종속 선택자	$("p.txt_1") $("p#txt_1")	<p> 요소 중 class 값이 txt_1인 요소 또는 id 값이 txt_1인 요소를 선택합니다.
인접관계 선택자	부모 요소 선택자	$("요소 선택").parent()	선택한 요소의 부모 요소를 선택합니다.
	상위 요소 선택자	$("요소 선택").parents()	선택한 요소의 상위 요소를 모두 선택합니다.
	가장 가까운 상위  요소 선택자	$("요소 선택").closest("div")	선택한 요소의 상위 요소 중 가장 가까운 <div>만  선택합니다.
	하위 요소 선택자	$("요소 선택 하위 요소")	선택한 요소에 지정한 하위 요소를 선택합니다.
	자식 요소 선택자	$("요소 선택 > 자식 요소")	선택한 요소를 기준으로 자식 관계에 지정한 요소만  선택합니다.
	자식 요소들 선택자	$("요소 선택").children()	선택한 요소의 모든 자식 요소를 선택합니다.
	형(이전) 요소 선택자	$("요소 선택").prev()	선택한 요소의 바로 이전 요소를 선택합니다.
	형(이전) 요소들 선택자	$("요소 선택").prevAll()	선택한 요소의 이전 요소 모두를 선택합니다.
	지정 형(이전) 요소들 선택자	$("요소 선택").prevUntil ("요소명")	선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택합니다.
	동생(다음) 요소 선택자	$("요소 선택").nextAll() $("요소 선택+다음요소")	선택한 요소의 다음 요소를 선택합니다.
	동생(다음) 요소들 선택자	$("요소 선택").nextAll()	선택한 요소의 다음 요소 모두를 선택합니다.
	지정 동생(다음) 요소들 선택자	$("요소 선택").nextUntil ("h2")	선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택합니다.
	전체 형제 요소 선택자	$(".box_1").siblings()	class 값이 box_1 인 요소의 형제  요소 전체를 선택  합니다.

 

위치 탐색 선택자

종류	사용법	설명
$("요소 선택:first") $("요소 선택").first()	$("li:first") $("li").first( )	전체 <Ii> 요소 중 첫 번째 요소만 선택합니다.
$("요소 선택:last") $("요소 선택").last( )	$("li:last") $("li").last( )	전체 <li> 요소 중 마지막 요소만 선택합니다.
$("요소 선택:odd")	$("li:odd")	<li> 요소 무리 중 짝수 번째(홀수 인덱스) 요소만 선택합니다
$("요소 선택:even")	$("li:even")	<li> 요소 무리 중 홀수 번째(짝수 인덱스) 요소만 선택합니다.
S("요소 선택:first-of-type")	$("li:first-of-type")	<li> 요소 무리 중 첫 번째 요소만 선택합니다.
$("요소 선택:last-of-type")	$("li:last-of-type")	<li> 요소 무리 중 마지막 요소만 선택합니다.
$("요소 선택:nth-child(숫자)")	$("li:nth-child(3)")	<li> 요소 무리 중 세 번째 요소만 선택합니다.
$("요소 선택:nth-child(숫자n)")	$("li:nth-child(3n)")	<li> 요소 무리 중 3의 배수 번째에 있는 요소만 선택합니다.
$("요소 선택:nth-last-of-type(숫자)")	$("li:nth-last-of-type(2)")	<li> 요소 무리 중 마지막 위치로부터 두 번째에 있는 요소만 선택합니다.
$("요소 선택:only-child")	$("li:only-child")	부모 요소 내에 <li> 요소가 1개뿐인 <li> 요소만 선택합니다.
$("요소 선택:eq(index)") $("요소 선택").eq(index)	$("li:eq(2)") $("li").eq(2)	<Ii> 요소 중 인덱스 2가 참조하는 요소를 불러옵니다.
$("요소 선택:gt(index)")	$("li:gt(1)")	<li> 요소 중 인덱스 1보다 큰 인덱스가 참조하는 요소를 불러 옵니다
$("요소 선택:lt(index)")	$("li:lt(1)")	<li> 요소 중 인덱스 1보다 작은 인덱스가 참조하는 요소를 불러 옵니다.
$("요소 선택").slice(index)	$("li"),slice(2)	<li> 요소 중 인덱스 2부터 참조하는 요소를 불러옵니다.

 

배열 관련 메서드의 종류

종류	사용법	설명
each()/ $.each( )	$("요소 선택").each(function) $.each($("요소 선택"). function)	배열에 저장된 문서 객체만큼 메서드가 반복 실행됩니다. 배 열에 저장된 객체의 인덱스 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구합니다.
$.map()	$.map(Array, function)	배열에 저장된 데이터 수만큼 메서드가 반복 실행됩니다. 함 수에서 반환된 데이터는 새 배열에 순서대로 저장됩니다. 새 로 저장된 배열 객체를 반환합니다.
$.grep()	$.grep(Array, function)	배열에 저장된 데이터 수만큼 메서드가 반복 실행됩니다. 반 환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으 로새 배열에 저장되며 그 배열을 반환합니다.
$.inArray()	$.inArray(data, Array, start index)	배열 안에서 데이터를 찾습니다. 데이터를 찾으면 가장 맨 앞 데이터의 인덱스를 반환하고, 찾지 못하면 -1을 반환합 니다. start index의 값을 지정하면 해당 위치부터 데이터를 찾습니다.
$.isArray()	$.isArray(object)	입력한 객체가 배열 객체라면 true를, 아니면 false를 반환 합니다.
$.merge()	$.merge(Array1, Array2)	인자값으로 입력한 2개의 배열 객체를 하나로 그룹화합니다.
index()	$("요소 선택").index("지정 요소 선택")	선택자로 요소를 먼저 선택합니다. 그런 다음 지정한 요소의 인덱스 정보를 가져옵니다.

 

속성 탐색 선택자

종류	사용법	설명
$("요소 선택[속성]")	$("li[title]")	<li> 요소 중 title 속성이 포함된 요소만 선택합니다.
$("요소 선택[속성=값]")	$("li[title='리스트']")	<li> 요소 중 title 속성값이 '리스트'인 요소만 선택합 니다.
$("요소 선택[속성^=텍스트]")	$("a[href^='http://']")	<li> 요소 중 href 속성값이 'http://'로 시작하는 요소 만 선택합니다.
$("요소 선택[속성$=텍스트]")	$("a[href$='.com']")	<Ii> 요소 중 href 속성값이 '.com'으로 끝나는 요소만 선택합니다.
$("요소 선택[href*=텍스트]")	$("a[href*='easyspub']")	<li> 요소 중 href 속성값 중에서 'easyspub'을 포함하 는 요소만 선택합니다.
$("요소 선택:hidden")	$("li:hidden")	<li> 요소 중 숨겨져 있는 요소만 선택합니다.
$("요소 선택:visible")	$("li:visible")	<li> 요소 중 보이는 요소만 선택합니다.
$(":text")	$(":text")	<input〉 요소 중 type 속성값이 "text"인 요소만 선택 합니다.
$(":selected")	$(":selected")	selected 속성이 적용된 요소만 선택합니다.
$(":checked")	$(":checked")	checked 속성이 적용된 요소만 선택합니다.

 

속성 조작 메서드

종류	사용법	설명
html() html("새 요소")	$("요소 선택",html(); $("요소 선택"),.html("새 요소”):	선택한 요소의 하위 요소를 가져옵니다. 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 요소를 생성합니다.
text() text("새 텍스트")	$("요소 선택").text(); $("요소 선택).text('새 텍스트”):	선택한 요소가 감싸사는 모든 텍스트를 가져옵니다. 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 텍스트를 생성합니다.
attr("속성명") attr("속성명","새 값")	$("요소 선택").attr("속성명”): $("요소 선택").attr('속성명","새 값”):	선택한 요소의 지정한 속성(attribute)값을 가져옵니다. 요소를 선택하여 지정한 속성에 새 값을 적용합니다.
removeAttr("속성명")	$("요소 선택").removeAttr("속성명");	선택한 요소의 지정한 속성만 제거합니다.
prop("상태 속성명") prop("상태 속성명", "새 값")	$("요소 선택").prop("상태 속성명”): $("요소 선택”).prop("상태 속성명","새 값”):	선택한 요소의 상태 속성값을 가져옵니다. 요소를 선택하여 상태 속성에 새 값을 적용합니다.
val( ) val("새 값")	$("요소 선택").val( ); $("요소 선택”).val('새 값”):	선택한 폼 요소의 value 값을 가져옵니다. 폼 요소를 선택하여 value 속성에 새 값을 적용합니다.
css("속성명") Css("속성명","새 값")	$("요소 선택").css("속성명”): $("요소 선택”).css('속성명","새 값”):	선택한 요소의 지정한 스타일(CSS) 속성값을 가져옵니다. 요소를 선택하여 지정한 스타일(CSS) 속성에 새값을 적용합니다.
addClass("class 값")	$("요소 선택").addClass("class 값");	선택한 요소의 class 속성에 새 값을 추가합니다.
removeClass("class 값")	$("요소 선택").removeClass("class 값");	선택한 요소의 class 속성에서 지정한 값만 제거합니다.
toggleClass("class값")	$("요소 선택").toggleClass("class 값");	선택한 요소의 class 값에 지정한 값이 포함되어 있으면 제거하고 속성값이 없으면 추가합니다.
hasClass("class 값")	$("요소 선택").hasClass("class 값");	선택한 요소의 class 값에 지정한 클래스 값이 포함되어 있으면 true를, 없으면 false를 반환합니다.

 

수치 조작 메서드

종류	사용법	설명
height()	$("요소 선택").height( ); $("요소 선택").height(100);	안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환합니다.
width()	$("요소 선택").width(): $("요소 선택").width(100);	안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환합니다.
innerHeight()	$("요소 선택").innerHeight( ); $("요소 선택").innerHeight(300):	안쪽 여백을 포함한 높잇값을 반환하거나 변환합니다.
innerWidth()	$("요소 선택").innerWidth(); $("요소 선택").innerWidth(100);	안쪽 여백을 포함한 너빗값을 반환하거나 변환합니다.
outerHeight()	$("요소 선택").outerHeight() $("요소 선택").outerHeight(100);	선과 안쪽 여백을 포함한 높잇값을 반환하거나 변환합니다.
outerWidth()	$("요소 선택").outerWidth( ); $("요소 선택").outerWidth(100);	선과 안쪽 여백을 포함한 너빗값을 반환하거나 변환합니다.
position()	$("요소 선택").position( ).left: $("요소 선택").position( ).top:	선택한 요소의 포지션 위칫값을 반환합니다.
offset()	$("요소 선택").offset().left $("요소 선택").offset().top:	선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는 지에 대한 값을 반환합니다.
scrollLeft()	$(window).scrollILeft();	브라우저의 수평 스크롤 이동 높잇값을 반환합니다.
scrollTop()	$(window).scrollTop();	브라우저의 수직 스크롤 이동 너빗값을 반환합니다.

 

객체 편집 메서드

종류	사용법	설명
before()	$("요소 선택").before("새 요소");	선택한 요소의 이전 위치에 새 요소를 추가합니다.
after()	$("요소 선택").after("새 요소");	선택한 요소의 다음 위치에 새 요소를 추가합니다.
append()	$("요소 선택").append("새 요소");	선택한 요소의 마지막 위치에 새 요소를 추가합니다.
appendTo()	$("새 요소").appendTo("요소 선택");	선택한 요소의 마지막 위치에 새 요소를 추가합니다.
prepend()	$("요소 선택").prepend("새 요소");	선택한 요소의 맨 앞 위치에 새 요소를 추가합니다.
prependTo()	$("새 요소").prependTo("요소 선택");	선택한 요소의 맨 앞 위치에 새 요소를 추가합니다.
insertBefore( )	$("새 요소").insertBefore("요소 선택");	선택한 요소의 이전 위치에 새 요소를 추가합니다
insertAfter( )	$("새 요소").insertAfter("요소 선택");	선택한 요소의 다음 위치에 새 요소를 추가합니다.
clone()	$("요소 선택").clone(true or false):	선택한 문서 객체를 복제합니다. 이때 인자값이 true일 경 우 하위 요소까지 모두 복제하고, false일 경우에는 선택한 요소만 복제합니다.
empty()	$("요소 선택").empty():	선택한 요소의 하위 내용들을 모두 삭제합니다.
remove()	$("요소 선택").remove( ):	선택한 요소를 삭제합니다.
replaceAll()/ replaceWith()	$("새 요소").replaceAll("요소 선택): $("요소 선택").replaceWith("새 요소"):	선택한 요소들을 새 요소로 교체합니다.
unwrap()	$("요소 선택").unwrap();	선택한 요소의 부모 요소를 삭제합니다.
wrap()	$("요소 선택").wrap("새 요소")	선택한 요소를 새 요소로 각각 감쌉니다.
wrapAll()	$("요소 선택").wrapAll()	선택한 요소를 새 요소로 한꺼번에 감쌉니다.
wraplnner()	$("요소 선택").wraplnner("새 요소"):	선택한 요소의 내용을 새 요소로 각각 감쌉니다.