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); })
정상적으로 값이 출력되었습니다.
주로 사용되는 필터 셀렉트를 몇가지 정리해보았습니다.
$("element:first") : 엘리먼트의 첫번째 셀렉터
$("element:last") : 엘리먼트의 마지막 셀렉터
$("element:even") : 엘리먼트의 짝수 셀렉터
$("element:odd") : 엘리먼트의 홀수 셀렉터
$("element:eq(index)") : 엘리먼트의 인덱스 셀렉터(첫번째 = index값이 0부터 시작)
지금까지 설명한 셀렉터외에 좀더 많은 종류를 확인하고자 하신다면 하단 링크를 참고해주세요
http://api.jquery.com/category/selectors/
다음장은 jquery의 Traversing 이라는 것을 이용하여 특정엘리먼트로부터 원하는 위치의 태그를 검색해보도록 하겠습니다.
by 개발로짜
jQuery 7강 - 공백제거(trim) 및 반복문(each)에 대하여 간단하게 알아보자 (2) | 2014.12.02 |
---|---|
jQuery 6강 - (Traversing) 특정 태그로부터 다른 태그의 위치 찾아보기 (2) | 2014.12.01 |
jQuery 4강 - attr() vs prop() 함수의 차이점을 비교하여 알아보자 (4) | 2014.11.15 |
jQuery 3강 - html() vs text() 함수 차이점 알아보기 + val() 함수를 이용한 input 태그의 값 확인 추가 (0) | 2014.11.12 |
jQuery 2강 - jQuery 자주 사용되는 id,class,태그별 셀렉터 맛보기 (0) | 2014.11.11 |