Attribute
오브젝트는 Attribute 를 갖는다. (member 라고도 한다.)
당연히 DOM 객체 에서도 객체를 갖는다.
J-Query 에서는JS 와 마찬가지로 이 속성을 다룰 수 있다.
<input type="text" value="텍스트 박스"> 가 있을 때
text 타입은 → attr("type") 가 될 수 있고, value="텍스트 박스" 값은 → val() 로 가져오거나 특정 값을 줄 수 있다. (수정)
<p> 안녕 하세요 <b>반갑습니다.</b></p> 의 경우에는
text(), html() 로 속성을 가져오거나 특정 값을 줄 수 있다. (수정)
✨ 속성 가져오기
$(셀렉터).attr("지정속성"): 해당 요소의 지정된 속성을 가져온다.$(셀렉터).val(): 해당 요소의 값(value)을 가져온다.$(셀렉터).text(): 해당 요소의 텍스트 값을 가져온다. (내부 html 태그 미포함)$(셀렉터).html(): 해당 요소의 텍스트 값을 가져온다 (내부 html 태그 포함)
✨ 속성 값 변경하기
Attribute 를 변경할 때에는
$(셀렉터).attr("지정속성", "변경내용"): 해당 요소의 지정된 속성을 변경한다.$(셀렉터).val("변경내용"): 해당 요소의 값(value)을 변경한다.$(셀렉터).text("변경내용"): 해당 요소의 텍스트 값을 가져온다. (내부 html 태그 미포함)$(셀렉터).html("변경내용"): 해당 요소의 텍스트 값을 가져온다 (내부 html 태그 포함)
text() 함수와 html() 함수로 가져오는 것에 차이는
text() : 문자만 가져온다. (html 태그 무시)
html() : 태그까지 모두 가져온다.
값을 넣어줄 때 차이는
text() : html 태그도 문자로 본다.
html() : html 태그를 적용한다.
값을 가져오는 경우
var txt = $('p').text();
var html = $('p').html();
console.log(txt + ' : ' + html);
값을 넣어주는 경우
$('#txt').text('<h1>HTML 과 TEXT의 차이</h1>');
$('#html').html('<h1>HTML 과 TEXT의 차이</h1>');
✅ 사용 예시
속성을 가져와 값을 변경하는 것을 학습하기 위해 먼저 html 코드를 작성해보자!
<body>
<input type="text" value="some text"/>
<p>문자가 쓰여진 <b>강조된</b> 영역</p>
<span id="txt"></span>
<span id="html"></span>
<fieldset>
<legend>숫자 입력</legend>
range(0~100) : <input type="range" min="0" max="100" value="30" step="1"/> <br/>
당신이 선택한 값 : <span id="msg">30</span>
<br/>
<button id="inc">증가</button>
<button id="dec">감소</button>
</fieldset>
<fieldset>
<legend>라디오버튼</legend>
<div>
<input type="radio" name="front" value="HTML"/> HTML
</div>
<div>
<input type="radio" name="front" value="CSS"/> CSS
</div>
<div>
<input type="radio" name="front" value="JS"/> JS
</div>
<span id="selected">선택값없음</span>
</fieldset>
</body>❕ 해당 html 코드에서 input 태그의 type이 속성이 range인 요소를 가져와
마우스로 range 바를 움직이면 그 값이 아래 span 태그에 노출되도록 코드를 작성해보자!
$('input[type="range"]').on('mousedown', function(){
$(this).on('mousemove', function(){
var val = $(this).val();
$('#msg').html(val);
});
});
$('input[type="range"]').mouseup(function(){
$(this).off('mousemove');
})❕ 이번에는 증가, 감소 버튼을 눌렀을 때 값이 변경되는 코드를 작성해보자
$('button').click(function(){
var i = $('input[type="range"]').val();
if($(this).attr('id') == 'inc'){
i++;
}else{
i--;
}
var val = $('input[type="range"]').val(i);
$('#msg').html(i);
});❕ 마지막으로 radio에 있는 값을 선택하면 아래 있는 span에 그 값이 노출되는 코드를 작성해보자
$('input[type="radio"]').on('click', function(e){
console.log(this, e);
$('#selected').html($(this).val());
});이렇게 요소에 있는 특정 속성을 가져와 값을 변경할 수 있다.
