jQuery 메서드 정리

jQuery 사용법

• CDN head 부분에 추가해야함

<script src="http://code.jquery.com/jquery-latest.js"></script>

jQuery ready

브라우저에서 DOM 트리 생성하고 난 후에 실행됨

$(document).ready(function () {
  //...
});

$(function () {
  //...
});

jQuery load

모든 include되는 프레임들과 object, 이미지까지 로드도니 이후에 실행

$(window).load(function () {
  //...
});

일반 노드 찾기

설명	코드
태그로 찾기	$("선택자")
클래스로 찾기	$(".선택자")
ID로 찾기	$("#선택자")
찾은 요소의 개수	.size() .length
찾은 요소의 n번째	.eq(index)
찾고 나서 특정요소만 거르기	.filter("선택자")
찾고 나서 특정 자식요소만 찾기	.find("선택자")

자식 노드 찾기

설명	코드
전체 자식노드 (텍스트 노드 제외)	$("선택자").children()
전체 자식노드 (텍스트 노드 포함)	$("선택자").contents()
n번째 자식노드 접근	$("선택자").children().eq(n)
첫번째 자식노드 접근	$("선택자").children().first()
마지막 자식노드 접근	$("선택자").children().last()

부모 노드 찾기

설명	코드
부모 노드	$("선택자").parent()
조상 노드	$("선택자").parents()

형제 노드

설명	코드
이전 형제 노드	$("선택자").prev()
다음 형제 노드	$("선택자").next()

노드 CRUD

설명	코드
노드 생성	$("<노드> ... </노드>")
노드 복사	$("선택자").clone()
노드 추가	$기준노드.append($추가노드) $추가노드.appendTo($기준노드)
노드 삭제	$("선택자").remove()
노드 이동	$기준노드.append($이동노드) $이동노드.appendTo($기준노드)

텍스트 CRUD

설명	코드
텍스트 노드 생성	$("텍스트")
텍스트 노드 추가	$기준노드.append("텍스트")
텍스트 노드 변경	$기준노드.text("새로운 텍스트")

CSS 관련

설명	코드
스타일 속성값 구하기	$("선택자").css("스타일 속성")
스타일 속성값 설정하기	$("선택자").css("스타일 속성", "값")

속성 관련

설명	코드
속성값 구하기	$("선택자").attr("속성이름")
속성값 설정하기	$("선택자").attr("속성이름", "속성값")
속성 제거하기	$("선택자").removeAttr("속성이름")

이벤트 다루기

설명	코드
이벤트 리스너 추가하기	$("선택자").on("이벤트 이름", 이벤트 리스너)
이벤트 리스너 삭제하기	$("선택자").off("이벤트 이름", 이벤트 리스너)

참고

https://usage.tistory.com/31