'Programming/jQuery'에 해당되는 글 7건

  1. 04-2.이벤트 모델
  2. 04-1.브라우저 이벤트 모델
  3. 03-3.엘리먼트 콘텐츠 설정
  4. 03-2.엘리먼트 스타일 변경
  5. 03-1.엘리먼트 프로퍼티와 어트리뷰트 조작

04-2.이벤트 모델

 jQuery 이벤트 모델

 

특징)
- 이벤트 핸들러를 할당할 수 있는 통합 메서드를 제공.
- 엘리먼트의 이벤트 타입마다 여러 핸들러를 할당할 수 있다.
- click, mouseover 같은 표준 이벤트 타입명을 사용.
- 핸들러의 매개변수를 써서 Event 인스턴스를 사용할 수 있다.
- 자주 사용하는 Event 인스턴스의 프로퍼티들에 일관된 이름을 사용.
- 이벤트 해제와 기본 행동을 막는 통합 메서드를 제공.
- 캡처 단계를 지원하지 못함
- 하나의 API로 표준 호환 브라우저와 인터넷 익스플로러를 모두 지원.


[ jQuery를 사용해 이벤트 핸들러 바인딩 ]

bind(eventType, data, listener) - 일치된 집합에 있는 모든 엘리먼트에 지정한 이벤트 타입의 핸들러로 전달된 함수를 할당.
- eventType : (String) 핸들러를 할당할 이벤트 타입의 이름. 이벤트명과 '.' 문자로 구분한 접미어를 추가한 이벤트 타입은 이름공간으로 사용할 수 있다.
- data : (Object) 핸들러 함수에서 사용하도록 Event 인스턴스에 data라는 프로퍼티로 제공되는 데이터. 생략하면 이벤트 핸들러가 두 번째 매개변수가 된다.
- listener : (Function) 이벤트 핸들러로 할당될 함수


예제)

  1. $('img').bind( 'click' , function(event) { alert('안녕!'); } );

설명) 페이지에 있는 모든 이미지에 click 이벤트 핸들러로 인라인 함수를 바인딩.

 


/* 이벤트 바인딩 그룹 */
- 이벤트 핸들러를 그룹으로 묶어주는 기능
- '.' 을 사용하여 이벤트 이름 뒤에 접미어를 붙여 이벤트 이름을 이름공간으로 사용.
- 이벤트 바인딩을 묶으면 이를 하나의 그룹 단위로 쉽게 제어할 수 있음.

 

예제)

  1. $('#thing1').bind('click.editMode', someListener);
    $('#thing2').bing('click.editMode', someOtherListener);
    ...
    $('#thingN').bing('click.editMode', stillAnotherListener);
  2. $('*').unbind('click.editMode');

설명) editMode라는 이름으로 모든 바인딩을 그룹으로 묶어 나중에 그룹 단위로 동작을 실행.
모든 바인딩을 제거하려면 unbind()를 사용


eventTypeName(listener) - 매개변수로 넘어온 함수를 메서드 이름으로 명명한 이벤트 타입의 핸들러로 할당.
- listener : (Function) 이벤트 핸들러로 사용할 함수

/* 지원가능한 커맨드 */
blur  focus  mousedown  resize
change  keydown  mousemove  scroll
click  keypress  mouseout  select
dblclick  keyup  mouseover  submit
error  load  mouseup  unload
이 단축 메서드를 사용할 때는 event.data 프로퍼티에 설정할 데이터 값을 지정할 수 없다.


one(eventType, data, listener) - 일치된 모든 엘리먼트에 지정한 이벤트 타입의 핸들러로 전달된 함수를 할당. 한 번 실행되면 자동으로 삭제.
- eventType : (String) 핸들러를 할당할 이벤트 타입의 이름.
- data : (Object) 핸들러 함수가 이용할 수 있도록 Event 인스턴스에 data라는 프로퍼티로 제공되는 데이터. 생략하면 핸들러가 두 번째 매개변수가 됨.
- listener : (Function) 이벤트 핸들러로 할당될 함수

