[jQuery] 엘리먼트 조정 (퍼옴)

어트리뷰트 값 설정하기

attr() 커맨드는 일치하는 집합에서 첫 번째 엘리먼트에 있는 어트리뷰트 값을 가져오거나
일치하는 모든 엘리먼트에 있는 어트리뷰트 값을 설정하는데 사용한다.

• attr(name) - 일치하는 집합의 첫 번째 엘리먼트에서 매개변수로 명시된 어트리뷰트의 값을 얻는다.
• 매개변수 - name:(String)값을 가져올 어트리뷰트의 이름
• 반환값 - 첫 번째로 일치하는 엘리먼트의 어트리뷰트 값. 일치하는 것이 없을 경우 undefined를 반환

위의 커맨드를 예제로 들기 위해 임의의 <img> 태그를 설정하자.

 
<img id="myImage" src="image.jig" class="someClass" title="image1" />

이 때 위의 이미지에서 'title'의 값을 가져오고 싶다면 아래와 같은 코드처럼 사용하면 된다.
 
$('#myImage').attr('title') 
 
 
attr() 커맨드는 매개변수에 무엇이 들어가는냐에 따라 다른 결과를 가져오게 된다.
위에서는 어트리뷰트 값을 가져오는데 사용되었다면 아래에서는 해당 어트리뷰트의 값을 설정하는데 사용된다.

• attr(name, value) - 매개변수에 전달된 값을 이용해 확장 집합의 모든 엘리먼트에 해당 어트리뷰트 이름의 값을 설정한다.
• 매개변수 - name: (String)값을 가져올 어트리뷰트의 이름
                       value: (String|Object|Function)어트리뷰트 값을 명시한다. 값을 반환하는 자바스크립트 표현식이나 함수를 사용할 수 있다.
• 반환값 - 확장집합

위의 커맨드를 사용하는 예제를 보게 되면 아래와 같다.
 
$('*').attr('title',function(index){ 
       return '나는 '+ index +'번 엘리먼트이고 내 이름은 '+ (this.id?this.id:'unset') +'이다';
});



어트리뷰트 값을 설정하는 두번째 방법은 아래와 같이 Object를 이용하여 다수의 어트리뷰트를 설정하는 것이다.

• attr(attributes) - 일치하는 집합 내의 모든 엘리먼트에 매개변수로 전달된 객체로 명시한 어트리뷰트와 값을 설정한다.
• 매개변수 - attributes: (Object)확장 집합의 모든 엘리먼트에 어트리뷰트로 설정되는 프로퍼티를 지닌 객체
• 반환값 - 확장집합

위의 방법을 써서 확장 집합에 속한 모든 엘리먼트에 다수의 어트리뷰트를 빠르게 설정할 수 있다. 예제는 다음과 같다.
 
$('input').attr(
{value: '',
title: '마음대로'}
); 


어트리뷰트 제거하기

jQuery에서는 DOM 엘리먼트에서 어트리뷰트를 제거하는데 removeAttr() 커맨드를 사용한다.

• removeAttr(name) - 일치하는 모든 엘리먼트에서 명시된 어트리뷰트를 제거한다.
• 매개변수 - name: (String)삭제할 어트리뷰트 이름
• 반환값 - 확장집합

엘리먼트 스타일 변경하기

DOM 엘리먼트에서 클래스명을 나타내는 어트리뷰트와 프로퍼티는 의미가 고유하며, 
풍부한 사용자 인터페이스를 개발하는 데 매우 중요하다.
엘리먼트에 여러 클래스를 할당하려면 클래스명을 고유하게 만들어야 한다. 예를 들어 다음과 같다.

<div class="someClass anotherClass yetAnotherClass"> </div> 

DOM 엘리먼트의 className 프로퍼티는 클래스명을 다음 배열이 아니라 공백으로 구분된 문자열이다.
따라서 이를 수정하고 제거하는데는 번거로운 작업을 요하게 된다. 이를 jQuery에서는 한방에 해결해 준다.

• addClass(names) - 매개변수로 전달된 하나 이상 되는 클래스명을 확장 집합의 모든 엘리먼트에 추가한다.
• 매개변수 - names: (String)클래스명을 포함하는 문자열, 여러 클래스명을 추가할 때는 공백으로 구분한다.
• 반환값 - 확장집합

클래스명을 삭제하려면 removeClass() 커맨드를 사용한다.

• removeClass(names) - 매개변수로 전달된 하나 이상되는 클래스명을 확장 집합에 있는 모든 엘리먼트에서 제거한다.
• 매개변수 - names: (String)클래스명을 포함하는 문자열, 다수의 클래스명을 제거하는 경우 공백으로 구분한다.
• 반환값 - 확장집합

종종 두 스타일을 번갈아 가면서 적용할 때가 있다. 바로 두 가지 상태를 번갈아 표현하려는 경우와 인터페이스에서 필요한 경우다.
이를 jQuery에서는 toggleClass() 커맨드를 지원하여 이러한 상황을 간단히 해결한다.

• toggleClass(name) - 매개변수로 전달된 클래스명이 엘리먼트에 존재하지 않으면 추가하고, 존재한다면 제거한다.
• 매개변수 - name: (String)토글 대상 클래스명을 포함하는 문자열
• 반환값 - 확장집합

위의 활용 예는 아래와 같이 함수를 이용해 사용할 수 있겠다.(예제보기)

// 함수부분 
function swap(){
$('tr').toggleClass('striped'); }
 
// 이벤트 적용부분
<table onmouseover="swap();" onmouseout="swap();"> 
 


스타일 얻고 설정하기

엘리먼트의 클래스를 변경하여 미리 정의되어 있는 스타일시트에서 적용할 스타일을 선택할 수 있지만,
때로는 스타일시트를 완전히 재정의하고 싶을 때가 있다. 스타일을 엘리먼트에 직접 적용하면 자동으로
스타일시트가 재정의된다. 따라서 각 엘리먼트의 스타일을 좀 더 세밀하게 조작할 수 있다.

jQuery에서는 이를 CSS() 커맨드를 사용하여 활용할 수 있겠다.

• css(name, value) - 일치하는 각 엘리먼트에 name 매개변수의 CSS 속성을 value 값으로 설정한다.
• 매개변수 - value: (String|Number|Functioin)프로퍼티 값을 포함하는 문자열, 숫자, 함수.
• 반환값 - 확장집합

예를 들어 확장 집합에 있는 모든 엘리먼트의 폭을 다음과 같은 코드로 확장할 수 있다.
 
$("div.expandable").css("width", function(){
return $(this).width() + 20 + "px";
}); 

위의 사용보다 축약된 형태의 css() 커맨드는 아래와 같다.

• css(properties) - 매개변수로 전달된 객체에 키로 명시한 CSS 속성을 일치하는 엘리먼트의 해당 값으로 설정한다.
• 매개변수 - properties: (Object)확장 집합에 속한 모든 엘리먼트에 설정할 CSS 속성을 포함한 객체
• 반환값 - 확장집합