Verdana

HTML5에서는 해당 요소에서 사용자가 임의로 지정한 속성값을 활용할 수 있으며, 이를 Custom Data Attribute 라고 부른다.

이처럼 ‘data-‘를 앞에 붙여서 속성명을 지정하고 값을 부여하면 된다. 단 이때, 속성명에 대문자를 입력하면 자동으로 소문자로 변환되기 때문에, 기본적으로 소문자를 사용할 것이 권장된다. 아니, 소문자를 써야한다.

제이쿼리에서는 data() 함수를 이용하여, data 속성의 값을 출력하거나, data 속성의 값을 지정할 수 있다.

해당 data 속성을 지우기 위해서는 removeData 이용하여 제거할 수 있다.

간혹 데이터함수가 적용이 잘 안될때가 있다. attr 을 이용하여 처리할 수 있는 경우가 존재한다.

출처 : http://syasidev.com/?p=607

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

<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

결과

출처: http://mylife365.tistory.com/252 [변화에 적응하기]