val() / attr('value')
attr('value', ) : 태그의 value 속성값(attribute)
val( ) : 입력된 property 값
<script>
$(function(){
console.log($('#txt').attr('value')); //test
console.log($('#txt').val()); //test
});
</script>
<input type="text" id="txt" value="test">
<button id="btn">실행</button>
val()은 value값을 읽어오는 것이다.
attr('value')도 value 속성값을 가져오는 것이다.
둘다 #txt 선택된 태그의 value값인 test가 출력된다.
$('#btn').click(function(){
console.log('---클릭이벤트---');
$('#txt').attr('value','111111');//태그 속성값
console.log($('#txt').attr('value'));
console.log($('#txt').val());
});
버튼을 클릭했을 때 attr으로 value값을 변경했다.
버튼을 클릭했을 때 111111 이라는 값을 확인하였다.
값을 바꾸고 클릭이벤트가 실행되었을 때 attr('value')는 111111그대로이고, val()은 내가 입력한 값으로 변경됨을 확인하였다.
attr('value')는 지정된 속성값(attribute) 을 가져오고, val()은 입력된 프로퍼티(property)값을 가져오기 때문이다.
$('#btn').click(function(){
$('#txt').val('111111');
console.log($('#txt').attr('value'));
console.log($('#txt').val());
})
이번에는 val으로 값을 변경하였다. 프로퍼티가 변경되는 것이고, value 속성값은 변경하지 않았기 때문에 처음에 지정해준 test 그대로 존재한다.
처음 버튼을 클릭해서 실행했을 때 프로퍼티를 111111으로 변경하였다.
입력내용을 변경하여도 클릭할 때마다 프로퍼티값이 111111으로 변경되기 때문에 해당값이 출력되고,
value 속성은 처음에 지정해주었던 test가 유지된다.
html() : innerHTML
text() : innerText
<script>
$(function(){
console.log($('#d3').html());
console.log($('#d3').text());
});
</script>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3">
<p>#d3 문단 내용</p>
<p>#d3 문단 내용</p>
</div>
html()과 text()를 비교하였다. html은 태그를 포함한 전체가 출력되고, text는 텍스트내용만 가져온 것이 확인된다.
$(function(){
$("#d1").html('<h2>제목태그</h2>');
$("#d2").text('<h2>제목태그</h2>');
});
h2태그가 포함된 값을 추가하여 비교했다.
html에는 h2 태그 속성이 적용되었고, text는 <h2>태그가 말그대로 텍스트로 입력되었다.
'WEB > jQuery' 카테고리의 다른 글
너비, 높이 - width, height / innerWidth, innerHeight / outerWidth, outerHeight (0) | 2022.06.20 |
---|---|
jQuery 좌표 : offset() , position() (0) | 2022.06.20 |
attr('class'), addClass, removeClass, toggleClass, hasClass - 적용된 클래스 조회, 클래스 추가, 클래스 삭제, 클래스 확인 (0) | 2022.06.20 |
attr : 속성 값 가져오기, 속성 추가 / removeAttr : 속성 제거 (0) | 2022.06.20 |
jQuery : 제이쿼리 선언 (local, cdn) / 선택자 (0) | 2022.06.17 |