1. 제이쿼리 소개, HelloWorld

2016. 12. 5. 17:05Programming/JQuery


'write less, do more'를 모토로 하는

JavaScript 라이브러리.

DOM 찾는 것을 매우 편리하게 해준다.


<이랬던 코드를......>

1
2
3
4
var a = document.getElementById("textNode");
a.style.color = "red";
var b = document.getElementById("someDiv");
b.appendChild(a);
cs


<단 한 문장으로 표현 가능>

1
$("#textNode").css("color","red").appendTo("#someDiv");
cs



<li 클릭시 포커스 변경하는 예제(Javascript 사용시)>

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
<html>
    <head>
        <script type="text/javascript">
            function addEvent(target, eventType,eventHandler, useCapture) {
                if (target.addEventListener) { // 크롬에서 동작
                    target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
                } else if (target.attachEvent) {  // IE에서 동작
                    var r = target.attachEvent("on"+eventType, eventHandler);
                }
            }
 
     
            function clickHandler(event) {
                var nav = document.getElementById('navigation');
                for(var i = 0; i < nav.childNodes.length; i++) {
                    var child = nav.childNodes[i];
                    if(child.nodeType==3//공백은 무시하도록 설정
                        continue;
                    //class값을 모두 공백으로 초기화
                    child.className = '';
                }
                event.target.className = 'selected';
            }
  
            addEvent(window'load'function(eventObj) {
                var nav = document.getElementById('navigation');
                for(var i = 0; i < nav.childNodes.length; i++) {
                    var child = nav.childNodes[i];
                    if(child.nodeType==3)
                        continue;
                    //li 클릭시 clickHandler 호출
                    addEvent(child, 'click', clickHandler);
                }
            })
        </script>
        <style type="text/css">
            #navigation li {
                list-style:none;
                float:left;
                padding:5px;
            }
            #navigation {
                cursor:pointer;
            }
            #navigation .selected {
                background-color:red;
                color:white;
            }
        </style>
    </head>
    <body>
        <ul id="navigation">
            <li>HTML</li>
            <li>CSS</li>
            <li>javascript</li>
            <li class="selected">jQuery</li>
            <li>PHP</li>
            <li>mysql</li>
        </ul>
    </body>
</html>
cs


<JQuery 사용시>
1
2
3
4
5
6
7
8
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
            //클릭 이벤트 발생시 function 실행
            //selected를 전부 제거한 후 this(선택된 li)에 selected 붙여줌
            $('#navigation li').click(function() {
                $('#navigation li').removeClass('selected');
                $(this).addClass('selected');
            })
    </script>
cs


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

6. Jquery-UI 사용법  (0) 2017.01.19
5. 이벤트, 애니메이션  (0) 2017.01.19
4. 엘리먼트 제어  (0) 2016.12.19
3. chain, event  (0) 2016.12.19
2. 선택자(Selector)  (0) 2016.12.07