- 이벤트 핸들러를 일회용으로 할당
- 이벤트 핸들러가 한 번 실행되고 나면 자동으로 이벤트 핸들러를 삭제.
- bind() 커맨드와 유사

 

 

[ 이벤트 핸들러 제거 ]

unbind(eventType, listener) - 확장 집합
unbind(event)
- 확장 집합의 모든 엘리먼트에서 전달된 매개변수에 따라 이벤트 핸들러를 선택적으로 제거.
- 매개변수를 제공하지 않으면 엘리먼트의 모든 리스터를 제거.
- eventType : (String) 매개변수를 제공하면 지정된 이벤트 타입에 할당된 리스터만 제거.
- listener : (Function) 매개변수를 제공하면 지정된 리스너와 동일한 것만 제거.
- event : (Event) Event 인스턴스의 정보로 알 수 있는 이벤트가 발생하였을 때 호출될 리스터를 제거.

 

 

[ Event 인스턴스 ]

/* Event 인스턴스 프로퍼티들 */
- altKey : 이벤트 발생 시 Alt 키가 눌리면 true, 그렇지 않으면 false로 설정. 맥 키보드 대부분은 Alt 키를 Option으료 표시.
- ctrlKey : 이벤트 발생시 Ctrl 키가 눌리면 true, 그렇지 않으면 false로 설정
- data : 핸들러를 할당할 때 bind() 커맨드의 두 번째 매개변수로 전달된 값
- keyCode : keyup이나 keydown 이벤트인 경우, 눌린 키를 반환. 알파벳의 경우 대소문자 구분없이 대문자 값이 반환.
 대소문자를 판단하는 데 shiftKey를 이용. keypress 이벤트의 경우 대소문자를 판단하는데 which 프로퍼티를 사용.
- metaKey : 메타 키가 눌리면 true, 그렇지 않으면 false를 설정. 메타 키란 PC에서는 Ctrl 키, 맥에서는 Command 키를 지칭한다.
- pageX : 페이지에서 이벤트가 발생한 x 좌표를 명시.
- pageY : 페이지에서 이벤트가 발생한 y 좌표를 명시.
- relatedTarget : 이벤트가 발생했을 때 커서가 들어가거나 나온 엘리먼트를 가리킨다.
- screenX : 스크린에서 이벤트가 발생한 x좌표를 명시.
- screenY : 스크린에서 이벤트가 발생한 y좌표를 명시.
- shiftKey : Shift 키가 눌리면 true가 설정, 그렇지 않으면 false가 설정.
- target : 이벤트가 발생한 엘리먼트.
- type : 모든 이벤트에서 발생한 이벤트 타입을 명시. 다수의 이벤트를 한 이벤트 핸들러로 처리하는 경우에 유용.
- which : 키보드 이벤트의 경우 이벤트를 발생시킨 키의 숫자 코드가 명시. 마우스 이벤트의 경우 눌려진 버튼 값이 명시(1:왼쪽, 2:중간, 3:오른쪽 버튼)

※ keypress 이벤트는 which 프로퍼티를 사용하면 대소문자를 구분할 수 있다.
※ keyup과 keydown 이벤트가 발생할 때에는 대문자 키 코드만을 반환하는데 shiftKey를 사용하여 대소문자를 구분한다.

 

 

[ 이벤트 전파 제어 ]

stopPropagation() -: DOM 트리의 이벤트 버블링 전파를 막음.
preventDefault() - 이벤트의 기본 동작을 막음.

※ 이벤트 전파와 기본 동작을 막고 싶다면 리스터 함수에서 false를 반환.

 

 

[ 이벤트 핸들러 호출 ]

trigger(eventType) - 이벤트 타입에 해당되는 이벤트 핸들러를 모두 실행.
- eventType : (String) 실행될 핸들러에 대한 이벤트 타입의 이름.


 

eventName() - 일치된 엘리먼트에 대해 명명된 이벤트 타입에 할당된 이벤트 핸들러를 실행.
※ 지원하는 커맨드
- blur
- click
- focus
- select
- submit

 

 

[ 그 외 이벤트 관련 커맨드 ]

