jquery 기초

jquery 사용하는 이유

jQuery는 자바스크립트 DOM을 좀더 쉽게 작업하기 위한 라이브러리이다.

결론부터 말하자면 jQuery의 정체는 자바스크립트 문법 중 프로토타입 방식으로 만들어진 클래스이다. 쉽게 이야기해 jQuery 메서드는 자바스크립트 DOM으로 이루어져 있다. 그렇기에 jQuery를 배운다는것은 메서드를 배우는 것이며, 이를 통해 자바스크립트로 코딩하면 10줄, jQuery로 코딩하면 2-3줄로 처리 할수 있을 만큼 효율적인 코드작업을 할 수 있다. 그렇다고 jQuery로 모든것을 다 할 수 있는것도 아니며 무조건 좋다는 말은 아니다.

제일 좋은 방법은 jQuery와 자바스크립트를 같이 사용하여 최적화 하는방법이 좋다. jQuery는 쉬운데 자바스크립트는 어렵다고 한다면 자바스크립트 기초도 충실히 공부해야 한다.

jQuery는 DOM 제어보다 크로스 브라우징 처리가 편리하다. IE7은 비표준 브라우저이기 때문에 이벤트 등록시 자바스크립트로 처리할 경우 attachEvent(), addEventListener()를 사용하여 코드를 작성하여야, IE7과 기타 브라우저의 크로스브라우징을 정상적으로 처리해야 한다. 하지만 jQuery 내부에는 이런 번거로운 작업들을 대신 처리해주기 때문에 이벤트를 아주 쉽게 처리할 수 있다.

jquery 학습 방법

자바스크립트의 경우 기본 문법을 모를 경우 공부하기가 힘들다.

그러나 jQuery의 경우 수많은 메서드로 구성되어 있기에 순서없이 메서드를 하나씩 학습하면 된다. 굳이 공부하는 순서를 따져야 한다면, jQuery는 css와 연관성이 많기에 css를 기본적으로 이해해야 하며, 노드를 찾아가는 방법(체인기능) 메서드부터 진행하면 된다.

jquery 노드 메서드

분류 핵심 내용 핵심 프로퍼티 및 메서드
일반 노드
찾기		 아이디 이름으로 노드 찾기 $("#아이디")
태그 이름으로 노드 찾기 $("태그")
클래스 이름으로 노드 찾기 $(".클래스")
속성으로 노드 찾기 $("[속성이름=값]")
찾은 노드
다루기		 찾은 개수 구하기 $("선택자").length
n번째 노드 접근하기 $("선택자").eq(main)
자바스크립트 DOM 객체 접근하기 $("선택자").get(main)
$("선택자")[main]
순차적으로 노드 접근하기 $("선택자").each(function(main){ $(this) 또는 $("선택자").eq(main); });
찾은 노드 중에서 특정 노드만 찾기 $("선택자").filter("선택자")
찾은 노드의 자손 노드 중 특정 노드만 찾기 $("선택자").find("선택자")

인덱스 값 구하기

 $("선택자").main()
$목록.main($("선택자"))
$목록.main(선택자 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)+")")
n번째 자식 노드 찾기 $("선택자").children().eq(main)
$("선택자").children(":eq("+main+")")
부모 노드
찾기		 부모 노드 찾기 $("선택자").parent()
조상 노드 찾기 $("선택자").parents(["선택자"])
형제 노드
찾기		 이전 형제 노드 찾기 $("선택자").prev()
$("선택자").prevAll(["선택자"])
다음 형제 노드 찾기 $("선택자").next()
$("선택자").nextAll(["선택자"])
노드 생성/
추가		 노드 생성 $("추가노드 DOM 문자열")
첫 번째 자식 노드로 추가 $부모노드.prepend($추가노드)
$추가노드.prependTo($부모노드)
마지막 번째 자식 노드로 추가 $부모노드.append($추가노드)
$추가노드.appendTo($부모노드)
특정 노드의 이전 위치에 추가 $기준노드.before($추가노드)
$추가노드.insertBefore($기준노드)
특정 노드의 다음 위치에 추가 $기준노드.after($추가노드)
$추가노드.insertAfter($기준노드)
노드제거 특정 노드 제거 $("선택자").remove()
모든 자식 노드 제거 $("선택자").children().remove()
노드 내용
읽기 및 변경		 노드 내용을 문자열로 읽기 $("선택자").html() //태그 내용 포함
$("선택자").text() //태그 내용 제외
노드 내용 수정하기 $("선택자").html("수정할 태그 문자열")
$("선택자").text("수정할 텍스")
노드 내용을 이용해 여러 개의 자식 노드 추가하 $("선택자").html("추가할 태그 문자열")
노드 내용을 이용해 모든 자식 노드 제거하기 $("선택자").html("")

