[Front end] jQuery 선택자

 

jQuery에서는 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지도 사용할 수 있다. 이러한 비표준 선택자를 사용하면 선택한 요소를 저장하거나, 그 결과에 대해 필터링까지 할 수 있다.

선택한 요소를 변수에 저장

jQuery에서는 선택한 요소들을 변수에 저장하여 사용할 수 있다.

<ul>
    <li>바나나</li>
    <li>레몬</li>
    <li>수박</li>
</ul>

const fruits = $('li');
$('#length').text('과일의 종류는 총 ' + fruits.length + '가지 입니다.');

 

선택한 요소를 필터링

jQuery에서는 선택한 요소 중에서 더욱 세분화된 선택을 하기 위한 필터링을 진행할 수 있다.

<ul>
    <li>바나나</li>
    <li><b>레몬</b></li>
    <li>수박</li>
</ul>

$('li:has(b)').append(' - 추천 과일입니다.');

 

input 요소의 선택

jQuery에서는 입력 양식에 관련된 특정 요소를 손쉽게 선택할 수 있다.

<div><input type="checkbox" id="banana"><label for="banana">바나나</label></div>
<div><input type="checkbox" id="remon"><label for="remon">레몬</label></div>
<div><input type="checkbox" id="watermelon"><label for="watermelon">수박</label></div>

var checked = $(":checked");
$("#count").text("선택한 과일은 총 " + checked.length + "가지 입니다.");