Theme. 제이쿼리(jQuery)란?
제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리이다.
제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있다.
또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있다.
Theme. jQuery의 적용
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- jQuery 적용 3가지 방법 -->
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-->
<!-- <script type="text/javascript" src="./jquery.min.js"></script> -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
</body>
</html>
|
cs |
위와 같이 <head> 태그 내에 <script> 태그를 삽입하면 된다. 아래 파일을 저장해서 사용해서 쓸 수 있고,
https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js
https://code.jquery.com/jquery-3.6.3.min.js
를 src의 값으로 지정하여 사용할 수 있다.
Theme. jQuery 문법
간단하게 나타내면, $(선택자).동작함수(); 로 표현할 수 있다.여기서 $는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자이다.위 기본 문법을 다시 적어보면,
$(태그 또는 id 또는 class 또는 name).이벤트함수(매개변수);
로 표현할 수 있다.
$() 함수를 통해 생성된 요소는 제이쿼리 객체(jQuery object)라고 한다.
Theme. Document 객체의 ready() 메서드
먼저 문법을 살펴보면,
|
1
2
3
4
5
|
$(document).ready(function() {
제이쿼리 코드;
});
|
cs |
로 표현할 수 있다. 이는 jQuery 코드가 웹 브라우저가 문서 내 모든 요소를 로드한 뒤에 실행될 수 있도록 한다.
이는,
|
1
2
3
4
5
|
$(function() {
제이쿼리 코드;
});
|
cs |
위와 같이 표현할 수 있다.
Theme. getter 와 setter 메서드
선택자에 의해 선택된 요소의 값을 읽거나 설정하기 위해서는 제이쿼리 메소드를 통해 해당 요소에 접근해야만 한다.
getter 메소드는 선택된 요소에 접근하여 그 값을 읽어오기 위한 메소드이다.
이러한 getter 메소드는 아무런 인수를 전달하지 않고 호출한다.
예를 들면, $("h1").html();
setter 메소드는 선택된 요소에 접근하여 그 값을 설정하기 위한 메소드이다.
이러한 setter 메소드는 대입하고자 하는 값을 인수로 전달하여 호출한다.
예를 들면, $("h1").html("새로운 값");
예제를 통해 효과를 확인해보자
기본 모습은 다음과 같다.
|
1
2
3
4
5
6
7
8
9
|
<body>
<p>서울 일반고 입시 절대평가로…석차백분율제 폐지</p>
<p id="demo">A∼E 학점 각각 환산하지 않고 최하위등급 과목수만 평가</p>
<p class="cls">서울 일반계 고등학교의 입시 전형에 남아있던 상대평가 환산 방법이 절대평가로 바뀔 예정이다.</p>
<h3 class="cls">새 전형 방식은 올해 3월 중학교 2학년이 되는 학생들부터 적용된다.</h3>
|
cs |
이제 getter와 setter를 적용해보자.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- jQuery 적용 3가지 방법 -->
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-->
<!-- <script type="text/javascript" src="./jquery.min.js"></script> -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
<p>서울 일반고 입시 절대평가로…석차백분율제 폐지</p>
<p id="demo">A∼E 학점 각각 환산하지 않고 최하위등급 과목수만 평가</p>
<p class="cls">서울 일반계 고등학교의 입시 전형에 남아있던 상대평가 환산 방법이 절대평가로 바뀔 예정이다.</p>
<h3 class="cls">새 전형 방식은 올해 3월 중학교 2학년이 되는 학생들부터 적용된다.</h3>
<script>
$(document).ready(function () {
// setter
$("p").html("새로운 문자열"); // JS의 innerHTML과 같은 효과
});
</script>
</body>
</html>
|
cs |
이는, <p> 요소에 html() 메서드를 "새로운 문자열"이라는 텍스트를 설정하는 setter 메서드이다.
마치, document.getElementById("p").innerHTML = "새로운 문자열"; 과 같다.
(또는, HTML로 해석될 텍스트가 존재하지 않으므로 document.getElementById("p").innerText = "새로운 문자열"; 으로 작성해도 된다.)
추가로, 아래와 같이 설정하는 텍스트를 HTML태그로 감싸서 효과를 줄 수도 있다.
|
1
2
3
4
5
6
7
8
9
10
|
<script>
$(document).ready(function () {
// setter
$("p").html("<strong>새로운 문자열</strong>");
});
</script>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
|
<script>
$(document).ready(function () {
// setter
let arrPtag = document.getElementsByTagName("p");
for (i = 0; i < arrPtag.length; i++) {
arrPtag[i].innerHTML = "<strong>새로운 문자열</strong>"
}
});
</script>
|
cs |
jQuery를 사용하지 않으면, 동일한 효과를 주기위해 위와 같이 코드가 좀 더 길어짐을 알 수 있다.
즉, jQuery가 JavaScript의 경량화, 간략화의 기능을 하고 있다.
getter의 경우, 아래와 같이 인수를 전달하지 않고 호출한다. html() 부분!
|
1
2
3
4
5
6
7
8
9
10
|
<script>
$(document).ready(function () {
// getter
// id 선택자를 이용
let txt = $("#demo").html();
alert(txt);
});
</script>
|
cs |
이 또한, jQuery를 사용하지 않으면, 아래와 같이 작성할 수 있다.
|
1
2
3
4
5
6
7
8
9
|
<script>
$(document).ready(function () {
// getter
let txt = document.getElementById("demo").innerHTML;
alert(txt);
});
</script>
|
cs |
Theme. 이벤트 처리
사용자는 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작(action)을 수행하는데, 이러한 동작들은 모두 이벤트(event)를 발생시킨다.
웹 페이지에서는 수많은 이벤트가 계속해서 발생한다.
특정 요소에서 발생하는 이벤트를 처리하기 위해서 이벤트 핸들러(event handler)라는 함수를 작성한다.
이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행하게 된다.
이벤트 핸들러 함수는 이벤트 객체(event object)를 인수로 전달받을 수 있고,
이렇게 전달받은 이벤트 객체를 이용하여 이벤트의 성질을 결정하거나, 이벤트의 기본 동작을 막을 수도 있다.
예제를 통해 살펴보자.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<p id="demo">버튼을 클릭해주세요</p>
<button type="button" id="btn">버튼</button>
<script>
$(function() {
// id가 "btn"인 요소에 클릭(click)이벤트 핸들러 연결하고 "button click"이라는 창이 뜨도록 한다.
$("#btn").click(function(){
alert('button click');
});
// button 요소를 클릭하면, "button click"이라는 창이 뜨도록 한다(1)
$("button").click(function(){
alert('button click');
});
// button 요소를 클릭하면, "button click"이라는 창이 뜨도록 한다(2)
$("button").on("click", function() {
alert('button click');
});
// button 요소를 클릭하면, "button click"이라는 창이 뜨도록 한다(3) (아래 함수 참고)
$("button").on("click, btnFunc");
});
function btnFunc() {
alert("button click");
}
</script>
</body>
</html>
|
cs |
getter와 setter 메서드와 click이벤트를 만들어보자.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
입력: <input type="text" id="text">
<br><br>
<input type="button" id="btn" value="할 수 있는가?">
<script type="text/javascript">
$("#btn").click(function() {
// setter
$("#text").val("나는 할 수 있다");
// getter
let text = $("#text").val(); // javascript에서의 .value와 동일
alert(text);
});
</script>
</body>
</html>
|
cs |
다음 예제에서 요소를 click 했을 때 다양한 효과가 나타나도록 해보자.
주석 처리를 해가면서 하나씩 실행해보도록 한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<p>최하위등급 과목수만 평가</p>
<div>
<p>서울 일반고 입시 절대평가로…석차백분율제 폐지</p>
<p id="demo">A∼E 학점 각각 환산하지 않고 최하위등급 과목수만 평가</p>
<p class="cls">서울 일반계 고등학교의 입시 전형에 남아있던 상대평가 환산 방법이 절대평가로 바뀔 예정이다.</p>
<h3 class="cls">새 전형 방식은 올해 3월 중학교 2학년이 되는 학생들부터 적용된다.</h3>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("p").click(function () {
alert("p tag click");
});
// div 태그 안에 있는 p 태그를 클릭할 때만 반응하도록
$("div p").click(function () {
alert("p tag click");
});
// div 태그 안에 있는 class명이 cls인 것들을 클릭할 때만 반응하도록
$("div .cls").click(function () {
alert("p tag click");
});
// div 태그 안에 있는 p 태그 중 class명이 cls인 것들을 클릭할 때만 반응하도록
$("div p.cls").click(function () {
alert("p tag click");
});
// click한 p 태그의 배경색 바꾸기
$("p").click(function () {
$(this).css("background", "#ff0000");
});
// click한 p 태그 숨기기
$("p").click(function () {
$(this).hide();
});
// h3 태그 click하면, p 태그가 전부 보이도록
$("h3").click(function () {
$("p").show();
});
});
</script>
</body>
</html>
|
cs |
'JavaScript > jQuery' 카테고리의 다른 글
| jQuery 기본(2) (0) | 2023.02.05 |
|---|