jQuery 기본
기본 선택자
$('div').css('background-color', 'yellow');
어, 어디서 많이 본 것 아닌가? 그렇다. CSS와 같다.
입력 양식 필터링
| 선택자 형태 | 설명 |
|---|---|
| element:checked | 체크된 입력 양식 선택 |
| element:disabled | 비활성화된 입력 양식 선택 |
| element:enabled | 활성화된 입력 양식 선택 |
| element:focus | 초점이 맞춰져 있는 입력 양식 선택 |
| element:selected | option객체 중, 선택된 태그 선택 |
checked 사용방법
function clicked() {
alert($('input:checked').val());
}
<fieldset>
<legend>성별</legend>
<label>
<input type="radio" name='gender' value="M" onclick="check();">남
</label>
<label>
<input type="radio" name='gender' value="F" onclick="check();">여
</label>
</fieldset>
체크된 값을 alert로 띄워줍니다.
selected 사용방법
function check() {
var value = $('select > option:selected').val();
alert(value);
}
<select onchange="check();">
<option value="A">Apple</option>
<option value="B">Bag</option>
<option value="C">Cat</option>
<option value="D">Dog</option>
<option selected>Elephant</option>
</select>
선택된 값을 alert로 띄워줍니다.
필터 선택자
기본적인 필터 선택자
| 선택자 형태 | 설명 |
|---|---|
| element:odd | 홀수 번째에 위치한 객체를 선택 |
| element:even | 짝수 번째에 위치한 객체를 선택 |
| element:first | 첫 번째에 위치한 객체를 선택 |
| element:last | 마지막에 위치한 객체를 선택 |
<table>
<tr>
<td>번호</td>
<td>이름</td>
</tr>
<tr>
<td>1</td>
<td>배주웅</td>
</tr>
<tr>
<td>2</td>
<td>이찬희</td>
</tr>
<tr>
<td>3</td>
<td>김민준</td>
</tr>
<tr>
<td>4</td>
<td>박정진</td>
</tr>
</table>
$(document).ready(function() {
$('tr:odd').css('background-color', 'lightgray');
$('tr:even').css('background-color', 'yellow');
$('tr:first').css('background-color', 'black');
$('tr:last').css('background-color', 'white');
});
확장된 필터 선택자
| 선택자 형태 | 설명 |
|---|---|
| element:contains(문자열) | 특정 문자열을 포함하는 문서 객체를 선택 |
| element:eq(n) | n번째에 위치하는 문서 객체를 선택 |
| element:gt(n) | n번째 초과에 위치하는 문서 객체를 선택(greater than) |
| element:lt(n) | n번째 미만에 위치하는 문서 객체를 선택(less than) |
| element:has(h1) | h1 태그를 가지고 있는 문서 객체를 선택 |
| element:not(선택자) | 선택자와 일치하지 않는 문서 객체를 선택 |
| element:nth-child(3n+1) | 3n+1에 해당하는 문서 객체를 선택 (1, 4, 7...) |
참고로 eq(), first(), last()는 $(element).[여기에 쓸 수 있음]