이번장은 간단하게 공백제거 함수와 반복문에 대하여 알아보도록 하겠습니다.

$.trim() 공백제거함수

문자열 혹은 text와 같이 공백이 들어있을경우 

데이터 전송시 문제가 발생할 일이 가끔 발생이 되곤합니다.

양쪽공백을 제거하기 위하여 $.trim()함수를 이용하여 

공백을 제거할 수 있습니다.

<input type="text" value="        aaaaa            "/>

$(function(){
	var value1 = '      abc     ';
	var value2 = $(":text").val();
	//공백제거 전
	alert("value1 : " + value1+"\n"+"value2 : " + value2);
	
	value1 = $.trim(value1);
	value2 = $.trim(value2);
	//공백제거 후
	alert("value1 : " + value1+"\n"+"value2 : " + value2);
})

위 예제는 공백이 존재하는 변수 value1값과 text태그에 양쪽 공백이 존재하는 값을 

value 속성에 정의한 후 alert으로 각 출력을 해보았습니다.

위처럼 trim 함수를 이용하여 양쪽 공백을 모두 제거해보았습니다.

$.each / $("selector").each

이번에는 each 문법을 이용하여 동일 엘리먼트 및 

json객체의 값들을 출력해보도록 하겠습니다.

동일한 class명칭 및 같은 엘리먼트들과 같이 하나가 아닌 

두개이상일 경우 사용되는 문법입니다.

다음 동일한 text 태그 여러개를 태그로 만들어 본 후 

each문을 이용하여 text태그들의 값을 출력해보도록 하겠습니다.

HTML태그

<input type="text" value="a"/><br/>
<input type="text" value="b"/><br/>
<input type="text" value="c"/><br/>
<input type="text" value="d"/>

jQuery코드

$(function(){
	$(":text").each(function(index){
		//방법 1
		console.log("this",$(this).val());
		//방법 2
		console.log("text eq",$(":text").eq(index).val());
	})
})

위처럼 각 index별로 콘솔에 값이 출력되었습니다.

위 console명령을 이용하여 2가지 방법으로 값들을 출력해보았습니다.

$("셀렉터").eq(index).val()

each문의 첫번째 값은 index값을 의미하고 두번째 값은 object를 의미하는것이지만 엘리먼트 each문에서는 무의미합니다.

$(this).val()

$("셀렉터").each({}) 내에서 $(this)를 주게 되면 현재 반복이 위치하는 엘리먼트를 의미합니다.

이어서 json과 같은 object 타입을 each문을 이용하여 출력해보도록 하겠습니다.

기존 body태그의 엘리먼트는 필요가 없으며 스크립트 코드를 다음과 같이 대체합니다.

$(function(){
	var json = [{
					data : 'a'
				},{
					data : 'b'
				},{
					data : 'c'
				}]
	$.each(json,function(index,object){
		console.log(index,object.data);
	})
})

엘리먼트가 아닌 노드에서는 $.each문의 첫번째 입력값으로 json 배열값을 , 

두번째 입력값을 이전 each문과 동일한 function을 지정해주면 되겠습니다.

현재는 이해가 정확히 가지 않으시겠지만 

이후 다른 샘플을 진행하면서 이해를 돕도록 하겠습니다.

by 개발로짜

이번에는 지정 엘리먼트로부터 찾고자 하는 태그를 찾기위하여 Traversing에 대하여 알아보도록 하겠습니다.

"왜 쓰는가 그냥 찾고자 하는 엘리먼트에 id 값이나 class 값 또는 셀렉터를 이용하여 사용하면 되지 않느냐" 라고 의아해하시는 분들이 계실겁니다.

하지만 프로젝트를 진행하시다 보면 Traversing을 이용하여 작성 할 경우가 상당히 많습니다.

몇가지만을 예로들어서 포스팅하도록 하겠습니다.

$("selector").eq("index")

지정된 인덱스로 일치하는 엘리먼트들의 집합을 줄인다

$("selector").find("childSelector")

셀렉터에의해 필터링된 객체 또는 엘리먼트와 일치하는 요소의 자식엘리먼트 얻기

$("selector").parent()

셀렉터에의해 필터링된 영역으로부터의 부모노드를 가져오기

$("selector").prev()

셀렉터에의해 필터링된 영역에 있는 엘리먼트의 이전형제노드 가져오기

$("selector").next()

셀렉터에의해 필터링된 영역에 있는 엘리먼트의 다음형제노드 가져오기

상단 샘플구조는 다음과 같습니다.

상단 이미지들을 코드로 다시 작성하여 하나씩 설명해보도록 하겠습니다.

Body태그내 HTML 코드

<table>
	<tr>
		<td>
			첫번째 tr의 첫번째 td
		</td>
		<td>
			첫번째 tr의 두번쩨 td
		</td>
	</tr>
	<tr>
		<td>
			두번째 tr의 첫번쩨 td
		</td>
		<td>
			두번째 tr의 두번쩨 td
		</td>
	</tr>
</table>

Traversing별 스크립트 코드

$(function(){
	//eq() traversing
	alert($("tr").eq(0).html());
	alert($("tr").eq(1).html());
	
	//find() traversing
	alert($("tr").eq(0).find("td").eq(0).html());
	alert($("tr").eq(1).find("td").eq(0).html());
	
	//parent() traversing(둘다 같은 부모를 찾는 코드이므로 결과값 동일)
	alert($("tr").eq(0).parent().html());
	alert($("tr").eq(1).parent().html());
	
	//prev() traversing
	alert($("tr").eq(0).find("td").eq(1).prev().html());
	alert($("tr").eq(1).find("td").eq(1).prev().html());
	
	//next() traversing
	alert($("tr").eq(0).find("td").eq(0).next().html());
	alert($("tr").eq(1).find("td").eq(0).next().html());
})

위코드에 대한 작성이 완료되었다면 실행을 해보도록 하겠습니다.

$("selector").eq(index).html()

해석 : 선택된 엘리먼트의 index번째에 있는 HTML 태그

$("selector").eq(index).find("childselector").eq(childindex).html()

해석 : 선택된 엘리먼트의 index번째내에서 자식엘리먼트의 childindex번째에 있는 HTML 태그

$("selector").eq(index).parent().html()

해석 : 선택된 엘리먼트의 index번째의 노드를 감싸는 부모노드내에 존재하는 HTML 태그

$("selector").eq(index).find("childselector").eq(childindex).prev().html()

해석 : 선택된 엘리먼트의 index번째내에서 자식엘리먼트의 childindex번째의 엘리먼트중 이전 형제노드의 html 태그

$("selector").eq(index).find("childselector").eq(childindex).next().html()

해석 : 선택된 엘리먼트의 index번째내에서 자식엘리먼트의 childindex번째의 엘리먼트중 다음 형제노드의 html 태그

코드를 응용하여 다른 샘플을 만들어서 Traversing에 대하여 습득을 해보도록 합니다.

by 개발로짜

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 개발로짜