본문 바로가기
JSP

JQuery (선택자)

S.I.B 2022. 3. 4. 19:23

▷ 선택자(Selector)
    → 문서 객체 내의 요소를 선택하기 위한 용도로 사용하는 구성요소
    → 자바스크립트(document.getElementByXXX() 메서드 사용)와 달리
        $('선택자명') 형태로 지정하므로 간편하게 접근 가능

 

▷ 선택자 사용 기본 문법
    → $('선택자명 또는 *').함수('속성명','속성값');

 

▷ 요소에 대한 CSS 속성 변경 기본 문법 - css() 함수 사용
    → $('선택자').css('속성명','속성값')); → 특정 선택자에 대한 css 속성을 지정된 값으로 변경
    → $('선택자').css('속성명'); → 특정 선택자에 대한 css 속성값 리턴

 

▷ 직접 선택자 - 특정 대상(요소)를 직접 지정하기 위한 선택자
    1) 아이디(#) - 페이지 내에서 유일한 요소 → $('#id선택자명')
    2) 클래스(.) - 복수개의 동일한 요소(그룹화) → $('.class선택자명')
    3) 태그 - 동일한 태그를 갖는 복수개의 요소 → $('태그명')
    4) 태그속성 - 동일한 태그 중 특정 속성 지정 → $('태그명[속성명]')
    5) 태그속성값 - 동일한 태그의 동일한 속성 중 특정 값 지정 → $('태그명[속성명=값]')

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
	
	// ready 이벤트를 통해 문서 내의 선택자 요소에 접근
	$(function() {
		// 전체 요소에 대한 CSS 속성을 변경 - 모든 글자색('color' 속성)을 RED로 변경
		$('*').css('color','red');
		
		// id 선택자(#) 중 'idSelector' 라는 이름을 갖는 요소의 글자색을 BLUE로 변경
		$('#idSelector').css('color','blue');
        
		// 'idSelector' 선택자의 'color' 속성에 대한 값 리턴받아 출력하기
 		alert($('#idSelector').css('color'));
		
		// class 선택자(.) 중 'classSelector' 라는 이름을 갖는 요소의 글자색을 ORANGE 로 변경
		$('.classSelector').css('color','orange');
		// 'classSelector' 선택자의 'color' 속성에 대한 값 리턴받아 변수에 저장 후 출력하기
		var color = $('.classSelector').css('color');
 		alert(color);

		// ===========================================================================
			
		// table 태그의 테두리 변경, 배경색 변경
		// 1) table 태그의 테두리('border' 속성)를 '1px solid blue'로 변경
// 		$('table').css('border', '1px solid blue');
		// 2) table 태그의 배경색('blackground' 속성)를 'yellow'로 변경
// 		$('table').css('background', 'yellow');
		
		// 동일한 대상에 동일한 함수를 사용하여 속성값을 변경하는 경우
		// 함수에 대한 연쇄적인 호출을 통해 함수를 결합 가능
// 		$('table').css('border', '1px solid blue').css('background', 'pink');
		
		// 블록문을 사용하여 복수개의 속성을 변경 가능
		$('table').css({
			border: '1px solid blue',
			background: 'white'
		});
		
		// input 태그 중 type 속성이 'text' 인 요소의 배경색을 yellow 로 변경
		$('input[type=text]').css('background','yellow');
		
	});

</script>
</head>
<body>
	<h1>JQuery - test2.jsp</h1>
	<hr>
	<h3 id="idSelector">id 선택자</h3>
	<h3 class="classSelector">class 선택자</h3>
	<hr>
	<table border="1">
		<tr><td>번호</td><td>제목</td></tr>
		<tr><td>1</td><td>제목1</td></tr>
		<tr><td>2</td><td>제목2</td></tr>
		<tr><td>3</td><td>제목3</td></tr>
		<tr><td>4</td><td>제목4</td></tr>
	</table>
	
	<hr>
	<div id="inputBox">
		<input type="text" value="admin">
		<input type="password" value="1234">
		<textarea rows="5" cols="20" readonly="readonly"></textarea>
		<textarea rows="5" cols="20" id="inputData"></textarea>
	</div>
	<hr>
	<div id="divBox">
		<div>
			1번 div 태그
			<div>1-1번 div 태그</div>
			<div>1-2번 div 태그</div>
		</div>
		<span>span 태그</span>
		<div>2번 div 태그</div>
		<div>
			3번 div 태그
			<div>3-1번 div 태그</div>
			<div>3-2번 div 태그</div>
		</div>
	</div>
	<hr>
	<select id="selectBox">
		<option value="JAVA">JAVA</option>
		<option value="JSP" selected="selected">JSP</option>
		<option value="Spring Framework">Spring Framework</option>
	</select>
	<input type="text" id="selectResult">