jquery 스타일 메서드

분류 핵심 내용 핵심 프로퍼티 및 메서드
스타일
다루기		 스타일 값 구하기 $("선택자").css("스타일 속성 이름")
$("선택자").css(["스타일 속성 이름", ...])
스타일 값 설정하기 $("선택자").css("스타일 속성 이름",값)
$("선택자").css({스타일 속성 이름:값, ...})
클래스 추가 $("선택자").addClass("클래스 이름")
클래스 삭제 $("선택자").removeClass("클래스 이름")

jquery 속성 메서드

분류 핵심 내용 핵심 프로퍼티 및 메서드
속성
다루기		 속성값 구하기 $("선택자").attr("속성이름")
$("선택자").data("data-속성이름")
속성값 설정하기 $("선택자").attr("속성이름","값")
$("선택자").data("data-속성이름","값")

jquery 이벤트 메서드

분류 핵심 내용 핵심 프로퍼티 및 메서드
이벤트
다루기		 일반 이벤트 등록 $("선택자").on("이벤트 이름", 이벤트리스너)
단축 이벤트 등록 $("선택자").단축 이벤트(이벤트리스너)
등록한 이벤트 제거 $("선택자").off("click", 삭제하고 싶은 이벤트 리스너 명)
$("선택자").off("click")
$("선택자").off()
이벤트 한 번만 실행 $("선택자").one("이벤트 이름", 이벤트리스너)
기본 행동 취소 이벤트 객체.preventDefault()
버블링 멈추기 이벤트 객체.stopPropagation()
버블링 활용:하나의 이벤트 $("선택자").on("이벤트 이름", "선택자", 이벤트 리스너)

jquery 위치 및 크기 메서드

분류 핵심 내용 핵심 프로퍼티 및 메서드
요소의 위치 및
크기 관련 기능		 부모 좌표 노드 구하기 $("선택자").offsetParent()
지역 좌표 위치 다루기 지역 좌표 위치 구하기
$("선택자").position().left
$("선택자").position().top

지역 좌표 위치 설정하기
$("선택자").css("left",위치값)
$("선택자").css("top",위치값)
또는
$("선택자").css({left:위치값,top:위치값})
전역 좌표 위치 다루기 전역 좌표 위치 구하기
$("선택자").offset().left
$("선택자").offset().top

전역 표표위치 설정하기
$("선택자").offset({left:위치값,top:위치값})
요소 크기 다루기 기본 크기 구하기
$("선택자").width()
$("선택자").height()

기본 크기+padding 크기 구하기
$("선택자").innerWidth()
$("선택자").innerHeight()

기본 크기+padding+border 크기 구하기
$("선택자").outerWidth()
$("선택자").outerHeight()

기본 크기+padding+border+margin 크기 구하기
$("선택자").outerWidth(true)
$("선택자").outerHeight(true)

기본 크기 설정하기
$("선택자").width(크기값)
$("선택자").height(크기값)

기본 크기+padding 크기 설정하기
$("선택자").innerWidth(크기값)
$("선택자").innerHeight(크기값)
요소의 위치 및
크기 관련 기능		 요소의 스크롤 위치 다루기 스크롤 위치 구하기
$("선택자").scrollLeft()
$("선택자").scrollTop()

스크롤 위치 설정하기
$("선택자").scrollLeft(위치값)
$("선택자").scrollTop(위치값)
문서의 위치 및
크기 관련 기능		 문서 크기 구하기 $(document).width()
$(document).height()
화면의 위치 및
크기 관련 기능
윈도우의 위치
및 크기 관련
기능		 전체 화면 크기 구하기 screen.width
screen.height
유효한 전체 화면 크기 구하기 screen.availWidth
screnn.availHeight
윈도우 크기 구하기 기본 크기 구하기
window.innerWidth
window.innerHeight

기본 크기+메뉴바+툴바 영역이 포함된 크기 구하기
$(window).width()
$(window).height()

기본 크기+메뉴바+툴바+스크롤바 영역이 포함된 크기 구하기
window.outerWidth
window.outerHeight
윈도우 크기 설정하기 window.resizeTo(width,height)
윈도우 변경 이벤트 처리 $(window).on("resize", function(){})
윈도우 위치 다루기 위치 값 구하기
window.screenLeft
window.screenTop

