jQuery는 크로스 브라우징 라이브러리의 한 종류입니다.
자바스크립트 DOM을 좀 더 쉽게 활용할수 있습니다.
jQuery에 대해서 알수 있는 사이트를 소개해 드립니다.
http://api.jquery.com/ jquery의 다양한 기능을 알아볼수 있습니다.
jquery에서 자주 쓰이는 내용.
자바스크립트 + jQuery 완전정복 스터디 참고
일반 노드 찾기
01_id로 노드 찾기 $("#id")
02_Tag로 노드 찾기 $("Tag")
03_class로 노드 찾기 $(".class")
04_속성으로 노드 찾기 $("#[속성이름=값]")
찾은 노드 다루기
01_찾은 개수 구하기 $대상.length
02_n번째 노드 접근 $대상.eq(index)
03_jsDOM 객체 접근 $대상.get(index) / $대상[index]
04_순차적으로 노드 접근 $대상.each(function(index){$(this)})
05_찾은 노드중 특정 노드 $대상.filter("선택자")
06_찾은 노드의 자손중 특정노드 $대상.find("선택자")
07_인덱스값 구하기 $대상.index() / $목록.index($대상)
자식 노드 찾기
01_모든 자식 노드 찾기 $대상.children()
02_특정 자식 노드 찾기 $대상.children("선택자")
03_첫번째 자식 노드 찾기 $대상.children().first / $대상.children().eq(0)
$대상.children(":first") / $대상.children(":eq(0)")
04_마지막 노드 찾기 $대상.children().last() / $대상.children().eq(-1)
$대상.children().eq($대상.children.().length-1)
05_n번째 자식 노드 찾기 $대상.children().eq(index)
부모 노드 찾기
01_부모 노드 찾기 $대상.parent()
02_조상 노드 찾기 $대상.parents("선택자")
형제 노드 찾기
01_이전 형제 노드 찾기 $대상.prev() / $대상.prevAll(["선택자"])
02_다음 형제 노드 찾기 $대상.next() / $대상.nextAll(["선택자"])
노드 생성 / 추가
01_노드 생성 $("추가노드 DOM 문자열")
02_첫번째 자식 노드로 추가 $부모노드.prepend($추가노드) / $추가노드.prependTo($부모노드)
03_마지막 자식 노드로 추가 $부모노드.apend($추가노드) / $추가노드.apendTo($부모노드)
04_특정노드 이전 위치 추가 $추가노드.insertBefore($기준노드) / $기준노드.before($추가노드)
05_특정노드 이후 위치 추가 $추가노드.insertAfter($기준노드) / $기준노드.after($추가노드)
노드 이동
01_첫번째 자식 노드로 이동 $부모노드.prepend($이동노드) / $이동노드.prependTo($부모노드)
02_마지막 자식 노드로 이동 $부모노드.apend($이동노드) / $이동노드.apendTo($부모노드)
03_특정 노드 이전으로 이동 $이동노드.insertBefore($기준노드) / $기준노드.before($이동노드)
04_특정 노드 이후로 이동 $이동노드.insertAfter($기준노드) / $기준노드.after($이동노드)
노드 제거
01_특정 노드 제거 $대상.remove()
02_모든 자식 노드 제거 $대상.children().remove()
노드내용 읽기 및 변경
01_노드 내용을 문자열로 읽기 $대상.html() / 태그 내용 포함 / $대상.text() /태그 내용 제외
02_노드 내용 수정하기 $대상.html("수정할 태그 문자열") / $대상.text("수정할 텍스트")
03_노드 내용을 통해 여러 자식 추가하기 $대상.html("추가 태그 문자열")
04_노드 내용을 이용해 모든 자식노드 제거하기 $대상.html("")
스타일 다루기
01_스타일 값 구하기 #대상.css("스타일속성이름") / #대상.css(["스타일속성이름",…])
02_스타일 값 설정하기 #대상.css("스타일속성이름",값) / #대상.css(["스타일속성이름 : 값",…])
03_클래스 추가 #대상.addClass("클래스이름1 [클래스이름2…]")
04_클래스 삭제 #대상.removeClass("클래스이름1 [클래스이름2…]")
속성 다루기
01_속성 값 구하기 $대상.attr("속성이름") / $대상.data("data-속성이름")
02_속성 값 설정하기 $대상.attr("속성이름","값") / $대상.data("data-속성이름","값")
이벤트 다루기
01_일반 이벤트 등록 $대상.on("이벤트 이름",이벤트 리스너)
02_단축 이벤트 등록 $대상.단축이벤트(이벤트리스너)
03_등록한 이벤트 제거 $대상.off("click",삭제하고싶은 이벤트리스너) / $대상.off("click") / $대상.off()
04_이벤트 한 번만 실행 $대상.one(이벤트이름,이벤트리스너)
05_기본 행동 취소 이벤트객체.preventDefault()
06_버블링 멈추기 이벤트객체.stopPropagation()
07_버블링 활용:하나의 이벤트 $대상.on("이벤트 명","선택자",이벤트리스너)
요소의 위치 및 크기 기능
01_부모노드 좌표 구하기 $대상.offsetParent()
02_지역 좌표 위치 다루기 $대상.position().left or top //위치 값 구하기
$대상.css("left" or "top",위치값) / $대상.css{[left:위치값 , top:위치값]} //위치설정
03_전역 좌표 위치 다루기 $대상.offset().left or top //위치 값 구하기
$대상.offset({left:위치값 , top:위치값}) //전역 위치 설정
04_요소 크기 다루기 $대상.width() or height() //기본 크기 구하기
$대상.innerWidth() or innerHeight() //크기+padding
$대상.outerWidth() or outerHeight() //크기+padding+border
$대상.outerWidth(true) or outerHeight(true) //크기+padding+border+margin
$대상.width(크기값) or height(크기값) //값 조절 나머지 태그도 비슷
05_요소 스크롤 위치 다루기 $대상.scrollLeft() or scrollTop() //스크롤 위치 구하기
$대상.scrollLeft(위치값) or scrollTop(위치값) //스크롤 위치 설정하기
문서의 위치 및 크기관련 기능
01_문서 크기 구하기 $(document).width() of height()
화면및 윈도우 위치&크기 관련기능
01_전체 화면 크기 구하기 screen.width of height
02_유효한 전체 화면 크기 구하기 screen.availwidth of availHeght
03_윈도우 크기 구하기 window.innerWidth or innerHeight //기본 크기 구하기
$(window).width() or Height() //기본+메뉴바+툴바 영역 크기
$(window).outerWidth() or outerHeight() //기본+메뉴바+툴바+스크롤바 영역 크기
04_윈도우 크기 설정하기 window.resizeTo(width,height)
05_윈도우 변경 이벤트 처리 $(window).on("resize" , function(){})
06_윈도우 위치 다루기 window.screenLeft of screenRight // 위치값 구하기
window.moveTo(dx,dy) of moveBy(dx,dy) // 위치값 설정하기
07_윈도우 스크롤 다루기 window.pageXOffset of pageYOffset //스크롤 위치값 구하기
window.scrollTo(x,y) of scrollBy(x,y) //스크롤 위치 설정하기
$(window).on("scroll",function(){})
마우스의 위치 및 크기 관련기능
01_클릭한 전역 위치 mouseEvent.clientX of clientY //윈도우 영역을 기준으로 하는 전역위치
mouseEvent.pageX of pageY //문서 영역을 기준으로 하는 전역위치
02_클릭한 지역 위치 var offsetX = mouseEvent.pageX - $(타깃).offset().left
var offsetY = mouseEvent.pageY - $(타깃).offset().top
일반 효과 다루기
01_나타나고 사라짐 $대상.show() and hide() // 나타나기 , 사라지기
02_페이드인 아웃 $대상.fadeIn() and fadeOut() //페이드 인 , 아웃
03_슬라이드 업/다운 효과 $대상.slideUp() and slideDown //슬라이드 업 , 다운
사용자 정의 효과 다루기
01_사용자 정의 애니메이션 효과 만들기 $대상.animate(properties,options)
$대상.animate(properties[,duration][,erasing][,complete])
02_애니메이션 효과 멈추기 $대상.stop()