반응형
jQuery의 시작입니다.
1. 새프로젝트 - 웹사이트를 추가합니다. [ C#언어 ]
2. 해당 웹 사이트에서 새 항목 추가 - htm 파일을 추가합니다.
| [기본화면] 01.HelloWorld.htm |
 |
웹 사이트 프로젝트를 추가 한 이후 솔루션 탐색기에서 폴더를 추가 하여 jQuery 코드 관리를
위해 파일을 넣어두고 [그림1-1]과 같이 코드를 작성합니다.
Tip : 10줄 코드에서 솔루션에 넣어둔 jquery-1[1].3.2-vsdoc2.js파일을 html안에
드래그앤 드롭으로 추가 가능
<body> 태그 안에 1,2,3 간단한 예제입니다.
| 01.HelloWorld.htm |
| <head> <title>Hello World! jQuery!!</title> <style type="text/css"> .bg { background-color:Yellow; } </style> <script src="jQuery/jquery-1[1].3.2-vsdoc2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { //페이지가 준비되었을 때 $('#hw').addClass("bg"); // hw의 id속성을 가진 레이어를 bg css클래스 적용 $('#hw').click(function() { alert('안녕'); $(this).addClass("sil"); }); }); </script> </head> <body> <div style="background-color:Red;" onclick="alert('안녕');"> 1. 안녕하세요. jQuery! </div> <div class="bg"> 2. 반가워요. jQuery! </div> <div id="hw"> 3. 최고에요! jQuery!! </div> </body> </html> |
설명 :
1. 모양과 이벤트를 직접 지정 유지보수 어려움
2. 스타일 시트를 나눔
3. 2번보다 3이 좋음! 직접 정의 하는것 보다 관리가 편함.
jQuery장점으로 레이어와 코드가 직접 분리하여 유지보수가 쉽다.
body부분에서 자바스크립트 코드를 분리 가능하고, 동적으로 자바스크립트 코드 추가가 가능
추가 설명 :
- $()팩터리함수(메서드. 생성자)
- $()로 CSS의선태기와모든 DOM요소접근
- -$("선택기").xxx메서드();
- 자바스크립트익명메서드(람다식) 호출
- $(document).ready(function() { 명령어 });
- 익명(Anonymouse)함수/무명함수
- Function() {}
- $()와 jQuery는동일한코드다.
- 둘중하나사용가능
- $(document).ready(……... ) 무명이나익명메서드가들어가는자리
| 결과화면 |
 |
반응형
'jQuery | javascript | CSS' 카테고리의 다른 글
| 03.jQuery - 정규표현식 Selector ( 03.RegSelector ) (0) | 2009.11.05 |
|---|---|
| 02.jQuery - 선택기 ( 02.Selector.htm ) (0) | 2009.11.05 |
| 00.jQuery - jQuery란? (0) | 2009.11.05 |
| 33.JavaScript - 문자열관련함수 (0) | 2009.08.13 |
| 32.JavaScript - 날짜관련내장객체 (0) | 2009.08.13 |
Comments