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).[여기에 쓸 수 있음]

results matching ""

    No results matching ""