toggle(listenerOdd, listenerEven) - 확장 집합의 모든 엘리먼트에 클릭 이벤트가 발생할 때마다 번갈아 실행할 listenerOdd와 listenerEven을 할당.
- listenerOdd : (Function) 홀수 번째 클릭을 할 때 클릭 이벤트 핸들러로 실행될 함수
- listenerEven : (Function) 짝수 번째 클릭을 할 때 클릭 이벤트 핸들러로 실행될 함수


hover(overListener, outListener) - 일치된 엘리먼트에 mouseover와 mouseout 핸들러를 할당. 마우스 포인터가 오직 엘리먼트가 감싼 영역에 들어가고 나갈 때만 실행되며 자식 엘리먼트로 이동하는 것은 무시된다.
- overListener : (Function) mouseover 핸들러가 되는 함수
- outListener : (Function) mouseout 핸들러가 되는 함수

 

 

 

이 글은 스프링노트에서 작성되었습니다.

04-1.브라우저 이벤트 모델

 브라우저 이벤트 모델

 

▶ DOM 레벨 0 이벤트 모델 ◀

[ Event 인스턴스 ]

대부분의 브라우저에서 이벤트 핸들러가 실행될 때 Event 클래스의 인스턴스가 첫 번째 매개변수로 전달.
인터넷 익스플로러는 window의 event 프로퍼티에 Event 인스턴스를 저장.
이 차이점을 해결하려고 다음과 같은 코드를 사용한다.

  1. if (!event) event = window.event;


표준 브라우저의 경우 target 프로퍼티를 참조하지만 인터넷 익스플로러의 경우 srcElement 프로퍼티를 참조하므로
다음과 같은 코드를 사용하여 해결한다.

  1. var target = (event.target) ? event.target : event.srcElement;

 

 

[ 이벤트 버블링 ]

대상이 된 엘리먼트가 이벤트를 처리할 수 있는 기회를 주고, DOM 트리의 루트까지 반복해서 엘리먼트의 부모를 조사하며 동일한 이벤트 타입의 핸들러가 할당되어있는지 확인하고, 할당되어 있다면 이를 실행한다.

# 이벤트 버블링을 막고 싶을 때
표준 호환 브라우저 : Event 인스턴스의 stopPropagation() 메서드 호출
인터넷 익스플로러 :  Event 인스턴스의 cancelBubble 프로퍼티값을 true로 설정

 

 

 

▶ DOM 레벨 2 이벤트 모델 ◀

DOM 레벨 0의 단점을 보완하였으며, 엘리먼트의 특정 이벤트 타입에 한 이벤트 핸들러만 할당할 수 있었던 것을 하나 이상 할당할 수 있게 되었다.


[ 이벤트 할당 ]

addEventListener (eventType, listener, useCapture)

- eventType : 처리할 이벤트 타입을 지정. DOM 레벨 0 이벤트 모델의 이벤트명에서 'on' 접두어를 뺀 것 ( click, mouseover, keydown 등 )
- listener : 핸들러로 할당할 함수의 참조나 인라인 함수
- useCapture : 레벨 2 모델에서 이벤트 전파. Boolean 값을 가진다. false로 설정하면 버블 핸들러로 실행, true로 실행하면 캡처 핸들러로 실행.

 

 

[ 이벤트 전파 ]

캡처 단계 : 이벤트를 DOM 트리의 루트에서 대상 엘리먼트로 전파.
버블 단계 : 대상 엘리먼트에서 DOM 트리의 루트로 전파.

※ 캡처 단계는 인터넷 익스플로러가 DOM 레벨 2 이벤트 모델을 지원하지 않기 때문에 거의 사용되지 않는다.

 

 

[ 인터넷 익스플로러 이벤트 모델 ]

인터넷 익스플로러의 경우 addEventListener() 메서드가 아니라 attachEvent() 메서드를 각 DOM 엘리먼트에 정의.

attachEvent(eventName, handler)
- eventName : 핸들러를 추가할 이벤트 타입명
- handler : 핸들러로 덧붙일 함수

이 글은 스프링노트에서 작성되었습니다.

03-3.엘리먼트 콘텐츠 설정

 엘리먼트 콘텐츠 설정

 