위치 값 설정하기
window.moveTo(dx,dy)
window.moveBy(dx,dy)
윈도우 스크롤 다루기 스크롤 위치 값 구하기
window.pageXOffset
window.pageYOffset

스크롤 위치 설정하기
window.scrollTo(x,y)
window.scrollBy(x,y)

스크롤 이벤트 처리하기
$(window).on("scroll",function(){})
마우스의
위치 및 크기
관련 기능		 클릭한 전역 위치 윈도우 영역을 기준으로 하는 전역 위치
mouseEvent.clientX
mouseEvent.clientY

문서 영역을 기준으로 하는 전역 위치
mouseEvent.pageX
mouseEvent.pageX
클릭한 지역 위치 var offsetX = mouseEvent.pageX - $(타깃).offset().left
var offsetY = mouseEvent.pageY - $(타깃).offset().top

jquery 애니메이션 메서드

분류 핵심 내용 핵심 프로퍼티 및 메서드
일반
효과
다루기		 나타나고 사라지는 효과 나타나기
$("선택자").show()

사라지기
$("선택자").hide()
페이드 인/아웃 효과 페이드 인
$("선택자").fadeIn()

페이드 아웃
$("선택자").fadeOut()
슬라이드 업/다운 효과 슬라이드 업
$("선택자").slideUp()

슬라이드 다운
$("선택자").slideDown()
사용자
정의
효과
다루기		 사용자 정의 애니메이션 효과 만들기 $("선택자").animate({스타일 속성 이름:속성값, ...},애니메이션 시간)
애니메이션 효과 멈추기 $("선택자").stop()

jquery 사용법

html파일 
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<link rel="stylesheet" type="text/css" href="css파일경로" />
	<script src="js를작동시키는파일"></script>
	<script src="js파일"></script>
	<title>제목</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<link rel="stylesheet" type="text/css" href="css파일경로" /> 
	/* css를 먼저 호출해야함. */
	<script src="js를작동시키는파일"></script>
	/* jquery-1.12.4.min.js 같이 jquery를 작동시키기 위한 파일을 반드시 연결해야함 */
	<script src="js파일"></script> /* 작성한 js 파일 불러오기 */
	<title>제목</title>
</head>
<body>
</body>
</html>
js파일 
$(document).ready(function(){
	
});
$(document).ready(function(){ /* jquery를 문서를 모두 준비가 되면 실행함. */
	/*실행문*/
});

jquery 선택자

$("선택자")

jquery 이벤트 주기

	$("선택자").on("이벤트핸들러", function(){
		
	});

이벤트핸들러는 두개이상 쓸 수 있다. 이 경우 두 이벤트핸들러 사이에 반드시 여백을 줘야함.$("선택자").on("mouseenter focusin", function(){ });

jquery 명령어 응용

	$("선택자").on("이벤트핸들러", function(){
		$("선택자").addClass("class명");		/*요소에 클래스 추가하기 <태그 class="class명">*/ 이런식으로 실제 추가됨
		$("선택자").removeClass("class명");		/*클래스 삭제하기*/
		$("선택자").show();		/*보이게 하기*/
		$("선택자").hide();		/*숨기기*/
		$("선택자").fadeIn();		/*부드럽게 나타나기*/
		$("선택자").fadeOut();		/*부드럽게 사라지기*/
		$("선택자").slideDown();		/*위에서 아래로 슬라이드 되어 나타나기*/
		$("선택자").slideUp();		/*아래에서 위로 슬라이드 되어 사라지기*/
	});

jqeury 실행시기

문서가 준비되면 1번 실행 (html문서만 로딩되면 실행)
$(document).ready(function(){실행문});
문서에 있는 이미지 파일까지 모두 로딩 한 후에 실행 (만약 요소의 height값을 구해야 하는 jquery가 있다면 필요)
$(window).load(function(){실행문});
스크롤이 될때마다 1번씩 실행
$(window).scroll(function(){실행문});
브라우저가 리사이즈 될때마다 1번씩 실행
$(window).resize(function(){실행문});

jquery 다운받기

스크롤 금지 예제

$("html, body").css({overflow : "hidden", height : $(window).height()}).bind("scroll touchmove mousewheel", function(e){e.preventDefault();e.stopPropagation();return false;},function(){passive:false});

스크롤 해제 예제

$("html, body").css({overflow : "visible", height : "auto"}).unbind('scroll touchmove mousewheel');