노드 다루기
일반 노드 찾기
1. 아이디 이름으로 노드 찾기: $("#아이디이름")
2. 태그 이름으로 노드 찾기: $("태그이름")
3. 클래스 이름으로 노드 찾기: $(".클래스이름")
4. 속성으로 노드 찾기: $("[속성이름=값]")
찾은 노드 다루기
1. 찾은 개수 구하기: $대상.length
2. n번째 노드 접근하기: $대상.eq(index)
3. 자바스크립트 DOM 객체 접근하기: $대상.get(index) / $대상[index]
4. 순차적으로 노드 접근하기:
$대상.each(function(index){$(this);}) /
$대상.each(function(index){$대상.eq(index);})
5. 찾은 노드 중에서 특정 노드만 찾기: $대상.filter("선택자")
6. 찾은 노드의 자손 노드 중 특정 노드만 찾기: $대상.find("선택자")
7. 인덱스 값 구하기: $대상.index() / $목록.index($대상) / $목록.index(DOM객체)
자식 노드 찾기
1. 모든 자식 노드 찾기: $대상.children()
2. 특정 자식 노드만 찾기: $대상.children("선택자")
3. 첫 번째 노드 자식 찾기:
$대상.children().first()
$대상.children().eq(0)
$대상.children(":first")
$대상.children(":eq(0)")
4. 마지막 번째 자식 노드 찾기:
$대상.children().last
$대상.children(":last")
$대상.children().eq($대상.children().length-1)
$대상.children().eq(-1)
5. n번째 자식 노드 찾기
$대상.children().eq(index)
$대상.children(":eq("+index+")")
부모 노드 찾기
1. 부모 노드 찾기: $대상.parent()
2. 조상 노드 찾기: $대상.parents(["선택자"])
형제 노드 찾기
1. 이전 형제 노드 찾기: $대상.prev() / $대상.prevAll(["선택자"])
2. 다음 형제 노드 찾기: $대상.next() / $대상.nextAll(["선택자"])
노드 생성/ 추가
1. 노드 생성: $("추가노드DOM 문자열")
2. 첫 번째 자식 노드로 추가:
$부모노드.prepend($추가노드)
$추가노드.prependTo($부모노드)
3. 마지막 번째 자식 노드로 추가:
$부모노드.append($추가노드)
$추가노드.appendTo($부모노드)
4. 특정 노드의 이전 위치에 추가:
$추가노드.insertBefore($기준노드)
$기준노드.before($추가노드)
5. 특정 노드의 다음 위치에 추가:
$추가노드.insertAfter($기준노드)
$기준노드.after($추가노드)
노드 제거
1. 특정 노드 제거: $대상.remove()
2. 모든 자식 노드 제거: $대상.children().remove()
노드 내용 읽기 및 변경
1. 노드 내용을 문자열로 읽기:
$대상.html() // 태그 내용 포함
$대상.text() // 태그 내용 제외
2. 노드 내용 수정하기:
$대상.html("수정할 태그 문자열")
$대상.text("수정할 텍스트")
3. 노드 내용을 이용해 여러 개의 자식 노드 추가: $대상.html("추가할 태그 문자열")
4. 노드 내용을 이용해 모든 자식 노드 제거하기: $대상.html("")
스타일 다루기
1. 스타일 값 구하기:
$대상.css("스타일속성이름")
$대상.css(["스타일속성이름",...])
2. 스타일 값 설정하기
$대상.css("스타일속성이름",값)
$대상.css({ 스타일속성이름: 값, ....})
3. 클래스 추가: $대상.addClass("클래스이름1 [클래스이름2...]")
4. 클래스 삭제: $대상.removeClass("클래스이름1 [클래스이름2...]")
속성 다루기
1. 속성값 구하기:
$대상.attr("속성이름")
$대상.data("data-속성이름")
2. 속성값 설정하기:
$대상.attr("속성이름", "값")
$대상.data("data-속성이름", "값")
이벤트 다루기
1. 일반 이벤트 등록: $대상.on("이벤트이름", 이벤트리스너)
2. 단축 이벤트 등록: $대상.단축이벤트(이벤트리스너)
3. 등록한 이벤트 제거:
$대상.off("click", 삭제하고 싶은 이벤트 리스너명)
$대상.off("click")
$대상.off()
4. 이벤트 한 번만 실행: $대상.one(이벤트이름, 이벤트리스너)
5. 기본 행동 취소: 이벤트객체.preventDefault()
6. 버블링 멈추기: 이벤트객체.stopPropagation()
7. 버블링활용 하나의 이벤트:
$대상.on("이벤트명","선택자",이벤트리스너)
위치 및 크기 다루기
요소의 위치 및 크기 관련 기능
1. 부모 좌표 노드 구하기: $대상.offsetParent()
2. 지역 좌표 위치 구하기:
$대상.position().left
$대상.position().top
3. 지역 좌표 위치 설정하기:
$대상.css("left",위치값)
$대상.css("top",위치값)
$대상.css({left:위치값, top:위치값})
4. 전역 좌표 위치 구하기
$대상.offset().left
$대상.offset().top
5. 전역 좌표 위치 설정하기
$대상.offset({left:위치값,top:위치값})
요소 크기 다루기
1. 기본 크기 구하기: $대상.width() / $대상.height()
2. 기본 크기+padding 크기 구하기: $대상.innerWidth() / $대상.innerHeight()
3. 기본 크기+padding+border 크기 구하기:
$대상.outerWidth()
$대상.outerHeight()
4. 기본크기+padding+border+margin 크기 구하기:
$대상.outerWidth(true)
$대상.outerHeight(true)
5. 기본 크기 설정하기: $대상.width(크기값), $대상.height(크기값)
6. 기본 크기+padding 크기 설정하기:
$대상.innerWidth(크기값)
$대상.innerHeight(크기값)
요소의 위치 및 크기 관련 기능
1. 스크롤 위치 구하기:
$대상.scrollLeft()
$대상.scrollTop()
2. 스크롤 위치 설정하기:
$대상.scrollLeft(위치값)
$대상.scrollTop(위치값)
문서의 위치 및 크기 관련 기능
$(document).width()
$(document).height()
화면의 위치 및 크기 관련 기능 / 윈도우의 위치 및 크기 관련 기능
1. 전체 화면 크기 구하기: screen.width / screen.height
2. 유효한 전체 화면 크기 구하기:
screen.availWidth
screen.abailHeight
3. 윈도우 기본 크기 구하기:
window.innerWidth
window.innerHeight
4. 윈도우 기본크기+메뉴바+툴바 영역이 포함된 크기 구하기:
$(window).width()
$(window).height()
5. 윈도우 기본크기+메뉴바+툴바+스크롤바 영역이 포함된 크기 구하기:
window.outerWidth
window.outerHeight
6. 윈도우 크기 설정하기: window.resizeTo(width, height)
7. 윈도우 변경 이벤트 처리: $(window).on("resize", function(){})
8. 윈도우 위치 값 구하기:
window.screenLeft
window.screenTop
9. 윈도우 위치 값 설정하기:
window.moveTo(dx,dy)
window.moveBy(dx,dy)
10. 윈도우 스크롤 위치 값 구하기:
window.pageXOffset
window.pageYOffset
11. 윈도우 스크롤 위치 설정하기:
window.scrollTo(x,y)
window.scrillBy(x,y)
12. 스크롤 이벤트 처리하기:
$(window).on("scroll",function(){})
마우스의 위치 및 크기 관련 기능
1. 윈도우 영역을 기준으로 하는 전역 위치:
mouseEvent.clientX
mouseEvent.clientY
2. 문서 영역을 기준으로 하는 전역 위치:
mouseEvent.pageX
mouseEvent.pageY
3. 클릭한 지역 위치:
var offsetX=mouseEvent.pageX-$(타깃).offset().left
var offsetY=mouseEvent.pageY-$(타깃).offset().top
애니메이션 효과 다루기
일반 효과 다루기
1. 나타나고 사라지는 효과: $대상.show() / $대상.hide()
2. 페이드인/아웃 효과: $대상.fadeIn() / $대상.fadeOut()
3. 슬라이드 업/다운 효과: $대상.slideUp() / $대상.slideDown()
사용자 정의 효과 다루기
1. 사용자 정의 애니메이션 효과 만들기:
$대상.animate(properties, options)
$대상..animate(properties[,duration][,easing][,complete])
2. 애니메이션 효과 멈추기: $대상.stop()
