탐색 선택자

▶ 탐색 선택자

선택자로 이미 선택된 객체를 한번 더 검색하여 객체를 반환하는 방식

- $('선택자').first(): 선택된 객체 중 첫번째 객체 요소를 반환한다

- $('선택자').last(): 선택된 객체 중 마지막 객체 요소를 반환한다

- $('선택자').eq(index): 선택된객체 중 인수값의 조건과 일치하는 인덱스 요소를 반환한다.(배열처럼 사용)

- $('선택자').filter('선택자'): 선택된 객체 중 filter메서드의 선택자 값과 일치하는 객체를 선택해서 반환.

 

▶ 배열 관련 메서드

다중으로 선택된 객체를 반복문 형태와 비슷하게 풀 수 있다.

 

- $('선택자').each()

다중으로 선택된 객체를 하나씩 풀어 함수를 실행한다.

$('선택자').each(function(i){});
또는	
$.each($('선택자'),function(){});

 

- $('선택자').index(객체)

다중으로 선택된 객체 중 index 메서드의 인수 객체와 동일한 객체를 검색하여 인덱스를 반환한다.

$('article').click(function(){
    $('article').index(this);
})

 

▶ 속성 상태에 따른 선택자

선택된 객체의 상태를 표기하여 상태에 일치한느 객체를 선택하여 반환한다.

- $('선택자 :checked')

- $('선택자 :selected')

- $('선택자 :hidden')

 

▶ 속성 상태를 확인하는 메서드

- is('속성상태'): 속성 상태를 확인하는 메서드로 true 혹은 false 를 반환한다.

- prop('속성상태',true or false): 속성 상태를 확인하거나 적용하는 메서드. 위의 is보다 많이 쓰인다.

 

① 속성 상태 확인

<input type="checkbox" class="check" value="1"/>
<script>
  $('.check:checked');
  $('.check').prop('checked');
</script>

② 속성 상태 적용

<input type="checkbox" class="check" value="1"/>
<script>
  $('.check').prop('checked',true);  //체크 
  $('.check').prop('checked',false); //체크해제
</script>

---

탐색 선택자 실습

실습1) 속성 상태 확인하여 반전 상태를 적용하는 실습이다. (체크->체크해제, 체크해제->체크)

<input type="checkbox" class="check" value="1"/>
<input type="checkbox" class="check" value="2"/>
<input type="checkbox" class="check" value="3"/>
<button type="button" id="btn">확인</button>
<script>
$('#btn').click(function(){
	$('.check').each(function(){
		if($(this).prop('checked')){
			$(this).prop('checked',false);
		}else{
			$(this).prop('checked',true);
		}
	});
});
</script>