heenam
jQUERY 본문
jQuery
jQuery는 일종의 자바스크립트 라이브러리이다. jQuery를 사용하면 자바스크립트 프로그래밍의 양을 상당히 줄일
수 있다. 그리고 무엇보다도 jQuery는 배우기 쉽다. 게다가 무료이다. 설치 과정도 필요 없이 그냥 한 줄만 소스에
추가하면 된다.
똑같은 동작을 하는 자바스크립트 코드와 jQuery 코드를 서로 비교해 보자.
| 자바스크립트 | jQUREY |
| document.getElementsById("myPara").innerHTML = "안녕하세요?" | $("#myPara").html("안녕하세요") |
jQuery는 CSS의 선택자 문법을 사용하여 특정한 요소를 선택한다.
jQuery는 웹 페이지에서 자바스크립트를 사용하는 것을 쉽게 하기 위하여 만들어 졌다. jQuery를사용하면 자바스크립
트의 여러 줄을 한 줄로 줄일 수 있다. 또 jQuery는 Ajax 호출이 DOM 조작도 훨씬 간단하게 할 수 있다. jQuery로 쉽게
할 수 있는 작업을 나열해 조면 다음과 같다.
+ HTML 문서에서 특정 요소를 쉽게 찾을 수 있다.
+ HTML 콘텐츠를 쉽게 변경할 수 있다.
+ 이벤트를 쉽게 처리할 수 있다.
+ 페이지 상의 콘텐츠를 쉽게 애니메이트할 수 있다.
+ 네트워크를 통하여 새로운 콘텐츠를 쉽게 가져올 수 있다. (Ajax, JSON)
+ 브라우저의 종류나 브라우저의 버전을 따질 필요가 없다. 모든 차이점은 jQuery 안에서 해결한다.
jQuery를 사용하면 웹 페이지의 내용이나 스타일을 동적으로 쉽게 바꿀 수 있다. 하지만 물론 HTML 문서와 CSS 파일
을 변경하는 것이 아니라 브라우저 메모리에 저장된 웹 페이지의 DOM(문저 객체 모델)을 변경한다.
jQuery를 웹 페이지에서 사용하기
jQuery를 웹 사이트에서 사용하려면 다음과 같은 2가지의 방법이 있다.
+ jQuery.com 에서 jQuery파일을 다운로드하는 방법
+ 실행 시마다 구글이나 마이크로소프트에서 jQuery 파일을 포함하는 방법
jQuery 다운로드
jQuery는 hhttp://www.jquery.com에서 다운로드받을 수 있다.
우리는 1.9버전을 다운로드하도록 하자.
1.9버전에도 두가지가 있다
+ production 버전 - 소스를 압축해서 웹 서버에서 보다 빠르게 실행되도록 최소화한 버전이다.
+ development 버전 - 테스트와 디버깅을 위한 버전으로 압축되어 있지 않아서 개발자가 소스를 읽기 쉽다.
우리는 production 버전을 다운로드 받아서 적절한 폴더 안에 저장한다. development 버전은 jQuery 소스를 확장
하여 사용하고자 하는 개발자에게 알맞다.
jQuery 라이브러리는 하나의 자바스크립트 파일로서 이것을 HTML 페이지 안에서 사용하려면 <script> 태그 안에서
지역 파일로 참조하면 된다.
<head>
<script src="jquery-1.9.1.min.js"></script>
</head>이때, 웹 페이지와 동일할 디렉토리에 다운로드된 jQuery파일을 저장하면 된다.
다운로드하지 않고 jQuery를 사용하는 방법
jQuery는 많은 CDN을 가지고 있다. 구글, 마이크로소프트 등이 CDN을 제공한다. 만약 구글 서버를 사용한다면 다음과
같은 코드를 추가하면 된다.
<head>
<script src="http://code.jquery-1.10.1.min.js> </script>
</head>첫 번째 jQuery 프로그램
Visual studio for Web을 실행해서 다음과 같은 HTML 페이지를 작성한다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("h2").click(function() {
$(this).hide();
});
});
</script>
</head>
<body>
<h2>클릭하면 사라집니다.</h2>
</body>
</html>
첫번째 스크립트는 jQuery파일을 네트워크를 통하여 다운로드 받는다.
두전째 스크립트가 jQuery 코드이다. 문서가 준비되면 <h2>요소를 찾아서 <h2>요소가 클릭되면 그 요소를 화면에서
감춘다.
jQuery 문장의 구조
jQuery문장을 살펴보면 $("p")와 같이 $기호가 많이 등장한다. $기호는 jQuery라는 의미이다. $(...)안에 선택자를 넣어
서 원하는 요소를 선택하고, 선택된 요소에 대하여 여러 가지 조작을 하는 구조로 되어 있다.
$ (selector).action();$: jQuery라는 의미이다. $대신 jQuery라고 적어도 된다.
selector: 특정한 HTML 요소를 선택한다.
$와 selector: 선택자에 의하여 선택된 요소
action(): 선택된 요소에 어떤 동작이 수행된다.
jQuery문장의 의미는 HTML 요소를 선택하여, 선택된 요소에 어떤 동작을 시키는 것이다.
선택자
jQuery에서 선택자는 아주 중요하다. 선택자는 HTML요소를 선택할 때, 사용된다. jQuery에서는 선택자로 CSS표기법을
사용한다. CSS 선택자 형식 중에서 많이 사용되는 것은 다음과 같이 3가지이다.
타입선택자
요소의 이름을 적어서 요소를 선택한다.
<body>
<p>이것은 문단입니다.</p> <---- $("p").hide();
<p>이것은 문답입니다.</P> <--┘
</body>
.class 선택자
요소를 정의할 때 요소에 클래스 이름을 줄 수 있다. .class와 같은 형식으로 특정한 클래스 이름을 가지는 요소를 선택
할 수 있다.
<body>
<h1>제목</h1>
<p class="menu">1. 구입</p> <---$(".menu").slideup();
<p>2. 결제</p>
</body>#id 선택자
요소를 정의할 떄 요소에 id속성을 부여할 수 있다. #id와 같은 형식으로 특정한 아이디를 찾는 요소를 선택할 수 있다.
<body>
<h1>제목</h1>
<p>문단입니다.</p>
<p id="check">문단입니다.</p> <--- $("#check").show();
</body>일반적인 jQuery 구조
많은 jQuery 소스가 다음과 같은 구조 안에 기술된다. 이 구조는 무엇을 의미할까?
$(document).ready(function() {
// DOM이 로딩되어서 준비가 되면 작업을 시작한다.
// 구체적으로 jQuery 메서드를 호출한다.
}위의 구조를 사용하는 이유는 문서가 완전히 로드되기 전에 jQuery코드가 실행하는 것을 방지하기 위해서이다.
우리는 항상 문서가 완전하게 준비되었을 때, jQuery작업을 시작해야 한다. 완전히 로드되지 않은 상태에서 jQuery메서
드가 실행되면 오류가 발생한다.
jQuery를 이용한 이벤트처리
jQuery를 사용하면 이벤트 처리를 쉽게 할 수 있다. 이벤트는 사용자의 동작에 의하여 발생한다.
이벤트의 종류
jQuery로 처리할 수 있는 이벤트는 아주 많다. 따라서 완전한 리스크는 jQuery의 레퍼런스 문서를 보아야 한다.
jQuery 이벤트 메서드의 구문
HTML의 대부분 이벤트를 jQuery는 처리할 수 있다.
$("#button1").click( function() {
$("#box").show();
});$("#button1"): id가 button1인 요소에
click: 클릭 이벤트가 발생하면
$("#box").show();: id가 "box"인 요소를 찾아서 화면에 표시한다.
이벤트 등록 방법
이벤트 처리 함수를 요소에 등록할 때는 다음과 같이 2가지 방법이 가능하다.
$("#div1").bind('click', function()
{
...
});↑이것이 정식 방법이지만
$("div1").click(function()
{
...
});↑ 99% 개발자는 이런식으로 단축 메서드 방법을 쓴다.
단축 메서드 방법은 이미 DOM 트리 안에 요소가 생성되어 있을 때만 가능하다. 동적으로 추가된 요소에서는 정식
방법을 사용해야 한다.
마우스 이벤트
<script>
var i = 0;
$("div.out").mouseover(function() { <-- out 클레스의 <div>에서 mouseover 이벤트가 발생하면
$("p:first", this).text("mouse over");<--첫 번째 <p>요소의 내용을 "mouse over"로 변경한다.
$("p:last", this).text(++i); <-- 마지막 <p>요소에 증가된 변수 i의 값을 출력한다.
});
</script>focus와 blur 이벤트
focus 이벤트는 입력 필드가 키보드 포커스를 얻으면 발생한다. 반대로 입력 필드가 키보드 포커스를 잃으면 blur 이벤
트가 발생한다.
<script>
$(document).ready(function() {
$("input").focus(function() { <-- 포서스를 얻으면
$(this).css("background-color","yellow"); <-- 배경색을 노란색으로 변경한다.
});
$("input").blur(function() { <-- 포커스를 잃으면
$(this).css("background-color","white"); <-- 배경색을 흰색으로 변경한다.
});
});
</script>이벤트 처리기 함수 안에서 사용 가능한 정보
모든 이벤트 처리 함수는 이벤트 객체를 전달받는다. 이벤트 객체는 많은 속성과 메서드를 가지고 있는데 그 중에서 유
용한 것은 다음과 같다.
+ pageX, pageY - 이벤트가 발생했을 당시의 바우스 위치
+ type - 이벤트의 종류(예를 들어"click")
+ which - 눌려진 마우스 버튼이나 키
<div id="log"></div>
<script>
$(document).mousemove(function(e) { <-- 매개변수 e를 추가할 수 있다. e는 이벤트 객체이다.
$("#log").text("e.pageX:" + e.pageX + ", e.pageY:" + e.pageY);
==> e안에는 마우스의 위치와 같은 정보가 들어 있다.
});
</script>jQuery를 이용한 애니메이션 효과
jQuery는 웹 페이지에 애니메이션을 추가하는 여러 가지 함수를 제공한다.
show()와 hide()
가장 기본적인 함수이다. show()는 선택된 요소를 화면에 표시하는 것이도 hide()는 선택된 요소를 화면에서 감춘다.
$(selector).show(duration, complete);selector: 선택자
show(): 요소를 표시한다.
duration: "slow", "fast", 또는 밀리초 단위로 지정할 수 있다.
complete: 콜백함수로서 show() 메서드가 완료된 후에 호출되는 메서드를 지정한다.
<button>show it</button>
<img id="dog" src="dog.jpg"
alt="" width="300" height="400" style="display:none"> <-- 처음에는 이미지를 감춘다.
<script>
$(document).ready(function() {
$("button").click(function() {
$("#dog").show("slow"); <-- 버튼이 클릭되면 이미지를 느리게 나타낸다.
});
});
</script>toggle()
toggle()도 가장 기본적인 효과 중의 하나이다. toggle()은 요소가 감추어져 있으면 표시하고, 표시되어 있으면 감춘다.
위의 코드를 다음과 같이 수정하면 이미지가 나타났다 사라지기를 반복한다.
<button>show it</button>
<img id="dog" src="dog.jpg"
alt="" width="300" height="400" style="display:none">
<script>
$(document).ready(function() {
$("button").click(function() {
$("#dog").toggle(); <-- 변경된 부분
});
});
</script>animate()
animate()는 가장 일반적인 애니메이션을 작성할 때 사용하는 함수이다. 어디로나 이동이 가능하고 어떤 효과도 가능하
다. CSS속성을 변경해서 애니메이션을 만든다.
$(selector).animate(propertise, duration, easing, complete)$(selector): 선택자
animate: 요소를 애니메이트 한다.
propertise: 애니메이트될 CSS속성, 목표값을 여기에 적는다. 안에 CSS형식으로 원하는 속성을 넣으면 된다.
<script>
$(document).ready(function() {
$("button").click(function() {
$("#dog").animate({left:'100px'}); <-- left 속성을 100px로 만든다.
});
});
</script>
<body>
<img id="dog" src="dog.jpg"
alt="" width="300" height="400" style="position: relative"><br> <-- position이 static이면 이동되지 않는다.
<button>animate()</button>
</body>properties에는 위치뿐만 아니라 여러 가지 다른 속성들도 지정할 수 있다.
stop()
모든 애니메이션을 중간에 중단하려면 stop() 메서드를 사용한다.
fadeIn()/ fadeOut()
요소를 표시할 때, 영화처럼 천천히 등장하게 하거나 빠르게 등장하게 할 수 있다.
$(selector).fadeIn(duration, complete);$(selector): 선택자
fadeIn: 요소를 페이드인한다.
duration: "slow", "fast" 또는 밀리초 단위로 지정할 수 있다.
complete: 매개변수는 fadeIn() 메서드가 완료된 후에 호출되는 메서드를 지정한다.
<script>
$(document).ready(function() {
$("#fadeIn").click(function() {
$("#dog").fadeIn("slow"); <-- 클릭되면 사진을 페이드인한다.
});
$("#fadeOut").click(function() {
$("#dog").fadeOut("slow"); <-- 클릭되면 사진을 페이드아웃한다.
});
});
</script>
<body>
<button id="fadeIn">fadeIn()</button>
<button id="fadeOut">fadeOut()</button>
<img id="dog" src="dog.jpg"
alt="" width="300" height="400" style="display:none; position: relative;"><br>
</body>slideUp(), slideDown()
slideUp(), slideDown()은 요소를 밀어올리거나 밀어내린다.
$(selector).slideUp(duration, complete);$(selector): 선택자
slideUp: 요소를 밀어올린다.
duration: "slow", "fast" 또는 밀리초 단위로 지정할 수 있다.
complete: 매개변수는 slideUp() 메서드가 완료된 후에 호출되는 메서드를 지정한다.
앞의 소스를 다음과 같이 변경한다.
<script>
$(document).ready(function() {
$("#slideDown").click(function() {
$("#dog").slideDown("slow"); <-- 클릭되면 사진을 슬라이드다운한다.
});
$("#slideUp").click(function() {
$("#dog").slideUp("slow"); <-- 클릭되면 사진을 슬라이드업한다.
});
});
</script>
<body>
<button id="slideDown">slideDown()</button>
<button id="slideUp">slideUp()</button>
<img id="dog" src="dog.jpg"
alt="" width="300" height="400" style="display:none; position: relative;"><br>
</body>메서드 체이닝
jQuery에서는 동일한 요소에 대한 여러 개의 메서드를 하나로 연결해서 실행할 수 있다. 이것을 메서드 체이닝 이라고
한다.
아래의 예제에서는 "#dog" 요소에 대한 show(), fadeOut(), slideDown() 메서드를 연결해서 호출하고 있다.
"#dog" 요소는 화면에 나타나고 이어서 페이드아웃, 슬라이드다운된다.
<script>
$(document).ready(function() {
$("button").click(function() {
$("#dog").show().fadeOut("slow").slideDown("slow");
=> 페이드아웃한 후에 슬라이드다운한다.
});
});
</script>
<body>
<button>메소드 체이닝 시작</button>
<img id="dog" src="dog.jpg"
alt="" width="300" height="400" style="display:none; position: relative;"><br>
</body>jQuery를 이용한 DOM변경
jQuery에서는 DOM 트리에 접근해서 노드의 내용을 가져온다거나 내용을 변경할 수 있고 동적으로 노드를 추가하거나
삭제할 수도 있다. 우리가 앞에서 자바스크립트로 하였던 작업을 더 쉽게 할 수 있다.
jQuery를 이용해 할 수 있는 작업을 나열해 보면 다음과 같다.
+ 요소의 내용을 가져오거나 변경할 수 있다. - text(), html()
+ 요소의 속성을 가져오거나 변경할 수 있다. - attr()
+ 요소의 스타일 속성을 가져오거나 변경할 수 있다. - css()
+ 요소를 추가하거나 삭제할 수 있다. - append(), remove()
요소의 콘텐츠 가져오기
jQuery에서 특정 요소의 내용을 얻으려면 다음과 같은 메서드를 사용한다.
$("#target").text();$("target"): 요소를 선택하는 선택자
text(): id가 "target"인 요소의 텍스트를 가져온다.
text()와 html()은 모두 선택된 요소의 콘텐츠를 가져오는 메서드이다. 차이점은 html()은 콘텐츠 안에 포함된 HTML 태
그들도 함께 반환한다는 점이다. text()는 단순히 텍스트만을 반환한다.
<script>
$(document).ready(function() {
$("#text").click(function() {
alert($("#target").text());
}); <-- 눌러지면 id가 target인 요소의 텍스트를 표시한다.
$("#html").click(function() {
alert($("#target").html());
}); <-- 눌러지면 id가 target인 요소의 HTML태그를 표시한다.
});
</script>요소의 콘텐츠 변경하기
만약 반대로 요소의 콘텐츠를 변경하고 싶으면 우너하는 콘텐츠를 인수로 전달하면 된다.
$("target").text("안녕하세요?");$("target"): id가 "target"인 요소를 선택한다.
text("안녕하세요?");: 선택된 요소의 콘텐츠를 변경한다.
이때도 텍스트만 설정하고 싶으면 text() 메서드를 사용하고 HTML태그가 들어있는 문장으로 설정할 때는 html() 메서
드를 사용하면 된다.
<script>
$(document).ready(function() {
$("#text").click(function() {
$("#target").text("안녕하세요?");
});
$("#html").click(function() {
$("#target").html("<b>안녕하세요?</b>");
});
});
</script>입력 필드의 값 읽어오기
입력 양식 안에 포함된 입력 요소의 값을 읽어올때는 val() 함수를 사용한다. 사용자가 입력 필드에 입력한 값을 읽어올
때, 사용하면 좋다.
<script>
$(document).ready(function() {
$("button").click(function() {
alert( $("#target").val());
});
});
</script>요소의 속성 가져오기
attr() 메서드는 선택된 요소의 속성 값을 가져온다. attr() 인수로 값을 알고 싶은 속성 이름을 적어준다.
$(selector).attr(attributeName);attributeName: 값을 알고 싶은 속성의 이름
<script>
$(document).ready(function() {
$("button").click(function() {
alert( $("#dog").attr("src"));
});
});
</script>DOM에 요소 추가하기
jQuery를 사용하면 DOM 트리의 기존 요소 아래에 새로운 콘텐츠를 추가 할 수 있다. 즉 HTML에 새로운 콘텐츠를
추가할 수 있는 것이다. 가장 대표적인 메서드가 append()이다.
$("#target").append("<p>Test</p>");$("#target"): id가 "target"인 요소를 선택한다.
append("<p>Test</p>"): <p> 요소에 id="target"인 끝에 삽입한다.
jQuery에서 새로운 콘텐츠를 추가할 때 사용되는 4개의 메서드가 있다.
+ append() - 선택된 요소의 끝에 새로운 콘텐츠를 추가한다.
+ prepend() - 선택된 요소의 처음에 새로운 콘텐츠를 추가한다.
+ after() - 선택된 요소의 뒤에 콘텐츠를 삽입한다.
+ before() - 선택된 요소의 앞에 콘텐츠를 삽입한다.
<script>
$(document).ready(function() {
$("#button1").click(function() {
$("p").append("<b style='color:red'>Hello!</b>");
});
$("#button2").click(function() {
$("p").prepend("<b style='color:red'>Hello!</b>");
});
});
</script>콘텐츠 삭제하기
jQuery를 사용하면 특정 요소를 DOM에서 삭제할 수 있다. 요소를 삭제하려면 다음과 같은 2개의 메서드를 사용한다.
+ remove() - 선택된 요소와 그 자식 요소를 삭제한다.
+ empty() - 선택된 요소의 자식 요소를 삭제한다.
<script>
$(document).ready(function() {
$("#button1").click(function() {
$(".container").remove();
});
$("#button2").click(function() {
$(".container").empty();
});
});
</script>remove()와 empty()의 차이점은 remove()는 선택된 요소와 함께 자식 요소들도 전부 삭제된다. empty()는 선택된
요소는 그대로 두고 자식 요소들만 삭제된다.
jQuery를 이용한 CSS조작
jQuery를 이용하면 선택된 요소의 CSS 스타일도 마음대로 설정하거나 가져올 수 있다.
CSS()
선택된 요소의 CSS속성을 가져오려면 다음과 같은 문장 형식을 사용한다.
$("target").css("color");$("target"): id가 "target"인 요소를 선택한다.
css("color");: 선택된 요소의 color속성을 가져온다.
반대로 선택된 요소에 어떤 CSS속성을 지정하려면 다음과 같은 문장을 사용한다.
$("target").css("color", "blue");$("target"): id가 "target"인 요소를 선택한다.
css("color");: 선택된 요소의 color속성을 "blue"로 지정한다.
<script>
$(document).ready(function() {
$("#button1").click(function() {
var color = $("#div1").css("background-color");
$("#result").text("background-color:" + color);
});
$("#button2").click(function() {
$("#div1").css("background-color", "red");
});
});
</script>addClass(), removeClass()
addClass()는 선택된 요소에 CSS클래스를 적용하는 것이다. 따라서 기존 요소의 스타일을 어떤 클래스 스타일로 순식
간에 변경할 수 있다. 물론 클래스는 CSS에서 미리 정의되어 있어야 한다.
removeClass()는 선택된 요소로부터 CSS클래스를 삭제하는 것이다.
<script>
$(document).ready(function() {
$("button").click(function() {
$("#div1").addClass("warning"); <-- #div1속성에 "warning" 클래스 속성을 추가한다.
});
});
</script>
<style>
.warning {
border: 1px solid black;
background-color: yellow
}
</style>요소의 크기 알기
jQuery를 사용하면 아주 쉽게 요소의 크기를 알 수 있다. 가장 기본적인 메서드는 width()와 height()이다.
width() 메서드는 요소의 가로 크기를 반환한다. 여기에는 패딩, 경계, 만진은 들어가지 않는다.
height() 메서드는 요소의 세로 크기를 반환한다.
$(document).ready(function() {
$("button").click(function() {
alert($("#div1").width()); // 가로 크기
alert($("#div1").height()); // 세로 크기
});
});우리는 브라우저의 폭이나 HTML 문서 전체의 폭도 알 수 있다.
$(window).width(); // 브라우저 뷰포트의 폭
$(document).width(); // HTML 문서의 폭
'Wep Programming > 기타' 카테고리의 다른 글
| JSON (0) | 2020.07.23 |
|---|---|
| Ajax (0) | 2020.07.22 |