제이쿼리 주요 개념

웹 개발 기초/자바 웹을 다루는 기술

제이쿼리 주요 개념

sungw00 2023. 3. 6. 16:11

728x90

제이쿼리

화면의 동적 기능을 자바스크립트보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는 자바스크립트 기반 라이브러리
여러가지 효과나 이벤트를 간단한 함수 호출만으로 빠르게 개발할 수 있음
CSS 선택자를 이용해 각 HTML 태그에 접근해서 작업하므로 명료하면서 읽기 쉬운 형태로 표현
메서드 체인 방식으로 수행하므로 여러 개의 동작(기능)이 한 줄로 나열되어 코드가 불필요하게 반복되는 것을 예방
풍부한 플러그인 제공으로 이미 개발된 많은 플러그인을 쉽고 빠르게 이용이 가능
크로스 브라우징을 제공하므로 브라우저 종류에 상관 없이 동일하게 기능을 수행

제이쿼리를 사용하는 방법

1. www.jquery.com 에서 라이브러리를 다운로드하는 방법

2. 네트워크 CDN 호스트를 설정해서 사용하는 방법

<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> // 지정한 버전의 제이쿼리를 사용
<script src="http://code.jquery.com/jquery-lastest.min.js"></script> // 가장 최신 버전의 제이쿼리를 사용

제이쿼리의 여러가지 기능

제이쿼리는 HTML 객체(DOM)를 탐색하는 방법으로 CSS 선택자를 이용함

선택자 종류	선택자 표현 방법	설명
All selector	$("*")	모든 DOM을 선택
ID selector	$("#id")	해당되는 id를 가지는 DOM을 선택
Element selector	$("elementName")	해당되는 이름을 가지는 DOM을 선택
class selector	$(".className")	CSS 중 해당되는 클래스 이름을 가지는 DOM을 선택
Multiple selector	$("selector1, selector2, selector3, ....., selectorN")	해당되는 선택자를 가지는 모든 DOM을 선택

제이쿼리 선택자 사용 실습

제이쿼리의 id 선택자 기능을 이용해 HTML 태그의 id에 접근하는 방법

1. jQuery1.html 파일 작성

<!-- jQuery1.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID 선택자 연습1</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- 제이쿼리를 사용하기 위해 반드시 설정 -->
<script type="text/javascript">
	<!-- document에 DOM(Document Object Model)이 로드되는 이벤트 처리 함수 -->
    $(document).ready(function() {
		alert($("#unique2").html()); <!-- 페이지 로드 시 id가 unique2인 태그를 검색한 후 html() 메서드를 이용해 태그의 값을 가져옴 -->
	})
</script>
</head>
<body>
	<div class="class1">안녕하세요.</div>
	<div id="unique2">제이쿼리입니다!</div>
	<div id="unique3">
		<p>제이쿼리는 아주 쉽습니다!!!</p>
	</div>
</body>
</html>

페이지 로드 시 $("unique2")는 # 다음에 오는 id가 unique2인 태그를 웹 페이지에서 검색한다. id에 해당하는 태그(객체)를 얻은 후 제이쿼리의 html() 메서드를 호출해 태그의 값을 얻는다.

2. http://localhost:8090/pro16/test02/jQuery1.html 요청하면 웹 페이지가 브라우저에 로드되는 즉시 id에 해당되는 엘리먼트의 값을 출력한다.

제이쿼리의 id 선택자 기능을 이용해 해당 id를 가지는 <p> 엘리먼트에 접근하여 동적으로 텍스트를 추가하는 방법

1. jQuery2.html 파일 작성

<!-- jQuery2.html -->
<html>
<head>
<meta charset="UTF-8">
<title>ID 선택자 연습2</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
	function addHtml() {
		$("#article").html('안녕하세요' + '<br>'); <!-- 제이쿼리로 id가 article인 태그를 찾아서 html() 메서드의 인자 값을 태그에 설정 -->
	}
