교재 PDF
jQuery.pdfjQuery 의 특징
DOM과 관련된 처리를 쉽게 구현
CSS 선택자를 이용하여 쉽고 편리하게 요소를 선택
일괄된 이벤트 연결을 쉽게 구현
시각적 효과를 쉽게 구현
Ajax 애플리케이션을 쉽게 개발
일반인들이 만든 플러그인을 이용할수 있음
jquey-1.11.2.js
jquery-1.11.2.js
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery 연결</title> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> //window.onload = function(){}; //문서가 준비 완료되면 매개변수로 전달된 함수를 실행하라는 의미 $(document).ready(function(){ alert('First Ready'); }); $(document).ready(function(){ alert('Second Ready'); }); $(document).ready(function(){ alert('Third Ready'); }); </script> </head> <body> </body> </html> | cs |
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> <head> <meta charset="UTF-8"> <title>jQuery 연결</title> <!-- CDN : Contents Delivery Network --> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <!-- <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> --> <script type="text/javascript"> //HTML 페이지에 있는 모든 문서 객체를 선택하는 선택자 $(document).ready(function(){ $('*').css('color', 'red'); //* 전체 선택자 }); </script> </head> <body> <h1>장마</h1><br> <h2>여름</h2> </body> </html> | cs |
id선택자, 클래스 선택자, 태그 선택자
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>id선택자, 클래스 선택자, 태그 선택자</title> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> //$(document).ready(function(){}); $(function(){ //태그 선택자 속성 속성값 $('span').css('border', '3px solid blue'); //클래스 선택자 $('.my').css('border', '5px solid red'); //id 선택자 $('#content').css('background', 'green'); }); </script> </head> <body> <p class="my">jQuery 실습</p> <div> <div id="content">id값이 content인 div 태그</div> </div> <span>span1</span> <span class="my">span2</span> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>id선택자, 클래스 선택자, 태그 선택자</title> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(function(){ //여러개의 태그 선택 $('h1,p').css('color', 'orange'); }); </script> </head> <body> <h1>강물</h1> <p>파도</p> <h1>새벽</h1> <div>별</div> </body> </html> | cs |
05.html - 특정 id 속성을 가지는 태그 선태
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>id선택자, 클래스 선택자, 태그 선택자</title> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(function(){ //특정 id 속성을 가지는 태그 선택 $('h1#target').css('color', 'orange'); }); </script> </head> <body> <h1>header-0</h1> <h1 id="target">header-1</h1> <h1>header-2</h1> </body> </html> | cs |
06.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>id선택자, 클래스 선택자, 태그 선택자</title> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(function(){ //특정 id 속성을 가지는 태그 선택 $('h1#target').css('color', 'orange'); }); </script> </head> <body> <h1>header-0</h1> <h1 id="target">header-1</h1> <h1>header-2</h1> </body> </html> | cs |
자식 선택자 (직계 자식만 선택 - 후손선택자와 구분 중요)
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자신 선택자</title> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(function() { //자식 선택자 //body 태그의 자식(직계자신) $('body > div').css('border', '3px solid red'); }); </script> </head> <body> <div> <div> <ul> <li>사과</li> <li>바나나</li> <li>망고</li> <li>오렌지</li> </ul> <div>가을 여행</div> </div> </div> <p> <span>하하</span> </p> </body> </html> | cs |
후손 선택자
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>후손 선택자</title> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(function() { //후손 선택자 //body 이하 div 선택(후손 중 div 선택) $('body div').css('border', '3px solid red'); }); </script> </head> <body> <div> <div> <ul> <li>사과</li> <li>바나나</li> <li>망고</li> <li>오렌지</li> </ul> <div>가을 여행</div> </div> </div> <p> <span>하하</span> </p> </body> </html> | cs |
배열
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>배열</title> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(function(){ //배열 선언 var array = [ {name: 'naver', link:'http://www.naver.com'}, {name: 'daum', link:'http://www.daum.net'}, {name: 'nate', link:'http://www.nate.com'}, {name: 'google', link:'http://www.google.co.kr'} ]; // 배열 배열로부터 데이터를 받아서 처리하는 함수 $.each(array, function(index, item){ //index : 배열의 index //item : 배열의 인덱스를 통해 접근한 객체(key:value) var output=''; output+='<a href='+item.link + '>'; output+='<h1>'+item.name+'</h1>'; output+='</a>'; document.body.innerHTML += output; }); }); </script> </head> <body> </body> </html> | cs |
<div>
<h1>하늘<h1>
</div>
append 기능 을 이용하면 하늘 다음에 데이터가 들어간다
HTML은 누적해서 데이터를 보여주지 못하므로 append 가능을 이용해서 데이터 표시
'App Development > Hybrid Programming' 카테고리의 다른 글
| 특강 3일차 (오후) - AJAX, JQueryMobile (0) | 2015.01.07 |
|---|---|
| 특강 3일차 (오전) - JQuery, AJAX (0) | 2015.01.07 |
| 특강 2일차 (오전) - 자바스크립트 (0) | 2015.01.06 |
| 특강 1일차 (오후) (0) | 2015.01.05 |
| 특강 1일차 (0) | 2015.01.05 |