[ HTML과 텍스트 콘텐츠 대체 ]

html() - 일치하는 집합에서 첫 번째 엘리먼트의 HTML 콘텐츠를 가져온다.


html(text) - 전달된 HTML 코드를 모든 일치하는 엘리먼트의 콘텐츠로 설정.


text() - 확장 엘리먼트의 모든 텍스트 콘텐츠를 결합하여 커맨드의 결과로 반환.
- 반환값 : 결합된 문자열

 

예제)

  1. <ul id="theList">
     <li>하나</li>
     <li>둘</li>
     <li>셋</li>
     <li>넷</li>
    </ul>
  2. var text = $('#theList').text();

설명) text변수에 '하나둘셋넷'이 설정된다.


text(content) - 모든 확장 엘리먼트의 텍스트 콘텐츠를 전달된 값으로 설정.
- content : (String) 설정할 텍스트가 '<' 또는 '>'을 포함한다면, 그 문자는 HTML 엔티티로 대체.

 

 

[ 엘리먼트 복사 / 이동 ]

append(content) - 일치하는 모든 엘리먼트의 콘텐츠에 전달된 HTML 코드나 엘리먼트를 덧붙인다.
- content : (String|Element|Object) 확장 집합의 엘리먼트에 추가할 문자열, 엘리먼트, 확장 엘리먼트 집합.

 

예제1)

  1. $('p').append('<b>텍스트</b>');

설명1) 페이지에 있는 모든 <p> 엘리먼트 콘텐츠의 끝에 전달된 문자열을 추가.


예제2)

  1. $("p.appendToMe").append($("a.appendMe"))

설명2) appendMe 클래스가 있는 모든 링크를 모두 선택하여 appendToMe 클래스를 지닌 <p> 엘리먼트에 덧붙인다.
대상이 하나이면 원본 엘리먼트는 기존 위치에서 삭제되고 덧붙여지도록 지정된 새로운 부모 엘리먼트의 위치로 이동한다.(이동)
대상이 여러 개라면  원본 엘리먼트는 그대로 남아 있고 각 대상에 복사본이 추가된다.(복사)


appendTo(target) - 확장 집합의 모든 엘리먼트를 target의 끝으로 이동.
- target : (String|Element) 셀렉터가 두 개 이상 엘리먼트에 일치하면 엘리먼트는 복사되고, 그런 다음에 일치하는 각 엘리먼트에 추가.
- 대상이 하나일 경우 엘리먼트가 이동하고, 대상이 여러 엘리먼트이면 원본 엘리먼트는 기존 위치에 남아 있고 각 대상에 복사본이 추가.


prepend() 와 prependTo() - append() 와 appendTo()와 유사하게 동작하지만 원본 엘리먼트를 대상 엘리먼트 앞에 삽입.


before()와 insertBefore() - 엘리먼트를 대상의 첫 번째 자식으로 삽입하는 대신에 대상의 바로 앞 형제로 삽입.


after()와 insertAfter() - 엘리먼트를 대상의 마지막 자식으로 삽입하는 대신에 대상의 바로 뒤 형제로 삽입.

 


[ 엘리먼트 감싸기 ]

wrap(wrapper) - 일치하는 집합의 엘리먼트를 전달된 HTML 태그나 엘리먼트의 복사보능로 감싼다.
- wrapper : (String|Element) 일치하는 집합 내에 있는 각 엘리먼트를 감싸려는 HTML 코드 문자열 또는 래퍼로 제공되고 복사될 엘리먼트


예제1)

  1. $("a.surprise").wrap("<div class='hello'></div>")

설명1) hello 클래스를 지닌 <div> 엘리먼트로 surprise 클래스가 있는 링크를 감싼다.


예제2)

  1. $("a.surprise").wrap($("div:first")[0]);

설명2) 페이지의 첫 번째 <div> 엘리먼트를 복사하여 surprise 클래스를 지닌 링크를 감싼다.