</script>
</head>
<body>
	<div>
		<p id="article"></p>
	</div>
	<input type="button" value="추가하기" onClick="addHtml()" /> <!-- 버튼 클릭 시 addHtml() 함수를 호출 -->
</body>
</html>

2. http://localhost:8090/pro16/test02/jQuery2.html 요청 후 추가하기를 클릭

3. <p> 태그에 "안녕하세요"라는 텍스트를 추가하고 결과를 확인

class 선택자로 <div> 태그에 접근하여 기능을 수행하는 방법

1. jQuery3.html 파일 작성

<!-- jQuery3.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Class 선택자 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
	function addImage() {
		$(".class1").html("<img src='../image/duke.png'>");	<!-- 버튼 클릭 시 클래스 이름이 class1인 태그를 찾아서 <img> 태그를 추가 -->
	}
</script>
</head>
<body>
	<!-- 클래스 이름이 class1로 지정되어 있음 -->
	<div class="class1"></div>
	<div class="class1"></div>
	<input type="button" value="이미지 추가하기" onClick="addImage()" />
</body>
</html>

버튼을 클릭하면 함수에서 제이쿼리의 클래스 선택자를 사용해 class1 클래스 이름을 갖는 <div> 태그에 접근하여 이미지를 나타냄

2. duke.png 파일을 image 폴더에 추가

3. http://localhost:8090/pro16/test02/jQuery3.html로 요청하여 이미지 추가하기 클릭하면 이미지가 두 개의 <div>에 추가됨

제이쿼리에서 <div> 엘리먼트에 직접 접근하여 이미지를 추가하는 방법

1. jQuery4.html 파일 작성

<!-- jQuery4.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Class 선택자 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
	function addImage() {
		$("div").html("<img src='../image/duke.png'>");	<!-- 제이쿼리로 <div> 엘리먼트에 직접 접근하여 <img> 태그를 추가 -->
	}
</script>
</head>
<body>
	<div></div>
	<div></div>
	<input type="button" value="이미지 추가하기" onClick="addImage()" />
</body>
</html>

2. http://localhost:8090/pro16/test02/jQuery4.html로 요청 후 <div> 엘리먼트에 이미지를 추가

사용자가 텍스트 박스에 입력한 내용을 제이쿼리 id 선택자를 이용해 가져온 후 다시 텍스트 박스에 출력하는 방법

1. jQuery5.html 파일 작성

<!-- jQuery5.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Class 선택자 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
	function fn_process() {
		var value = $("#t_input").val(); <!-- 제이쿼리에서 id로 텍스트 박스에 접근하여 val() 메서드를 이용해서 입력 값을 가져옴 -->
		$("#t_output").val(value); <!-- 제이쿼리에서 id로 텍스트 박스에 접근하여 val() 메서드를 이용해 값을 출력
	}
</script>
</head>
<body>
	<input type="text" id="t_input"/>
	<input type="button" value="입력하기" onClick="fn_process()" /><br><br>
	<div>
		결과:<br>
		<input type="text" id="t_output" disabled />
	</div>
</body>
</html>

제이쿼리의 val( ) 메서드는 해당 엘리먼트의 값을 가져오거나 엘리먼트로 값을 출력하는 기능을 한다.

2. http://localhost:8090/pro16/test02/jQuery5.html로 요청한 후 텍스트 박스에 이름을 입력한 후 입력하기를 클릭

입력한 이름이 다른 텍스트 박스에 표시되는 것 확인

728x90

'웹 개발 기초 > 자바 웹을 다루는 기술' 카테고리의 다른 글

제이쿼리 Ajax 사용법 (0)	2023.03.08
제이쿼리 Ajax 기능 (0)	2023.03.06
HTML5 주요 개념 및 태그 사용 예제 (0)	2023.03.04
JSP에서 파일 다운로드 (0)	2023.03.02
JSP에서 파일 업로드 (0)	2023.03.02

현재글제이쿼리 주요 개념

Study Blog