타입에 '. (점)' 은 생략해주세요
기본 선택자
- 태그 선택자: $('div') - 모든 <div.> 요소 선택
- 아이디 선택자: $('#box') - 아이디가 box인 요소 선택
- 클래스 선택자: $('.wrap') - 클래스가 wrap인 요소 선택
실습 : 기본 선택자를 이용한 스타일 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 선택자 예시</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div id="header" class="section">헤더 섹션</div>
<div class="content section">메인 콘텐츠</div>
<div class="footer section">푸터 섹션</div>
<script>
$(document).ready(function() {
// 아이디 선택자: #header
$('#header').css('background-color', 'lightblue');
// 클래스 선택자: .section
$('.section').css('border', '1px solid black');
// 태그 선택자: div
$('div').css('padding', '10px');
});
</script>
</body>
</html>기본 선택자 (#header, .section, div)를 사용하여 HTML 요소의 스타일을 변경하는 방법
input 요소의 타입을 이용한 선택자
- $('input:text') - 타입이 text인 <input.> 요소 선택
- $('input:password') - 타입이 password인 <input.> 요소 선택
- $('input:radio') - 타입이 radio인 <input.> 요소 선택
- $('input:checkbox') - 타입이 checkbox인 <input.> 요소 선택
- $('input:submit') - 타입이 submit인 <input.> 요소 선택
실습 : 입력 타입을 이용한 폼 유효성 검사
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>입력 타입 선택자 예시</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<form id="loginForm">
<input type="text" placeholder="사용자 이름"><br>
<input type="password" placeholder="비밀번호"><br>
<input type="submit" value="로그인">
</form>
<script>
$(document).ready(function() {
$('#loginForm').on('submit', function(event) {
event.preventDefault();
const userName = $('input:text').val();
const password = $('input:password').val();
if (userName === '' || password === '') {
alert('모든 필드를 입력해 주세요.');
} else {
alert('로그인 성공!');
}
});
});
</script>
</body>
</html>
입력 타입 선택자 (input:text, input:password)를 사용하여 사용자가 입력한 값을 확인하고, 폼의 유효성을 검사
상태 선택자
- $('input:checked') - 선택된 <input.> 요소(radio, checkbox 등)
- $('input:disabled') - 비활성화된 <input.> 요소
- $('input:enabled') - 활성화된 <input.> 요소
- $('option:selected') - 선택된 <option.> 요소
'is()' 메소드를 이용한 상태 확인
- $('input:text').is(':focus') - 포커스된 상태인지 확인
- $('#radio1').is(':checked') - 체크된 상태인지 확인
탐색 메소드 (Traversing)
- 자손 선택: $('.ott > li'), $('.ott').children() - 자식 요소 선택
- 후손 선택: $('.ott a'), $('.ott').find('a') - 후손 요소 선택
형제 선택: $('#tving ~ li'), $('#tving').nextAll(), $('#tving').prevAll() - 형제 요소 선택 - 인접 형제 선택: $('#tving + li'), $('#tving').next(), $('#tving').prev() - 인접 형제 요소 선택
- 부모와 조상 선택: $('#tving-link').parent(), $('#tving-link').parents(), $('#tving-link').closest('ul') - 부모 또는 조상 요소 선택
실습 : 상태 선택자와 탐색 메소드를 이용한 체크박스 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상태 선택자 및 탐색 메소드 예시</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul class="options">
<li><input type="checkbox" id="option1"> 옵션 1</li>
<li><input type="checkbox" id="option2" checked> 옵션 2</li>
<li><input type="checkbox" id="option3"> 옵션 3</li>
</ul>
<button id="showChecked">선택된 항목 보기</button>
<script>
$(document).ready(function() {
$('#showChecked').click(function() {
const checkedOptions = $('.options input:checked');
checkedOptions.parent().css('color', 'green');
});
});
</script>
</body>
</html>
상태 선택자 (input:checked)와 탐색 메소드를 사용하여 체크된 항목을 선택하고, 해당 항목의 스타일을 변경
필터링 메소드
- 필터링 관련 선택자: $('#user-info tr:first'), $('#user-info tr:last'), $('#user-info tr:even'), $('#user-info tr:odd') - 첫 번째, 마지막, 짝수, 홀수 번째 요소 선택
- 필터링 메소드: $('#user-info tr').first(), $('#user-info tr').last(), $('#user-info tr').eq(3), $('#user-info tr').filter('.main'), $('#user-info tr').not('.main') - 특정 조건을 만족하는 요소 선택
실습 : 필터링 메소드를 이용한 테이블 행 스타일링
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>필터링 메소드 예시</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<table border="1" id="userTable">
<tr><th>이름</th><th>혈액형</th></tr>
<tr><td>홍길동</td><td>A형</td></tr>
<tr><td>김영희</td><td>B형</td></tr>
<tr><td>박철수</td><td>O형</td></tr>
</table>
<script>
$(document).ready(function() {
// 짝수 번째 행에 배경색 적용
$('#userTable tr:even').css('background-color', 'lightgray');
// 첫 번째 행 스타일 변경
$('#userTable tr:first').css('font-weight', 'bold');
// O형인 행에 빨간색 텍스트 적용
$('#userTable tr').filter(function() {
return $(this).children().eq(1).text() === 'O형';
}).css('color', 'red');
});
</script>
</body>
</html>
필터링 메소드 (tr:even, tr:first, .filter())를 사용하여 테이블의 특정 행을 스타일링하는 방법
이와 같은 jQuery의 다양한 선택자와 메소드를 활용하면, DOM 요소를 매우 효율적으로 선택하고 조작할 수 있습니다. 각 메소드는 특정한 요소들을 선택하거나 필터링하여 원하는 작업을 쉽게 수행할 수 있도록 도와줍니다.