wrapAll(wrapper) - 일치하는 집합 내에 있는 모든 엘리먼트를 전달된 HTML 태그나 전달된 엘리먼트의 복사본으로 감싼다. 일치하는 집합을 하나의 단위로 취급한다.
- wrapper : (String|Element) 일치하는 집합의 각 엘리먼트를 감싸려는 HTML 코드 문자열 또는 래퍼로 제공되고 복사될 엘리먼트


wrapInner(wrapper) - 일치하는 집합에서 엘리먼트의 텍스트 노드를 포함한 콘텐츠를 전달된 HTML 태그나 엘리먼트의 복사본으로 감싼다.
- wrapper : (String|Element) 일치하는 집합의 각 엘리먼트를 감싸려는 HTML 코드 문자열 또는 래퍼로 제공되고 복사될 엘리먼트


※ wrapAll()과 wrapInner()의 차이점 : wrapAll() 메서드는 집합의 모든 엘리먼트를 한 개의 단위로 감싸고, wrapInner() 메서드는 엘리먼트의 콘텐츠를 감싼다.

 

 

[ 엘리먼트 제거 ]

remove() - 페이지 DOM에서 확장 집합의 모든 엘리먼트를 삭제.


empty() - 일치하는 집합의 모든 DOM 엘리먼트의 콘텐츠를 제거.


예제1)

  1. $("div.elementToReplace").after("<p>div를 대체한다.</p>").remove();

설명1) remove()와 after() 커맨드를 사용하여 대체 연산을 수행.
after() 함수가 <div> 엘리먼트를 포함하는 원본 확장 집합을 반환하여 새로 생성한 <p> 엘리먼트로 대체.


예제2)

  1. $.fn.replaceWith = function(html) {
     return this.after(html).remove();
    };
  2. $("div.elementToReplace").replaceWith("<p> div를 대체한다.</p>");

설명2) 예제1과 동일한 기능.

 

 

[ 엘리먼트 복사 ]

clone(copyHandlers) - 확장 집합에 있는 엘리먼트를 복사하여 이를 포함하는 새로운 확장 집합을 반환. 엘리먼트와 자식 모두 복사. 옵션에 따라 이벤트 핸들러의 복사 여부가 결정.
- copyHandlers : (Boolean) true이면 이벤트 핸들러를 복사, false이거나 생략하면 복사하지 않는다.


예제1)

  1. $('img').clone().appendTo('fieldset.photo');

설명1) 모든 이미지 엘리먼트의 복사본을 만들어서 photo 클래스를 가진 모든 <fieldset> 엘리먼트에 덧붙인다.


예제2)

  1. $('ul').clone().insertBefore('#here');

설명2) 모든 <ul> 엘리먼트의 복사본(자식인 <li> 엘리먼트 포함)을 만들어서 here 아이디를 가진 엘리먼트 바로 앞에 삽입.


예제3)

  1. $('ul').clone().insertBefore('#here').end().hide();

설명3) 모든 <ul> 엘리먼트의 복사본(자식인 <li> 엘리먼트 포함)을 만들어서 here 아이디를 가진 엘리먼트 바로 앞에 삽입한 뒤 원본 확장 집합을 화면에서 감춘다.

 

 

[ 폼 엘리먼트 값 ]

val() - 일치하는 집합에 있는 첫 번째 엘리먼트의 value 프로퍼티를 반환. 다중 선택이 가능한 엘리먼트면, 반환값은 선택된 값의 배열.


예제1)

  1. $('[name=radioGroup]:checked').val()

설명1) radioGroup이라는 이름을 가진 선택된 라디오 버튼의 값을 반환. 아무것도 선택되지 않았다면 undefined를 반환.


val(value) - 매개변수로 전달된 값을 일치하는 모든 폼 엘리먼트의 value 프로퍼티로 설정
- value : (String) 확장 집합에 있는 각 폼 엘리먼트의 value 프로퍼티에 설정할 문자열


value(values) - values 배열의 값과 일치하는 확장 집합에 있는 체크박스, 라디오 버튼을 선택하고 <select> 엘리먼트의 옵션을 선택.
- values : (Array) 엘리먼트의 선택 여부를 결정하는 데 사용하는 값의 배열.


예제)

  1. $('input,select').val(['하나','둘','셋']);