</body>
</html>

 

▷ 인접관계 선택자
    1) 자식 선택자(>) - 특정 선택자의 바로 하위 요소(자식) 선택
       → $('부모선택자 > 자식선택자')
    2) 자식 또는 후손 선택자(공백) - 특정 선택자의 하위에 일치하는 모든 요소 선택
       → $('부모선택자 자식선택자')
    3) 순서 선택자 - 특정 선택자를 기준으로 지정된 순서에 해당되는 요소 선택
       → $('선택자명:옵션명')
       ex) 첫번째 태그 요소 - 선택자: first
       마지막 태그 요소 - 선택자: last
       홀수번째 태그 요소 - 선택자: odd
       짝수번째 태그 요소 - 선택자: even 등

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">

			$(document).ready(function(){ // $(function(){}) 과 동일한 코드
 			// tr 태그 중 첫번째 tr 태그 배경색을 green 으로 변경하고 가운데 정렬
			$('tr:first').css('background','green').css('text-align', 'center');

			// tr 태그 중 홀수번째(1,3) 태그 배경색을 pink 로 변경
			$('tr:odd').css('background','pink');
			// tr 태그 중 짝수번째(0,2,4) 태그 글자색을 black 로 변경
			$('tr:even').css('background','blue');
			
			// id 선택자 inputBox 인 요소의 자식 중 input 태그 type 속성이 text 인 요소 값 가져오기
			// => 특정 요소 객체의 val() 함수를 호출하여 값 가져오기 가능
			var id = $('#inputBox > input[type=text]').val();
			alert("아이디 : " + id);
			
			// val() 함수를 사용하여 해당 요소에 값 전달도 가능
			// inputBox 하위 요소 중 textarea 태그 중에서 readonly 속성인 요소에 텍스트 출력하기
			$('#inputBox > textarea[readonly]').val(id);
			
			// ==============================================================================================
			// id 선택자가 divBox 의 자식이 아닌 후손(자식 포함)들인 div 태그의 글자색을 blue로 변경
			$('#divBox div').css('color','blue'); // 1, 1-1, 1-2, 2, 3, 3-1, 3-2 모두 변경됨
			
			// id 선택자가 divBox 의 자식들인 div 태그의 글자색을 blue 로 변경
			$('#divBox > div').css('color','blue');// 1, 2, 3 만 변경됨
			
			// ==============================================================================================
			// id 선택자가 'selectBox' 인 요소의 선택된 값
            // (option 태그의 selected 속성이 있는 값)을 가져와서
			// id 선택자가 'selectResult' 인 요소에 출력하기
			
			var value = $('#selectBox > option:selected').val();
			$('#selectResult').val(value);
			
		});

</script>
</head>
<body>
	<h1>JQuery - test2.jsp</h1>
	<hr>
	<h3 id="idSelector">id 선택자</h3>
	<h3 class="classSelector">class 선택자</h3>
	<hr>
	<table border="1">
		<tr><td>번호</td><td>제목</td></tr>
		<tr><td>1</td><td>제목1</td></tr>
		<tr><td>2</td><td>제목2</td></tr>
		<tr><td>3</td><td>제목3</td></tr>
		<tr><td>4</td><td>제목4</td></tr>
	</table>
	
	<hr>
	<div id="inputBox">
		<input type="text" value="admin">
		<input type="password" value="1234">
		<textarea rows="5" cols="20" readonly="readonly"></textarea>
		<textarea rows="5" cols="20" id="inputData"></textarea>
	</div>
	<hr>
	<div id="divBox">
		<div>
			1번 div 태그
			<div>1-1번 div 태그</div>
			<div>1-2번 div 태그</div>
		</div>
		<span>span 태그</span>
		<div>2번 div 태그</div>
		<div>
			3번 div 태그
			<div>3-1번 div 태그</div>
			<div>3-2번 div 태그</div>
		</div>
	</div>
	<hr>
	<select id="selectBox">
		<option value="JAVA">JAVA</option>
		<option value="JSP" selected="selected">JSP</option>
		<option value="Spring Framework">Spring Framework</option>
	</select>
	<input type="text" id="selectResult">

</body>
</html>

 

결과창

저작자표시 비영리

'JSP' 카테고리의 다른 글

JQuery (이벤트)  (0) 2022.03.04
Jquery (css()함수)  (0) 2022.03.04
JQuery (사용방법)  (0) 2022.03.04
MVC 모델 (6) - 최근 공지사항 메인페이지에 출력  (0) 2022.03.01
MVC 모델 (5)  (0) 2022.02.24

'JSP' Related Articles

티스토리툴바