제이쿼리 선택자 사용 실습
1. 다음과 같이 test02 폴더에 제이쿼리 실습 html을 생성합니다. 그리고 이미지 파일인 duke.png, duke2.png, image1.jpg, image2.jpg를 image 폴더를 만들어 저장합니다.
2. jQuery1.html을 다음과 같이 작성합니다. 페이지 로드 시 $("#unique2")는 # 다음에 오는 id가 unique2인 태그는 웹 페이지에서 검색합니다. id에 해당하는 태그(객체)를 얻은 후 제이쿼리의 html() 메서드를 호출해 태그의 값을 얻습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID 셀렉터 연습1</title>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($("#unique2").html());
});
</script>
</head>
<body>
<div class="class1">안녕하세요.</div>
<div id="unique2">제이쿼리입니다!!</div>
<div id="unique3">
<p>제이쿼리는 아주 쉽습니다!!!</p>
</div>
</body>
</html>
3. http://localhost:8080/pro16/test03/jQuery.html로 요청하여 실행 결과를 확인합니다. 웹 페이지가 브라우저에 로드되는 즉시 id에 해당하는 엘리먼트의 값을 출력합니다.
4. 다음은 제이쿼리의 id 선택자를 이용해 해당 id를 가지는 <p> 엘리먼트 접근하여 동적으로 텍스트를 추가해 보겠습니다. jQuery2.html를 다음과 같이 작성합니다.
<!DOCTYPE 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>');
}
</script>
</head>
<body>
<div>
<p id="article">
</div>
<input type="button" value="추가하기" onClick="addHtml()" />
</body>
</html>
5. http://localhost:8080/pro16/test02/jQuery2.html로 요청한 후 추가하기를 클릭합니다.
6. <p> 태그에 "안녕하세요."라는 텍스트를 추가하고 결과를 확인합니다.
7. 이번에는 class 선택자로 <div> 태그에 접근하여 기능을 수행해 보겠습니다. 버튼을 클릭하면 함수에서 제이쿼리의 클래스 선택자를 사용해 class1 클래스 이름을 갖는 <div> 태그에 접근하여 이미지를 나타냅니다.
<!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'>");
}
</script>
</head>
<body>
<div class="class1"></div>
<div class="class1"></div>
<input type="button" value="이미지 추가하기" onClick="addImage()" />
</body>
</html>
8. http://localhost:8080/pro16/test02/jQuery3.html로 요청하여 이미지 추가하기를 클릭하면 이미지가 두 개의 <div>에 추가합니다.
9. 다음은 제이쿼리에서 <div> 엘리먼트에 직접 접근하여 이미지를 추가해 보겠습니다. jQuery4.html을 다음과 같이 작성합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘러먼트 셀렉터 연습</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'>");
}
</script>
</head>
<body>
<div></div>
<div></div>
<input type="button" value="이미지 추가하기" onClick="addImage()" />
</body>
</html>
10. http://localhost:8080/pro16/test02/jQuery4.html로 요청하여 <div> 엘리먼트에 이미지를 추가합니다.
11. jQuery5.html을 다음과 같이 작성합니다. 사용자가 텍스트 박스에 입력한 내용을 제이쿼리 id 선택자를 이용해 가져온 후 다시 텍스트 박스에 출력하는 내용입니다. 제이쿼리의 val() 메서드는 해당 엘리먼트의 값을 가져오거나 엘리먼트로 값을 출력하는 기능을 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function fn_process(){
var value=$("#t_input").val();
$("#t_output").val(value);
}
</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>
12. http://localhost:8080/pro16/test02/jQuery5.html로 요청하여 텍스트 박스에 홍길동이라고 이름을 입력한 후 입력하기를 클릭하면 입력한 이름이 다른 텍스트 박스에 표시됩니다.
'프로그래밍 언어 > 자바 웹' 카테고리의 다른 글
| 제이쿼리 Ajax 사용법 (0) | 2026.05.15 |
|---|---|
| 제이쿼리 Ajax 기능 (0) | 2026.05.12 |
| 제이쿼리의 여러 가지 기능 (0) | 2026.05.06 |
| 제이쿼리 주요 개념 (0) | 2026.05.03 |
| HTML5 웹 페이지 구조 관련 태그 사용 (0) | 2026.04.28 |
