[jQuery]제이쿼리 자주쓰는 함수모음1

@Charles Deluvio unsplash

제이쿼리(jQuery) 선택자

선택자명	설명
$("tag")	tag라는 이름의 모든 태그 요소를 선택
$(".class")	class라는 클래스명의 모든 클래스 요소를 선택
$("#id")	id라는 아이디명의 아이디요소를 선택(한페이지에 1개만 가능)
$("div li")	div에 있는 li모두 선택
$("div > p")	div의 p태그라는 직계자식을 선택
$(this)	현재선택중인 요소를 가리킴

※ 선택자 태그 입력 시 홑따옴표(') 또는 쌍따옴표("") 모두 입력가능 $('') 또는 $("")

 

제이쿼리(jQuery) 메소드 모음

분류	메소드	설명
일반노드찾기	$(선택자).length	찾은개수 구하기
	$(선택자).eq(index)	n번째 노드 접근하기
	$(선택자).get(index) $(선택자)[index]	자바스크립트 DOM 객체 접근하기
	$(선택자).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)+") ")	마지막 번째 자식 노드 찾기
	$(선택자).children().eq(index) $(선택자).children(":eq("+index+")")	n번째 자식 노드 찾기
부모노드찾기	$(선택자).parent()	부모 노드 찾기
	$(선택자).parents(["선택자"])	조상 노드 찾기
노드생성/추가	$("추가노드 DOM 문자열")	노드 생성
	$부모노드.prepend($추가노드) $추가노드.prependTo($부모노드)	첫 번째 자식 노드로 추가
	$부모노드.append($추가노드) $추가노드.appendTo($부모노드)	마지막 번째 자식 노드로 추가
	$기준노드.before($추가노드) $추가노드.insertBefore($기준노드)	특정 노드의 이전 위치에 추가
	$기준노드.after($추가노드) $추가노드.insertAfter($기준노드)	특정 노드의 다음 위치에 추가
노드제거	$(선택자).remove()	특정 노드 제거
	$(선택자).children().remove()	모든 자식 노드 제거
노드 내용 읽기 및  변경	$대상.html() //태그 내용 포함 $대상.text() //태그 내용 제외	노드 내용을 문자열로 읽기
	$대상.html("수정할 태그 문자열") $대상.text("수정할 텍스")	노드 내용 수정하기
	$대상.html("추가할 태그 문자열")	노드 내용을 이용해 여러 개의 자식 노드 추가하
	$대상.html("")	노드 내용을 이용해 모든 자식 노드 제거하기