1. (jquery/제이쿼리) 기본 jquery 설명 및 상시 대기 사용해 특정 태그, 특정 아이디 클릭 (click) 이벤트 정의 실시

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : jquery

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->
    <script  src="https://code.jquery.com/jquery-latest.min.js"></script>


    <!-- 내부 JS 지정 -->
    <script>
    	/* 
    	[요약 설명]
    	1. Jquery : 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다
    	2. Jquery 적용 : Jquery 적용은 파일을 다운받아서 적용하는 방식, CDN을 이용하여 로드하는 방식이 있습니다
    	3. CDN(Content Delivery Network) : 콘텐츠를 다운받을 때 자동으로 가장 가까운 서버에서 다운받는 기술입니다
    	4. CDN을 이용하면 제이쿼리 파일을 서버에 따로 저장하지 않아도 제이쿼리를 사용할 수 있습니다
    	5. 사용할 수 있는 CDN은 jQuery, 구글, MS, CDNJS, jsDelivr 가 있으며 어떤것을 사용하더라도 무방합니다
    	6. jQuery CDN : code.jquery.com 주소 포함
    	7. 구글 CDN : ajax.googleapis.com 주소 포함
    	8. MS CDN : ajax.aspnetcdn.com 주소 포함
    	9. CDNJS CDN : cdnjs.cloudflare.com 주소 포함
    	10. jsDelivr CDN : cdn.jsdelivr.net 주소 포함
    	11. 기본 문법 : $(선택자).동작함수();
    	12. $ function 과 $ document : window.onload 역할 수행 (웹브라우저 내의 모든 요소가 준비되면 수행, 상시 대기)
    	*/
    	
    	
    	/* 클릭 이벤트 정의 실시 [1] 방법 */
    	$(function() {
    		// 일반 태그 클릭 이벤트 
    		$("div").on("click", function() {
    			alert("div 클릭");
    		});    		
    		
    		// 특정 id 클릭 이벤트 
    		$("#first_container").on("click", function() {
    			alert("first_container 클릭");
    		});	
    		
    	});
    	
    	
    	/* 클릭 이벤트 정의 실시 [2] 방법 */
    	$(document).ready(function() {
    		// 일반 태그 클릭 이벤트 
    		$("div").on("click", function() {
    			alert("div 클릭");
    		});
    		    		
    		// 특정 id 클릭 이벤트 
    		$("#first_container").on("click", function() {
    			alert("first_container 클릭");
    		});
    		
    	});  	    	    	
    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[요약 설명]

1. Jquery : 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다

2. Jquery 적용 : Jquery 적용은 파일을 다운받아서 적용하는 방식, CDN을 이용하여 로드하는 방식이 있습니다

3. CDN(Content Delivery Network) : 콘텐츠를 다운받을 때 자동으로 가장 가까운 서버에서 다운받는 기술입니다

4. CDN을 이용하면 제이쿼리 파일을 서버에 따로 저장하지 않아도 제이쿼리를 사용할 수 있습니다

5. 사용할 수 있는 CDN은 jQuery, 구글, MS, CDNJS, jsDelivr 가 있으며 어떤것을 사용하더라도 무방합니다

6. jQuery CDN : code.jquery.com 주소 포함

7. 구글 CDN : ajax.googleapis.com 주소 포함

8. MS CDN : ajax.aspnetcdn.com 주소 포함

9. CDNJS CDN : cdnjs.cloudflare.com 주소 포함

10. jsDelivr CDN : cdn.jsdelivr.net 주소 포함

11. 기본 문법 : $(선택자).동작함수();

12. $ function 과 $ document : window.onload 역할 수행 (웹브라우저 내의 모든 요소가 준비되면 수행, 상시 대기)

*/

/* =========================== */