설명) 문자열이 '하나'나 '둘' 또는 '셋'과 일치하는 값을 가진 페이지의 모든 <input>과 <select> 엘리먼트를 찾아 발견된 체크박스나 라디오 버튼을 선택하고 <select> 엘리먼트의 옵션을 선택한다.

 

이 글은 스프링노트에서 작성되었습니다.

03-2.엘리먼트 스타일 변경

 엘리먼트 스타일 변경

 

[ 클래스 추가 / 제거 ]

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

 

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

 

toggleClass(name) - 매개변수로 전달된 클래스명이 엘리먼트에 존재하지 않으면 추가하고, 존재한다면 제거한다.


[ 스타일 얻고 설정하기 ]

css(name, value) - 일치하는 각 엘리먼트에 name 매게변수의 CSS 스타일 프로퍼티를 value 매개변수 값으로 설정.
- name : (String) CSS 프로퍼티 이름
- value : (String|Number|Function) 프로퍼티 값을 포함하는 문자열, 숫자, 함수, 매개변수로 함수가 전달.


예제)

  1. $("div.expandable").css("width", function() {
     return $(this).width() + 20 + "px";
    });

설명) 확장 집합에 있는 모든 엘리먼트의 폭을 20픽셀(pixel)씩 확장


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


css(name) - 확장 집합의 첫 번째 엘리먼트에서 name으로 명시한 CSS 프로퍼티의 계산 값을 가져온다.
- name : (String) 반환될 CSS 프로퍼티 이름을 명시


width(value) - 일치하는 집합에 속한 모든 엘리먼트의 너비를 설정
height(value) - 일치하는 집합에 속한 모든 엘리먼트의 높이를 설정
- value : 설정된 픽셀 값

 

예제1)

  1. $("div.myElements").width(500)

설명1) 해당 엘리먼트의 너비를 500픽셀로 설정

 

예제2)

  1. $("div.myElements").css("width", "500px")

설명2) 예제1과 같은 동작을 하는 코드


width() - 확장 집합의 첫 번째 엘리먼트의 너비를 가져온다.
height() - 확장 집합의 첫 번째 엘리먼트의 높이를 가져온다.1
- 반환값 : 계산된 너비나 높이의 숫자 값


hasClass(name) - 일치하는 집합의 엘리먼트에 전달된 클래스 이름이 있는지 확인.
- name : (String) 확인하려는 클래스 이름
- 반환값 : 클래스 이름을 가지면 true, 그렇지 않으면 false 반환

 

예제1)

  1. $("p:first").hasClass("surpriseMe")

설명1) 엘리먼트에 "surpriseMe" 클래스를 가지고 있으면 true를, 그렇지 않으면 false를 반환


예제2)

  1. $("p:first").is(".surpriseMe")

설명2) 예제1과 같은 코드이다. is() 커멘드를 사용하여 hasClass() 커멘드를 구현하지만 hasClass() 커맨드를 쓰면 훨씬 읽기 좋은 코드가 된다.


예제3)

  1. $("p:first").attr("class").split(" ");

설명3) 특정 엘리먼트에 정의된 클래스 목록을 공백으로 구분된 문자열 대신에 배열로 얻는다.


예제4)

  1. $.fn.getClassNames = function() {
     if (name = this.attr("className")) {
      return name.split(" ");
     }
     else {
      return [];
     }
    };

설명4) attr() 커맨드는 명시한 어트리뷰트가 존재하지 않으면 undefined를 반환하므로 엘리먼트가 클래스명을 지니지 않으면 에러가 발생한다. 이를 해결하려면 먼저 어트리뷰트를 확인하는 작업을 해야 한다. 이제 클래스명을 얻으려면 스크립트 어디에서나 getClassNames() 함수를 사용할 수 있으며, 클래스명이 없다면 빈 배열을 반환한다.

 

 

 

 

이 글은 스프링노트에서 작성되었습니다.

'Programming > jQuery' 카테고리의 다른 글

