내용이 안 보인다면 쿠키/캐시를 지우고 새로고침 하세요!
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌4 - jQuery - 2년 전 등록

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

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

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

<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; 

다음 시간에는 제이쿼리 유틸에 대해 알아보겠습니다.

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

아직 댓글이 없습니다.