jQuery로 요소의 값처리 및 상태변경

앞의 글 "jQuery 선택자 사용하기" 에서 작업을 위한 요소를 선택하는 방법에 대해 알아 봤습니다. 필요한 요소가 선택이 되었다면 그 요소의 값을 얻거나, 변경하고, 상태를 변경 하는 작업을 어떻게 하는지 알아보겠습니다.

 

들어가기에 앞서 선택된 요소 집합을 다루는데 대한 공통된 사항을 알아 봅시다. 선택된 요소 집합이라고 말하는 이유는 선택자에 의해 선택된 요소가 없을수도 있고, 하나이상일 수도 있기 때문입니다.

 

그래서 선택된 요소가 있는지 확인하고 위해서는 .length 를 사용해서 선택된 요소의  갯수를 확인해야 합니다.

 

 

1. 선택된 요소의 값을 얻고, 변경하기

 

.html() - 일치하는 요소 집합에서 첫 번째 요소의 HTML 컨텐츠를 가져 오거나, 일치하는 모든 요소의 HTML컨텐츠를 설정합니다. 이 함수는 xml 문서에서는 사용될 수 없습니다. 선택된 모든 요소의 값을 확인하려면 .each() 함수를 사용해서 처리할 수 있습니다.

 

<div class="demoClass">
	<strong>테스트 DIV1</strong>
	<ul>
		<li>첫번째</li>
		<li>두번째</li>
	</ul>
</div>

<div class="demoClass">
	<strong>테스트 DIV2</strong>
</div>

// "<strong>테스트 DIV1</strong><ul><li>첫번째</li><li>두번째</li></ul>" 를 반환합니다.
$(".demoClass").html();

// 두 div의 내용을 <p>TEST</p> 로 변경합니다.
$(".demoClass").html("<p>TEST</p>");

 

.text() - 일치하는 모든 요소의 텍스트 및 CDATA 노드의 값을 합해서 반환합니다. 이 함수는 XML, HTML 에서 사용될 수 있습니다.

 

// "테스트 DIV1첫번째두번째테스트 DIV2" 를 반환합니다.
$(".demoClass").text();

// 두 div의 내용을 <p>TEST</p> 로 변경하는데, <p> 태그도 텍스트로 처리되어 그대로 보여집니다.
$(".demoClass").text("<p>TEST</p>");

 

.val() - 폼 요소들에 대해 일치하는 요소 집합의 첫 번째 요소의 현재 값을 가져 오거나 일치하는 모든 요소의 값을 설정합니다. 체크 박스의 체크 상태를 바꾸기 위해 사용할 수 는 없습니다.

 

<form id="testForm" name="testForm">
	<input type="hidden" name="num" value="2" />
	<input type="text" name="name" value="홍길동" />
	<input type="text" name="tel" value="123-4568" />
	<input type="radio" name="color" value="red" />
	<input type="radio" name="color" value="blue" checked="checked" />
	<input type="checkbox" name="hobby" value="bicycle" checked="checked" />
	<input type="checkbox" name="hobby" value="motorcycle" />
	<select name="combo">
		<option value="test1">test1</option>
		<option value="test2">test2</option>
		<option value="test3">test3</option>
	</select>
	<textarea name="content">TEST</textarea>
</form>

// 값을 가져온다.
$("input[type=hidden][name=num]").val(); // 2
$("input[type=text][name=name]").val();  // 홍길동
$("input[type=text][name=tel]").val();   // 123-4568
$("input[type=radio][name=color]:checked").val();    // blue - 체크된 값을 가져온다.
$("input[type=checkbox][name=hobby]:checked").val(); // bicycle - 체크된 첫번째 값을 가져온다.
$("select[name=combo]").val();     // test1
$("textarea[name=content]").val(); // TEST

// 값을 설정한다.
$("input[type=text][name=name]").val("아무개");

 

 

2. 선택한 요소의 속성(attribute)과 프로퍼티(property) 값을 가져오고, 변경하기

 

- 속성(attribute)은 태그의 body가 아닌 tag 자체에 이름="값" 형태로 사용되는 부분입니다. 아래 div 에서 속성은 class="demoDiv"가 되겠습니다.

 

<div class="demoDiv">TEST</div>

 

- 프로퍼티(property)는 html 태그가 브라우저에 의해서 DOM(Document Object Model)형태로  파싱되어진 상태에서의 속성입니다.

 

속성과 프로퍼티는 대부분의 경우 동일하게 사용되지만 몇몇 경우에는 다르게 동작하는 경우가 있습니다.

 

- 속성명과 프로퍼티 명이 다른경우가 있습니다. class 속성의 퍼로퍼티 명은 className 입니다.

- 아래와 같은 체크박스에서 checked 속성의 값은 문자열 "checked" 이지만, 프로퍼티는 불린(boolean) 형태로 true 가 값이 됩니다.

 

<input type="checkbox" checked="checked" />

 

jquery 1.6 이전에는 .attr() 메소드로 속성을 다뤘었는데, 1.6부터는 .prop() 메소드가 추가되어 속성과 프로퍼티를 명시적으로

분리하여 다룰 수 있도록 되었습니다.

 

.attr() - 선택된 요소 집합의 첫 번째 요소에 대한 속성 값을 가져 오거나 선택된 모든 요소에 대해 하나 이상의 속성을 설정합니다.

 

// 첫번째 div 태그의 class 속성 값을 가져옵니다.
$("div").attr("class");

// 모든 div 태그의 class 속성을 "testClass" 로 설정합니다.
$("div").attr("class", "testClass");

 

.prop() - 선택된 요소 집합의 첫 번째 요소에 대한 퍼로퍼티 값을 가져 오거나 선택된 모든 요소에 대해 하나 이상의 퍼로퍼티를 설정합니다.

 

// 이름이 hobby인 첫 번째 체크박스의 체크상태를 가져온다. true
$("input[type=checkbox][name=hobby]").eq(0).prop("checked");

// 이름이 hobby인 두 번째 체크박스의 체크상태를 가져온다. false
$("input[type=checkbox][name=hobby]").eq(1).prop("checked");

// 두 번째 체크박스의 체크상태를 true 로 변경한다.
$("input[type=checkbox][name=hobby]").eq(1).prop("checked", true);

 

※ 추가

PHP를 사용해서 폼을 생성할 때만 사용하는 입력 필드의 배열 표기법이 있습니다. 다음 예는 이름을 배열 형태로 입력하는 예제 코드 입니다.

 

<input type="text" name="name[]" />
<input type="text" name="name[]" />
<input type="text" name="name[]" />

 

이 경우 jQuery 를 사용하여 값을 읽는 방법입니다.

 

var names = $("input[type=text][name='name[]']");
var i = 0;
$(names.get(i)).val();