jQuery element(요소)의 속성 관련 메서드 정리

요즘 하는 일이 바쁘다 보니 jQuery 정리하는 것이 뒷전으로 밀렸습니다.  잠시나마 시간을 내어 jQuery element 속성을 제어하는 메서드들에 대해 공부한 후 정리를 해놓으려고합니다. 이렇게 정리를 해두어야 필요할 때 바로 이용할 수 있습니다.(제가 정리를 잘 못합니다.)

 

 

먼저 HTML 문서의 속성을 제어하는 메서드입니다.

HTML element에서 이름을 제외한 나머지 요소는 모두 속성이 될 수 있습니다. 

 <img src="/images/reply.png" alt="답글" />이라는 HTML 태그가 있다면 src, alt는 모두 요소가 됩니다. 정의되지 않은 값을 사용자 임의로 넣어 사용 가능합니다.

(주의 : 사용자 정의 속성은 특별한 오류를 나타내지는 않지만, 간혹 웹브라우저(익스플로러,크롬,사파리,오페라 등) 특성으로 오류가 발생하는 경우가 있습니다.)

 

.attr()

 

 

 CSS 제어 메서드인 .css() 메서드와 이름만 다를 뿐, 동작하는 방법은 동일합니다.

  jQuery Document의 정의를 보면 

 

   "Get the value of an attribute for the first element in the set of matched elements." 
   "검색된 요소들 중 첫번째 속성의 값(value)를 가져온다"라고 번역할 수 있겠네요(제가 영어가 약합니다.)

 다음의 간단한 예제를 보시면 쉽게 이해를 하실 수 있습니다.

 

<p>
     jQuery attribute 메서드  <em title="huge, gigantic">.attr() 설명</em> 입니다.
</p>

  타이틀 강조는 :<div></div>

<script>
var title = $("em").attr("title");  ==> em요소의 title 속성을 가져옵니다.
  $("div").text(title);               ==> div 요소에 출력을 합니다. 이글 아래에서 설명
</script>

 

 

결과 :
 타이틀 강조는 : huge, gigantic

 

요소에 속성값을 설정하기 위해서는  .attr(attributename, value)을 사용합니다.

 

<img id="greatphoto" src="/images/photo-1.jpg" alt="photo1" />
$('#greatphoto').attr('alt', 'Photo one');   // img 요소의 alt 속성을 photo one을 변경합니다.

$('#greatphoto').attr('title', 'Photo by hong');  //img 요소의 title 속성을 phpto by hong으로 변경합니다.
$('#greatphoto').attr({ alt: 'Photo one',  title: 'photo by hong'});  // 두번에 걸쳐서 변경 했던 것을 array를 사용하여 한번에 변경합니다.

 

속성값을 설정할 경우 해당 속성이 존재하면 기존 속성에 덮어쓰기를 하며, 속성이 존재하지 않을 경우에는 새로운 속성을 할당하게 됩니다.

 

.removeAttr()

 

  jQuery.com의 정의를 보면

 "Remove an attribute from each element in the set of matched elements."
 일치하는 요소들의 집합에서 각 요소들로 부터 속성을 제거( 번역이 이상하다 흉보지 마시기를.....)

    간단하게 설명하면 선택된 요소에서 속성을 제거하는 메서드라고 생각하시면 됩니다.

 

  attr()메서드를 통해서 속성값을 추가, removeAttr() 메서드를 사용하여 해당 속성에 대한 이름과 값을 제거할 수 있습니다.

 

 

.val() 

 

 

  선택된 요소의 값을 가져오는 메서드입니다.  jQuery에서 input, select, textarea 등의 요소에서 value(값)에 해당되는 값을 가져오거나 설정을 할때 사용하는 메서드입니다.

 

자바스크립트의 document.getElementById("txtName").value; 와 동일한 역할을 합니다.

 

<input type="text" name="txtName" id="txtName" />
var name=$("#txtName").val();  // 입력된 값 가오기
$("#txtName").val("val을 이용한 입력하기"); // 값 입력하기

 

 

.text()/ .html() 

 

 

 

 

  선택된 요소의 text 또는 html을 가져오거나 지정하는 값으로 설정하는 메서드입니다.
  .text()와 .html()의 차이는 다음 예를 보시면 이해를 하실 수 있을 것입니다.

 

  .html() 

 

    <div class="container">
      <div class="box">컨텐츠를 표시할 박스입니다.</div>
    </div>

   $('div.container').html();  ==> 1

   $('div.container').text();  ==> 2

   
1의 결과는 

<div class="box">컨텐츠를 표시할 박스입니다.</div>

 

 이 출력될 것입니다.

2의  결과는

컨텐츠를 표시할 박스입니다.

 

출력될 것입니다.

 

 .text()와 .html()의 큰 차이점은 text()는 순수 text(문자열)을 가져오거나 지정하는 메서드 이며  .html()은 html 형태의 문자열을 가져오거나 지정하는 메서드라는 것입니다. 이것만 기억하면 사용하는데는 큰 어려움은 없을 것이라 생각합니다.