원하는 태그의 값(value) 확인&변경 - val(), attr(), prop(), html(), text()

원하는 속성, HTML 값 GET-SET

내가 원하는 태그 속성과 HTML 값을 확인하고 변경하기

val()

HTML tag 들의 value 를 가져오거나 입력할 때 사용하는 함수

<script type="text/javascript">
		$(function() {
			// document.getElementById("textId).value
			// id = #
			alert($("#textId").val()); // 출력 : text1

			$("#textId").val("text2"); // set
		});
</script>

<body>
		<input type="text" id="textId" value="text1"/><br/>
		<input type="hidden" id="hiddenId" value="hidden1"/><br/>
		<select id="selectId">
				<option value="select1">셀렉트1</option>
				<option value="select2">셀렉트2</option>
				<option value="select3">셀렉트3</option>
		</select>
</body>

attr()

HTML tag 의 속성(attribute) 값을 가져오거나 입력할 때 사용하는 함수

<script type="text/javascript">
		$(function() {
				// attr(”속성명”) // get
				// attr(”속성명”, “속성값”) // set

				alert($("#div1").attr("style")); // display: block 
				alert($("#div2").attr("class")); // testDiv
		
				$("#div1").attr("style", "color:red"); // set
				$("#div2").attr("style", "color:blue"); // set

				console.log($("#checkAll").attr("type")) // checkbox
				console.log($("#checkAll").attr("id")) // example
				console.log($("#checkAll").attr("checked")) // checked
		});
</script>

<body>
		<div id="div1" style="display: block">
				테스트1
		</div>
		<div id="div2" class="testDiv">
				테스트2
		</div>
		<div>
				<input type="checkbox" id="checkAll" value="check" checked>
				<label for="checkAll">CheckAll</label>
		</div>
</body>

prop()

JavaScript의 프로퍼티(Property) 값을 가져오거나 입력할 때 사용하는 함수

prop() 가 attr() 보다 약 2.5배 빠르다는 장점을 가진다.

<script type="text/javascript">
		$(function() {
				$("#checkAll").on("click", function() {
						$("#checkbox1").prop("checked", true); // false = 체크 해제
						$("#checkbox2").prop("checked", true);
						$("#checkbox3").prop("disabled", true); // false = 비활성화 해제
				});

				console.log($("#checkAll").prop("type")) // checkbox
				console.log($("#checkAll").prop("id")) // checkAll
				console.log($("#checkAll").prop("checked")) // false
		});
</script>

<body>
		<div>
				<input type="checkbox" id="checkAll" value="check">
				<label for="checkAll">CheckAll</label>
		</div>
		<div>
				<input type="checkbox" id="checkbox1" value="check">
				<label for="checkbox1">Checkbox1</label>
				<input type="checkbox" id="checkbox2" value="check">
				<label for="checkbox2">Checkbox2</label>
				<input type="checkbox" id="checkbox3" value="check">
				<label for="checkbox3">Checkbox2</label>
	</div>
</body>

html(), text()

html()
- 출력 : 셀렉터 하위에 자식 태그들을 태그와 문자열 모두 출력
- 입력 : 해당 HTML tag를 적용한다. (덮어쓰기)

text()

출력 : 셀렉터 하위에 자식 태그들의 문자열만 출력
입력 : HTML 코드 자체를 화면에 그대로 출력 시킨다. (HTML tag를 문자열로 취급)

<script type="text/javascript">
		$(function() {
				alert($("#node1").html()); // 출력 : <b>테스트3</b>

				// 덮어씌우기가 되어 <b>테스트3</b> 는 사라진다.
				$("#node1").html("<h1>테스트4</h1><h2>테스트5</h2>") // set

				alert($("#node1").text()); // 출력 : 테스트3

				// 아이디가 node2인 div 태그 안에 택스트로 들어간다.
				$("#node2").text("<h1>테스트4</h1><h2>테스트5</h2>") // set
		});
</script>

<body>
		<div id="node1">
				<b>테스트3</b>
		</div>
	
		<div id="node2"></div>
</body>