jQuery 5강 - input태그,태그속성을 이용하여 셀렉터 알아보기

웹개발강좌/jQuery

jQuery 5강 - input태그,태그속성을 이용하여 셀렉터 알아보기

개발로짜 2014. 11. 27. 22:00

jQuery의 이전강좌에 간단하게 id,class,태그별로 간단하게 셀렉터를 알아보았습니다.

2014/11/11 - [웹개발강좌/jQuery] - jQuery 2강 - jQuery 자주 사용되는 id,class,태그별 셀렉터 맛보기

추가로 몇가지 셀렉터를 이용하여 태그엘리먼트를 찾아보고 추가로 셀렉터 + jQuery 필터를 이용하여

엘리먼트태그들을 찾아보도록 하겠습니다.

추가 셀렉터 알아보기

이전 포스팅에 html 태그를 이용하여 value출력을 해본 적이 있습니다.

만약 input 태그의 값을 찾고자 할경우, input 태그의 타입이 checkbox,text,password 등 여러가지가 있으므로 $("input").val()로는

정확한 값을 출력하기 어렵습니다.

속성값을 이용한 셀렉터를 알아보도록 하겠습니다.

예들들기위하여 HTML 태그와 스크립트코드를 하단 처럼 작성한 다음 실행해보도록 하겠습니다.

<input type="checkbox" value="1"  /><br/>
<input type="text" id="txt" value="2"  /><br/>
<input type="text" data="txt2" value="3"/><br/>
<input type="password" class="pwd" value="4"/>

$(function(){
	var checkbox_val = $("input[type=checkbox]").val();
	//$("#txt").val()과 동일
	var text_val = $("input[id=txt]").val();
	var text_val2 = $("input[data=txt2]").val();
	//$(".pwd").val()과 동일
	var password_val = $("input[class=pwd]").val();
	alert(checkbox_val+","+text_val+","+text_val2+","+password_val);
})

위처럼 각 태그별 결과값이 하나의 alert창에 출력이 되었습니다.

속성별 셀렉터에 대한 문법은 다음과 같습니다.

$("태그[속성명=속성값]")

추가로 input 태그는 조금더 심플하게 지원이 가능합니다.

$(":input태그의type명")

예를들기 위해 코드를 재작성 해보겠습니다.

<input type="checkbox" value="11"  /><br/>
<input type="text" value="22"  /><br/>
<input type="password" value="33"/>

$(function(){
	var checkbox_val = $(":checkbox").val();
	var text_val = $(":text").val();
	var password_val = $(":password").val();
	alert(checkbox_val+","+text_val+","+password_val);
})