[개발][jQuery] 속성 선택자 & 필터 선택자 정리

 안녕하세요. 소다맛사탕 입니다.

 오늘은 평소에 사용하려고 하면 이상하게 헷갈리고 정리가 되지 않은

 jQuery 속성 선택자와 필터 선택자에 대해 알아보겠습니다.

jQuery 메서드의 가장 기본 형태
$(선택자).메서드

 

1. 속성 선택자

기본 선택자 뒤에 붙여서 사용; $(선택자 형태).메서드;

선택자 형태	Description
요소[속성=값]	속성과 값이 같은 문서 객체 선택.
요소[속성|=값]	속성 안의 값이 특정 값과 같은 문서 객체를 선택.
요소[속성~=값]	속성 안의 값이 특정 값을 단어로 시작하는 문서 객체를 선택.
요소[속성^=값]	속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택.
요소[속성$=값]	속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택
요소[속성*=값]	속성 안의 값이 특정 값을 포함하는 문서 객체를 선택.

---

예시) 코드를 직접 써서 결과를 알아보세요.

var count = 0;
$(document).ready(function(){
	$("[name=btnAttr]").click(function(){
		count++;
		fncAttrSelectorTest(count);
	});
});
function fncAttrSelectorTest(count){
	if(count == 1){
		$('input[name=type1_sel01]').val("입력01");
	} else if(count == 2){
		$('input[type|=text]').val("입력02");
	} else if(count == 3){
		$('input[class~=type]').val("입력03");
	} else if(count == 4){
		$('input[name^=type2]').val("입력04");
	} else if(count == 5){
		$('input[name$=sel05]').val("입력05");
	} else if(count == 6){
		$('input[name*=sel]').val("입력06");
	} else {	// 초기화
		$('input').val("");
	}
}

<div style="text-align: center;">
	<input type="text" name="type1_sel01"></input>
	<input type="text" name="type1_sel02"></input>
	<input class="type inp_ct" type="text" name="type1_sel03"></input>
	<input type="text" name="type2_sel04"></input>
	<input type="text" name="type2_sel05"></input>
	<input type="text" name="type2_sel06"></input>
	<button type="button" name="btnAttr">클릭</button>
</div>

---

2. 필터 선택자

선택자 중에 : 기호를 포함하는 선택자; $(요소:필터 선택자).메서드;

2_1. input 태그 type 속성에 따른 필터 속성자

선택자 형태	Description
input:button	type이 button인 문서 객체와 button 태그를 선택.
input:checkbox	type이 checkbox인 문서 객체 선택.
input:file	type이 file인 문서 객체 선택.
input:image	type이 image인 문서 객체 선택.
input:password	type이 password인 문서 객체 선택.
input:radio	type이 radio인 문서 객체 선택.
input:reset	type이 reset인 문서 객체 선택.
input:submit	type이 submit인 문서 객체 선택.
input:text	type이 text인 문서 객체 선택

2_2. jQuery 이벤트에 따른 필터 속성자

선택자 형태	Description
요소:checked	input태그 중 type이 checkbox인 체크되어 있는 입력 양식 선택.
요소:disabled	스타일이나 기본 옵션에 비활성이 적용된 입력 양식 선택.
요소:enabled	활성화된 입력 양식 선택.
요소:focus	화면상 선택되어 있는 초점이 맞추어져 있는 입력 양식 선택.
요소:input	모든 입력 양식 선택(input 태그 뿐만아니라 textarea, select, button 태그)
요소:selected	option 객체 중 선택된 태그 선택.

---

예시) 코드를 직접 써서 결과를 알아보세요.

var count = 0;
$(document).ready(function(){
	$("[name=btnAttr]").click(function(){
		count++;
		fncFilterSelectorTest(count);
	});
});
function fncFilterSelectorTest(count){
	var value;
	if(count == 1){
		value = $("input:checked").val();
	} else if(count == 2){
		value = $("input:disabled").val();
	} else if(count == 3){
		$("#focusP").focus();
		value = $("input:focus").val();
	} else if(count == 4){
		value = $(":input").size();
	} else if(count == 5){
		value = $("option:selected").val();
	}
	setTimeout(function(){
		console.log(value);
	}, 1000);
}

<div style="text-align: center;">
	<input type="checkbox" name="chkInput">체크1</input>
	<input type="checkbox" name="chkInput" checked="checked" value="값!">체크2</input>
	
	<input type="hidden" name="hideInput" value="03" />
	<input type="text" name="hideInput" value="04" style="display: none">
	<input type="text" name="hideInput" value="05" disabled="disabled">
	
	<input type="text" id="focusP">이것은 포커스요!</input>
	
	<input type="text"></input>
	<textarea></textarea>
	<button></button>
	<select>
		<option>가</option>
		<option selected="selected">나</option>
		<option>다</option>
		<option>라</option>
	</select>
	
	<button type="button" name="btnAttr">클릭</button>
</div>

 

jQuery를 사용해서 개발을 진행하려면 선택자에 대해 잘 알아두어야 막힘없이 개발을 진행할 수 있습니다.

따른 사이트에도 선택자 사용법이 더 자세히 나와 있으므로 같이 참고 부탁드립니다.

 

※ 참조 :

https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors