1. 기본 선택자
전체 선택자 (Wildcard Selector)
- HTML 페이지에 있는 모든 문서 객체를 선택
- 문법 : *
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//문서 내 전체(*) 색을 빨강으로 지정
$('*').css('color', 'red');
});
</script>
태그 선택자
- 특정한 태그를 선택
- 문법 : 태그명
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//h1태그를 선택자로 선택 : $('h1')
//h1태그와 p태그를 선택자로 선택 : $('h2, p')
$('h1').css('color', 'blue');
$('h2, p').css('color', 'orange');
});
</script>
아이디 선택자
- 특정한 id 속성이 있는 문서 객체를 선택
- 문법 : #아이디명
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//아이디가 header1인 선택자의 색을 변경
$('#header1').css('color', 'red');
});
</script>
</head>
<body>
<h1 id="header1">Header</h1>
</body>
클래스 선택자
- 특정한 class 속성이 있는 문서 객체를 선택
- 문법 : .클래스명
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1.item').css('color', 'red'); //클래스명이 h1태그에서 item인것을 선택
$('.item1, .item2').css('color', 'blue'); //클래스명이 item1과 item2인것을 선택
$('.item.select').css('color', 'orange'); //클래스명이 item이면서select인것을 선택
$('.item.cc').css('color', 'gray'); //클래스명이 item이면서cc인것을 선택
});
</script>
</head>
<body>
<h1 class="item1">Header1</h1>
<h1 class="item2">Header2</h1>
<h1 class="item">Header</h1>
<h1 class="item">Header</h1>
<h1 class="item cc">Header</h1>
<h1 class="item select">Header</h1>
</body>
2. 자손 선택자와 후손 선택자
기본 선택자의 앞에 붙여 사용하며, 기본 선택자의 범위를 제한합니다.
자손 선택자
- 자손을 선택
- 문법 : '요소1' > '요소1'
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//body태그의 전체(*) 자손을 선택
$('body > *').css('color', 'red');
});
</script>
</head>
<body>
<div>
<ul>
<li>Dog</li>
<li>Cat</li>
<li>Pig</li>
</ul>
</div>
</body>
후손 선택자
- 후손을 선택
- 문법 : '요소1 요소2' 형태로 사용
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//body 태그의 전체(*) 요소를 선택
$('body *').css('color', 'red');
});
</script>
</head>
<body>
<div>
<ul>
<li>Dog</li>
<li>Cat</li>
<li>Pig</li>
</ul>
</div>
</body>
3. 속성 선택자
기본 선택자 뒤에 붙여 사용하며, 입력 양식과 관련된 태그를 선택할 때 사용합니다.
| 선택자 형태 | 설명 |
| 요소[속성=값] | 속성과 값이 같은 문서 객체를 선택 |
| 요소[속성|=값] | 속성 안의 값이 특정 값과 같은 문서 객체를 선택 |
| 요소[속성~=값] | 속성 안의 값이 특정 값을 단어로 시작하는 문서 객체를 선택 |
| 요소[속성^=값] | 속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택 |
| 요소[속성$=값] | 속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택 |
| 요소[속성*=값] | 속성 안의 값이 특정 값을 포함하는 문서 객체를 선택 |
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//input요소의 속성 값이 text인 선택자
$('input[type="text"]').val('Hello jQuery');
});
</script>
</head>
<body>
<input type="text"/>
<input type="password"/>
<input type="radio"/>
<input type="checkbox"/>
<input type="file"/>
</body>
4. 필터 선택자
선택자 중에 : 기호를 포함하는 선택자를 말합니다.
입력 양식 필터 선택자
- 속성 선택자 보다 간단한 방법으로 사용할 때 필터 선택자를 사용
- 기본 선택자 뒤에 사용
| 선택자 형태 | 설명 |
| 요소:button | input 태그 중 type 속성이 button인 문서 객체와 button 태그를 선택 |
| 요소:checkbox | input 태그 중 type 속성이 checkbox인 문서 객체를 선택 |
| 요소:file | input 태그 중 type 속성이 file인 문서 객체를 선택 |
| 요소:image | input 태그 중 type 속성이 image인 문서 객체를 선택 |
| 요소:password | input 태그 중 type 속성이 password인 문서 객체를 선택 |
| 요소:radio | input 태그 중 type 속성이 radio인 문서 객체를 선택 |
| 요소:reset | input 태그 중 type 속성이 reset인 문서 객체를 선택 |
| 요소:submit | input 태그 중 type 속성이 submit인 문서 객체를 선택 |
| 요소:text | input 태그 중 type 속성이 text인 문서 객체를 선택 |
| 요소:checked | 체크되어 있는 입력 양식을 선택 |
| 요소:disabled | 비활성화된 입력 양식을 선택 |
| 요소:enabled | 활성화된 입력 양식을 선택 |
| 요소:focus | 초점이 맞추어져 있는 입력 양식을 선택 |
| 요소:input | 모든 입력 양식을 선택 |
| 요소:selected | option 객체 중 선택된 태그를 선택 |
<!--hello_jQuery.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello_jQuery</title>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// setTimeout 일정 시간 후에 코드 실행
setTimeout(function() {
//select 태그중에 선택된 옵션 요소 선택
var value = $('select > option:selected').val();
alert(value);
}, 5000);
});
</script>
</head>
<body>
<select>
<option>Dog</option>
<option>Cat</option>
<option>Pig</option>
</select>
</body>
</html>
위치 필터 선택자
- 위치와 관련된 필터 선택자
| 선택자 형태 | 설명 |
| 요소:odd | 홀수 번째에 위치한 문서 객체를 선택 |
| 요소:even | 짝수 번째에 위치한 문서 객체를 선택 |
| 요소:first | 첫 번째에 위치한 문서 객체를 선택 |
| 요소:last | 마지막에 위치한 문서 객체를 선택 |
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('tr:odd').css('background', '#F9F9F9'); //tr태그 중 홀수번째에 있는 요소 선택
$('tr:even').css('background', '#9F9F9F'); //tr태그 중 짝수번째에 있는 요소 선택
$('tr:first').css('background', '#000000').css('color', '#FFFFFF'); //tr태그 중 첫번째에 있는 요소 선택
});
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td>이름</td>
<td>등번호</td>
</tr>
<tr>
<td>손흥민</td>
<td>7</td>
</tr>
<tr>
<td>매디슨</td>
<td>10</td>
</tr>
<tr>
<td>로메로</td>
<td>17</td>
</tr>
<tr>
<td>사르</td>
<td>29</td>
</tr>
<tr>
<td>비수마</td>
<td>8</td>
</tr>
<tr>
<td>포로</td>
<td>23</td>
</tr>
</tbody>
</table>
</body>
함수 필터 선택자
- 함수 형태의 필터 선택자
| 선택자 형태 | 설명 |
| 요소:contains(문자열) | 특정 문자열을 포함하는 문서 객체를 선택 |
| 요소:eq(n) | n번째에 위치하는 문서 객체를 선택 |
| 요소:gt(n) | n번째 초과에 위치하는 문서 객체를 선택 |
| 요소:has(선택 할 태그명) | 선택 할 태그가 있는 문서 객체를 선택 |
| 요소:lt(n) | n번째 미만에 위치하는 문서 객체를 선택 |
| 요소:not(선택자) | 선택자와 일치하지 않는 문서 객체를 선택 |
| 요소:nth-child(3n+1) | 3n+1번째에 위치하는 문서 객체를 선택 |
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('tr:eq(0)').css('background', '#000000').css('color', '#FFFFFF'); //tr태그 중 0번째 위치하는 요소
$('td:nth-child(2n+1)').css('background', '#565656'); //tr태그 중 2n+1번째 위치하는 요소
$('td:nth-child(2n)').css('background', '#F9F9F9'); //tr태그 중 2n번째 위치하는 요소
});
</script>반응형
'DEV > JavaScript & JQuery' 카테고리의 다른 글
| [JQuery] split 함수를 이용한 문자열 자르기와 예제 (0) | 2024.05.07 |
|---|---|
| [JavaScript] var, let, const (0) | 2024.04.22 |
| [AJAX] Ajax 비동기식 처리와 동기식 처리 (0) | 2023.07.10 |
| [JavaScript] 요일 구하기 (2) | 2023.04.04 |
| [JQuery] $(document).ready 와 $(document).on의 차이(Feat. $(document).ready가 동적 요소 제어하지 못할 경우) (0) | 2023.03.22 |
댓글