[jQuery] 제이쿼리(jQuery) 기본

제이쿼리(jQuery)란?

제이쿼리는 오픈 소스 기반의 자바스크립트 라이브러리로, 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있다.

• 제이쿼리는 js파일을 로컬에 저장하거나, URL을 통해 받아와서 사용할 수 있다.
• 로컬에 저장하는 경우는 인터넷이 연결되지 않은 상태에서도 제이쿼리르 사용할 수 있지만, 인터넷에서 받아오는 경우에는 인터넷 연결이 되어 있지 않으면 제이쿼리를 사용할 수 없다.

제이쿼리 설치

제이쿼리 홈페이지 : https://jquery.com/download/ 에 들어가서 js파일 다운받기

• compressed버전이나 uncompressed버전 아무거나 받아도 상관 없음.
• 배포시에는 compressed된 버전으로 진행하는 편이 좋다.

• 다른이름으로 저장 클릭

• 파일 저장

제이쿼리 로드

1. 로컬파일 불러오기

<script type="text/javascript" src="<%=cp%>/data/js/jquery-3.1.1.min.js"></script>

2. URL주소로 받아오기

• CDN을 이용하는 방법

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

사용방법

제이쿼리 선택자

선택자명	설명
$("tag")	tag라는 이름의 모든 태그 요소를 선택
$(".class")	class라는 클래스명의 모든 클래스 요소를 선택
$("#id")	id라는 아이디명의 아이디요소를 선택(한페이지에 1개만 가능)

$(document).ready(function(){
	alert("환영합니당");	
});

• 해당 파일을 맨 처음 실행하자마자 alert창 띄워라

제이쿼리 함수

	$(function(){
	
		$("#btnOK").click(function(){
			
			var msg = $("#userName").val();
			
			msg += "\r\n" + $("input:radio[name=gender]:checked").val();
			
			msg += "\r\n" + $("#hobby").val().join("|");
			
			alert(msg);
			
		});
		
	});

• function(){}을 통해서 함수를 만들어주면 된다.
• $("#btnOK").click(function(){} : btnOK가 클릭되면 function실행