1. 제이쿼리 소개, HelloWorld
2016. 12. 5. 17:05ㆍProgramming/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 |