Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

codingfarm

소개 본문

web/JQuery

소개

scarecrow1992 2020. 10. 9. 15:08

jQuery란?

$\bullet$ HTML 속 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 크로스 브라우징 JavaScript 라이브러리이다.

$\bullet$ jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.

 

jQuery의 기능

1. DOM

$\bullet$ DOM 객체의 필수 프로퍼티와 메서드

$\bullet$ 노드 추가, 삭제, 찾기, 이동시키기

$\bullet$ 스타일 추가, 수정, 값 구하기

$\bullet$ 속성 추가, 수정, 값 구하기

$\bullet$ 이벤트 등록, 제거, 발생시키기

$\bullet$ 위치, 크기와 관련된 프로퍼티와 메서드

 

2. Ajax(Asynchronous JavaScript and XML

$\bullet$  jQuery에서는 더욱 쉽게 Ajax를 사용할 수 있습니다.

 

3. 플러그인

$\bullet$ 개발자가 필요로하는 플러그인의 개발이 가능하다.

 

4. 효과

애니메이션 효과를 아주 쉽고 다양하게 줄 수 있다.

 

 

그렇다면 jQuery의 어떤점이 편리하다는걸까?

 

가령 글자의 색을 붉은색으로 바꾸는 스타일을 적용시키고 싶다할때

1. css

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
<!doctype html>
<html>
    <head>
        <style>
            #menu2{
                color : red;
            }
        </style>
    </head>
 
    <body>
        <div>
            <p>이 문서는 jQuery를 사용하는 이유를 설명하기 위해 만든 예제입니다.</p>
            <p>#menu2의 li 태그 스타일 속성 중 글자색을 모두 빨간색으로 변경해 주세요.</p>
        </div>
 
        <ul class="menu" id="menu1">
            <li>menu1-1</li>
            <li>menu1-2</li>
            <li>menu1-3</li>
            <li>menu1-4</li>
            <li>menu1-5</li>
            <li>menu1-6</li>
            <li>menu1-7</li>
        </ul>
 
        <ul class="menu" id="menu2">
            <li>menu2-1</li>
            <li>menu2-2</li>
            <li>menu2-3</li>
            <li>menu2-4</li>
            <li>menu2-5</li>
            <li>menu2-6</li>
            <li>menu2-7</li>
        </ul>
    </body>
</html>
 cs

 

 

2. 자바스크립트

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
<!doctype html>
<html>
    <script>
        window.onload = function(){
            // 먼저 #menu2를 찾는다.
            var menu2 = document.getElementById("menu2");
 
            // #menu2의 태그 중 li 태그를 찾는다.
            var liList= menu2.getElementsByTagName("li");
 
            for(var i =0 ; i < liList.length; i++){
                var li = liList[i];
                li.style.color = "#f00";
            }
        }
    </script>
 
    <body>
        <div>
            <p>이 문서는 jQuery를 사용하는 이유를 설명하기 위해 만든 예제입니다.</p>
            <p>#menu2의 li 태그 스타일 속성 중 글자색을 모두 빨간색으로 변경해 주세요.</p>
        </div>
 
        <ul class="menu" id="menu1">
            <li>menu1-1</li>
            <li>menu1-2</li>
            <li>menu1-3</li>
            <li>menu1-4</li>
            <li>menu1-5</li>
            <li>menu1-6</li>
            <li>menu1-7</li>
        </ul>
 
        <ul class="menu" id="menu2">
            <li>menu2-1</li>
            <li>menu2-2</li>
            <li>menu2-3</li>
            <li>menu2-4</li>
            <li>menu2-5</li>
            <li>menu2-6</li>
            <li>menu2-7</li>
        </ul>
    </body>
</html>
 cs

 

 

3. jQuery

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
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
    
        <script src="../../libs/jquery-1.11.0.min.js"></script>
        <script>
            /*
            예제01 : 스크립트를 이용해 문서에서 #menu2의 li 태그 글자색을 모두 빨간색으로
            변경하고 싶다면 어떻게 해야 할까요?
            */
            $(document).ready(function() {
                $("#menu2 li").css("color", "#f00");
            })
        </script>
 
    </head>
    <body>
        <div>
            <p>이 문서는 jQuery를 사용하는 이유를 설명하기 위해 만든 예제입니다.</p>
            <p>#menu2의 li 태그 스타일 속성 중 글자색을 모두 빨간색으로 변경해 주세요.</p>
        </div>
 
        <ul class="menu" id="menu1">
            <li>menu1-1</li>
            <li>menu1-2</li>
            <li>menu1-3</li>
            <li>menu1-4</li>
            <li>menu1-5</li>
            <li>menu1-6</li>
            <li>menu1-7</li>
        </ul>
 
        <ul class="menu" id="menu2">
            <li>menu2-1</li>
            <li>menu2-2</li>
            <li>menu2-3</li>
            <li>menu2-4</li>
            <li>menu2-5</li>
            <li>menu2-6</li>
            <li>menu2-7</li>
        </ul>
    </body>
</html>
 cs

 

 

물고기 움직이기

fish.png
0.00MB

위 이미지의 물고기를 버튼을 누를경우 왼쪽에서 오른쪽으로 움직이게 하는 코드는 아래와 같다.

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
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <style>
            body {
                font-size: 9pt;
            }
            #panel {
                width: 600px;
                height: 300px;
                border: 1px solid #999;
                position: relative;
            }
 
            #bar {
                position: absolute;
                left: 50px;
                top: 190px;
                width: 500px;
                height: 20px;
                background: #F30;
            }
 
            #fish {
                position: absolute;
                left: 50px;
                top: 120px;
            }
 
            #nav {
                text-align: center;
                width: 600px;
            }
        </style>
        <head>
 
            <script src="../../libs/jquery-1.11.0.min.js"></script>
            <script>
                /*
                 예제01: 물고기를 현재 위치에서 430px 위치로 부드럽게 움직이도록 시작 버튼을 만들어주세요.
                 */
 
                $(document).ready(function() {
                    // 물고기 노드 구하기.
                    var $fish = $("#fish");
 
                    // 버튼에 이벤트 걸기.
                    $("#btnStart").click(function() {
                        $fish.animate({
                            left : "430px"
                        }, 1000);
                        alert("zzz");
                    });
                })
 
            </script>
 
        </head>
 
        <body>
            <div id="panel">
                <div id="bar"></div>
                <img src="fish.png" id="fish">
            </div>
 
            <div id="nav">
                <button id="btnStart">
                    물고기 움직이기
                </button>
            </div>
        </body>
 
</html>
 
 cs

여기서 물고기 이미지의 position 속성을 반드시 absolute로 설정해주어야 한다.

 

 

저작자표시

'web > JQuery' 카테고리의 다른 글

.eq() - 이미지 배열하기  (0) 2020.10.11
switch, keydown- 물고기 움직이기  (0) 2020.10.11
addClass, removeClass - 체크박스 만들기  (0) 2020.10.11
<input> 태그의 값 읽기 - 물고기 움직이기  (0) 2020.10.09
사용법  (0) 2020.10.09
'web/JQuery' Related Articles more
Comments