[jQuery] 속성, 내용, 스타일, 데이터 조회 및 변경

안녕하세요. 이번 시간에는 선택한 태그의 속성이나 내용, 스타일, 데이터를 조회하거나 변경하는 방법에 대해 알아보겠습니다. 다음과 같은 태그가 있다고 가정합니다. 상응하는 순수 자바스크립트 코드도 보여드리겠습니다.

<div id="zero" hidden="false" name="zero" class="babo" value="Hello" data-age="23">Content</div>

get

get 메소드는 제이쿼리 객체를 자바스크립트 객체로 다시 전환하는 역할을 합니다. get 메소드 안의 인자는 여러 개의 태그(클래스같은 경우 여러 개의 태그를 동시에 선택 가능) 중에 몇 번째 태그를 자바스크립트 객체로 전환할 건지 선택할 수 있게 해줍니다.

$('#zero').get(0); // <div id="zero"></div>

attr

attr 속성을 조회하거나 변경할 수 있는 메소드입니다. 인자를 하나만 주면 해당 속성의 값을 조회하고, 두 개를 주면 해당 속성의 값을 변경합니다. 아래의 prop 메소드도 보고 그 차이점을 꼭 알아두셔야 합니다.

$('#zero').attr('name'); // 'zero'
$('#zero').attr('name', 'hero'); // name 속성을 hero로 변경 
document.getElementById('zero').name = 'hero';

val

value 속성만을 다루는 메소드입니다. 인자가 없으면 value를 조회하고, 인자가 있으면 그 값으로 value를 바꿉니다.

$('#zero').val(); // 'zero'
$('#zero').val('hero'); // value를 hero로 변경
document.getElementById('zero').value = 'hero'

prop

attr과 유사하지만 속성중에 true/false 값을 가지는 속성들만을 위한 메소드입니다. 대표적인 예로 hidden, readonly, checked 등의 속성이 있습니다.

$('#zero').prop('hidden'); // false
$('#zero').prop('hidden', true); // hidden 속성의 값을 true로 변경
document.getElementById('zero').hidden = true;

addClass

클래스를 추가하는 메소드입니다.

$('#zero').addClass('genius');
document.getElementById('zero').classList.add('genius')

removeClass

클래스를 제거하는 메소드입니다.

$('#zero').removeClass('genius');
document.getElementById('zero').classList.remove('genius');

toggleClass

해당 클래스가 있으면 지우고, 없으면 만듭니다.

$('#zero').toggleClass('genius'); // genius 추가
$('#zero').toggleClass('genius'); // genius 삭제
document.getElementById('zero').classList.toggle('genius')

html

innerHTML과 같습니다. 

$('#zero').html(); // Content
$('#zero').html('Changed'); // 내용을 Changed로 변경
document.getElementById('zero').innerHTML = 'Changed';

text

textContent를 바꿉니다. innerHTML과는 달리 태그를 넣을 수는 없습니다.

$('#zero').text(); // Content
$('#zero').text('TextChanged'); // 내용을 TextChanged로 변경

css

스타일 속성을 조회하거나 변경합니다. 인자를 하나만 주면 해당 스타일 속성값을 조회하고, 두 개를 주면 해당 값으로 변경합니다. 두 개의 인자를 따로 주는 대신에 하나의 객체를 인자로 넘겨 여러 스타일을 동시에 바꿀 수 있습니다.

$('#zero').css('width'); // 465px
$('#zero').css('width', 300); // 300px로 변경
$('#zero').css({ width: 300, height: 300 }); // 여러 스타일 동시 변경
document.getElementById('zero').style.width = '300px';

height

태그의 높이를 알려줍니다.

$('#zero').height();
document.getElementById('zero').style.height;

width

태그의 너비를 알려줍니다.

$('#zero').width();
document.getElementById('zero').style.width;

position

태그의 상대적인 위치를 알려줍니다.

$('#zero').position(); // { left: 값, top: 값 }
var el = document.getElementById('zero');
{ left: el.offsetLeft, top: el.offsetTop }

data

마지막으로 태그에 데이터를 조회하거나 저장하는 방법입니다. html5에서는 태그에 데이터를 저장할 수 있습니다. data-age, data-name 처럼 data- 접두어를 붙이면 됩니다. 이렇게 만들어진 데이터는 data 메소드로 가져올 수 있습니다.

$('#zero').data('age'); // 23
$('#zero').data('age', 24); // 24로 data-age를 24로 변경
document.getElementById('zero')['data-age'] = 24; 

출처 : https://www.zerocho.com/category/jQuery/post/57a9d6266a275815008d9a9f