04-1.브라우저 이벤트 모델  (0) 2010.02.13
03-3.엘리먼트 콘텐츠 설정  (0) 2010.01.23
03-2.엘리먼트 스타일 변경  (0) 2010.01.17
03-1.엘리먼트 프로퍼티와 어트리뷰트 조작  (0) 2010.01.16
엘리먼트 집합 생성하기  (0) 2010.01.12
jQuery 기초  (0) 2009.08.15

03-1.엘리먼트 프로퍼티와 어트리뷰트 조작

 엘리먼트 프로퍼티와 어트리뷰트 조작


[ 엘리먼트 프로퍼티 조작 ]

each(iterator) - 일치하는 집합을 순회하면서 전달된 반복자 함수를 엘리먼트마다 호출

 

예제1)

  1. $('img').each(function(n){
     this.alt='아이디가 ' + this.id + '인 image[' + n + ']이다.';
    });

설명1) 페이지에 있는 모든 이미지 엘리먼트마다 인라인(inline) 함수를 호출하여, 엘리먼트의 순서와 id를 사용하여 만든 문자열로 alt 프로퍼티를 변경.

 

예제2)

  1. var allAlts = new Array();
    $('img').each(function(){
     allAlts.push(this.alt);
    });

설명2) alt 프로퍼티의 모든 값을 배열로 가져온다.

 

예제3)

  1. var altValue = $('#myImage')[0].alt;

설명3) 단일 엘리먼트의 alt 프로퍼티 값만 가져온다.

 

 

[ 어트리뷰트 값 가져오기 ]

attr(name) - 일치하는 집합의 첫 번째 엘리먼트에서 매개변수로 명시된 어트리뷰트의 값을 얻는다.
 집합이 없거나 첫 번째 엘리먼트에 어트리뷰트가 없다면 undefined를 반환한다.


예제)

  1. <img id="myImage" src="image.gif" alt="이미지" class="someClass" title="이미지다." custom="값"/>
    $('#myImage").attr("custom")

설명) 사용자 정의 어트리뷰트인 "custom"의 값을 가져온다.

 

 

[ 어트리뷰트 값 설정 ]

attr(name, value) - 매개변수에 전달된 값을 이용해 확장 집합의 모든 엘리먼트에 해당 어트리뷰트 이름의 값을 설정
- name : (String) 값을 설정할 어트리뷰트 이름
- value : (String|Object|Function) 어트리뷰트 값


예제)

  1. $('*').attr('title', function(index) {
     return '나는 ' + index + '번 엘리먼트이고 내 이름은 ' + (this.id ? this.id : 'unset') + '이다';
    });

설명) 페이지에 있는 모든 엘리먼트에 동작하며, 각 엘리먼트의 title 어트리뷰트를 엘리먼트의 인덱스와 id 어트리뷰트를 이용하여 구성된 문자열로 설정.

 

 

attr(attributes) - 일치하는 집합 내의 모든 엘리먼트에 매개변수로 전달된 객체로 명시한 어트리뷰트와 값을 설정


예제)

  1. $('input').attr(
     { value: '', title: '값을 입력하세요.' }
    );

설명) 모든 <input> 엘리먼트 값을 빈 문자열로 설정하고 title은 '값을 입력하세요.'로 설정.

 

※ 주의 - 인터넷 익스플로러는 <input> 엘리먼트의 name 어트리뷰트를 변경할 수 없다.

 

 

[ 어트리뷰트 제거 ]

removeAttr(name) - 일치하는 모든 엘리먼트에서 명시된 어트리뷰트를 제거. 단, 어트리뷰트를 제거한다고 해서 자바스크립트 DOM 엘리먼트에
대응하는 프로퍼티가 제거되지는 않고 값이 변경될 뿐이다.

 

이 글은 스프링노트에서 작성되었습니다.

'Programming > jQuery' 카테고리의 다른 글

04-1.브라우저 이벤트 모델  (0) 2010.02.13
03-3.엘리먼트 콘텐츠 설정  (0) 2010.01.23
03-2.엘리먼트 스타일 변경  (0) 2010.01.17
03-1.엘리먼트 프로퍼티와 어트리뷰트 조작  (0) 2010.01.16
엘리먼트 집합 생성하기  (0) 2010.01.12
jQuery 기초  (0) 2009.08.15