사용자가 사용할 컨트롤만 사용하도록 보여지게하고

당장 사용하지 않는 컨트롤들은 보이지 않도록 하는 

사용성을 좋게하려할 때 점진적인 공개(progressive disclosure) 원칙을 적용

 

 

체크박스가 label 엘리먼트에 포함되도록 함으로써

텍스트를 클릭해도 체크박스 컨트롤을 클릭한 것과 동일하게

컨트롤의 선택 상태를 변경하여 사용성을 높여준다.

<label>
  <input type="checkbox" name="appetizers" value="imperial"/>
  Fried Imperial rolls (2)
</label>

 

 

CSS를 사용하여 엘리먼트를 감출수도 있지만,

$('fieldset div div').hide();

스크립트를 사용하면 페이지를 로드할 때 부하가 좀 더 걸리긴 하지만

스크립트 사용 옵션을 꺼두는 사용자에게도 유용한 인터페이스를 제공할 수 있다...?

 

 

$('div', $(this).parents('div:first'))

this 엘리먼트의 조상에서 첫번째로 나오는 div 엘리먼트에 포함된 div를 찾아라

 

$('input[type=text]', $(this).parents('div:first'))

this 엘리먼트의 조상에서 첫번째로 나오는 div 엘리먼트에 포함된 type이 text인 input을 찾아라

 

 

가정하고 작성한 코드는

가정이 바뀌면 오작동하거나 오류가 발생하기 쉬우므로

명확하게 상태를 확인할 수 있는 엘리먼트의 경우에는 개별 상태에 맞춰 명확하게 작성하는 것이 좋다.

 

 

오페라나 인터넷익스플로러와 같은 브라우저에서는

비활성 상태의 필드에 color값을 재정의할 수 없다.

 

 

엘리먼트의 참조를 얻으려면 each() 메서드를 사용

 

 

jQuery의 이벤트 구현 특징

. 이벤트 핸들러를 할당할 수 있는 통합 메서드를 제공

. 엘리먼트의 이벤트 타입마다 여러 핸들러를 할당

. click, mouseover 같은 표준 이벤트 타입명을 사용

. 핸들러의 매개변수를 써서 Event 인스턴스를 사용

. 자주 사용하는 Event 인스턴스의 프로퍼티들에 일관된 이름을 사용

. 이벤트 해제와 기본 행동을 막는 통합 메서드를 제공

 

캡쳐 단계를 지원하지 못하며,

하나의 API로 표준 호환 브라우저와 인터넷 익스플로러를 모두 지원

 

 

. bind( eventType=String, data=Object, listener=Function )

  일치된 집합에 있는 모든 엘리먼트에 지정한 이벤트 타입의 핸들러로 전달된 함수를 할당

  eventType : 핸들러를 할당할 이벤트 타입의 이름.

                   이벤트명과 '.' 문자로 구분한 접미어를 추가한 이벤트 타입은 namespace로 사용가능

  data : 핸들러 함수에서 사용하도록 Event 인스턴스에 data라는 프로퍼티로 제공되는 데이터.

           생략하면 이벤트 핸들러가 두번째 매개변수가 된다.

 

  $('#vstar')
  .bind('click',function(event) { say('Whee once!'); })
  .bind('click',function(event) { say('Whee twice!'); })
  .bind('click',function(event) { say('Whee three times!'); });

  $('*').unbind('click.editMode');  ← eventType을 namespace형태로 사용

 

 

. 특정한 이벤트 핸들러만을 바인딩할 수 있는 유용하고 간단한 커맨드도 제공 ← bind대신

  커맨드 명이 언제 실행되고 어떤 이벤트를 바인딩해야 할 것인지를 명확히 표현

  blur, change, click, dbclick, error, focus, keydown, keypress, keyup, load,

  mousedown, mousemove, mouseout, mouseover, mouseup, resize, scroll, select, submit, unload

  ※ 이 메서드들은 event.data 프로퍼티에 설정할 데이터 값을 지정할 수 없다.

 

 

. one( eventType, data, listener )

  일치된 모든 엘리먼트에 지정한 이벤트 타입의 핸들러로 전달된 함수를 할당

  한 번 실행된 뒤 자동으로 삭제

 

. unbind( eventType, listener )

  unbind( event )

  확장 집합의 모든 엘리먼트에서 전달된 매개변수에 따라 이벤트 핸들러를 선택적으로 제거

  매개변수를 제공하지 않으면, 엘리먼트의 모든 리스너를 제거

  ※ 익명 인라인 함수는 사용할 수 없다. 

 

 

* Event 인스턴스 프로퍼티들 ← 플랫폼과 독립적

 프로퍼티

 설명

 altKey

 이벤트 발생시 Alt키가 눌리면 true가 설정되고 그렇지 않으면 false로 설정

 맥 키보드 대부분은 Alt키를 Option으로 표시

 ctrlKey

 이벤트 발생시 Ctrl키가 눌리면 true가 설정되고 그렇지 않으면 false로 설정

 data

 핸들러를 할당할 때 bind()커맨드의 두번째 매개변수로 전달된 값

 keyCode

 keyup/keydown 이벤트인 경우, 눌리키를 반환

 알파벳 문자일 때는 대소문자를 구분하지 않고, 대문자 값이 반환

 keypress 이벤트의 경우 대소문자를 판단하는데 which 프로퍼티를 사용하면..

 metaKey

 이벤트 발생 시 메타키가 눌리면 true가 설정되고 그렇지 않으면 false가 설정

 PC에서는 Ctrl키, 맥에서는 Command키

 pageX

 마우스 이벤트일 때, 페이지에서 이벤트가 발생한 x 좌표

 pageY

 마우스 이벤트일 때, 페이지에서 이벤트가 발생한 y 좌표

 relatedTarget

 몇몇 마우스 이벤트의 경우, 이벤트가 발생했을 때 커서가 들어가거나 나온 엘리먼트를 가리킨다.

 screenX

 마우스 이벤트일 때 스크린에서 이벤트가 발생한 x 좌표

 screenY  마우스 이벤트일 때 스크린에서 이벤트가 발생한 y 좌표
 shiftKey

 이벤트 발생시 Shift키가 눌리면 true가 설정되고 그렇지 않으면 false가 설정

 target  이벤트가 발생한 엘리먼트
 type

 모든 이벤트에서 발생한 이벤트 타입을 명시.  click등

 다수의 이벤트를 한 이벤트 핸들러로 처리하는 경우에 유용

 which

 키보드 이벤트의 경우 이벤트를 발생시킨 키의 숫자 코드가 명시

 마우스 이벤트의 경우 눌려진 버튼 값이 명시 (왼쪽1, 중간2, 오른족3)

 

 

. 이벤트 전파 제어하기

  stopPropagation() 메서드는 DOM 트리의 이벤트 버블링 전파를 막고

  preventDefault() 메서드는 이벤트의 기본 동작을 막는다.

  이벤트 전파와 기본동작을 동시에 막고 싶다면, 리스너 함수에서 false를 return

 

 

. trigger( enentType ) ?

  일치된 엘리먼트에 대하여 전달된 이벤트 타입에 해당하는 이벤트 핸들러를 모두 실행

  사용자에 의해 발생하는 Event처럼 event를 발생시키지 않으며, DOM 계층을 통해 전파되지도 않는다.

  이벤트 핸들러를 실행시키는 방법일 뿐.

 

  비슷한 성격? 으로... blur, click, focus, select, submit

  일치된 엘리먼트에 대해 명명된 이벤트 타입에 할당된 이벤트 핸들러를 실행

 

 

. toggle( listenerOdd=Function, listenerEven=Function )

  확장 집합의 모든 엘리먼트에 클릭 이벤트가 발생할 때마다 번갈아 실행할 함수 할당

  listenerOdd (홀수번째 클릭 때 실행될 함수) listenerEvent (짝수번째 클릭 때 실행될 함수)

  → 엘리먼트의 사용 가능 상태를 토글할 때 사용

 

  $(function(){
    $('#aaa').toggle(
      function(event) { $(event.target).css('opacity',0.4); },
      function(event) { $(event.target).css('opacity',1.0); }
    );
  });

 

. hover( overListener, outListener )

  일치된 엘리먼트에 mouseover와 mouseout 핸들러를 할당

  자식 엘리먼트를 포함하더라도 해당 엘리먼트가 감싸고 있다면 mouseover로 처리

  $('#aaa').hover( func1, func2 );

 

 

인터넷 익스플로러 6과 7은 DOM 레벨2 이벤트 모델을 지원하지 않는다.

버블 단계와 유사한 자신만의 인터페이스를 제공

 

attachEvent(eventName, handler)

eventName : DOM 레벨0 모델의 엘리먼트 프로퍼티와 동일한 이름을 사용

handler : 핸들러로 덧붙일 함수

Event 인스턴스는 window.event 프로퍼티에서 참조해야

 

 

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

[기타] 이벤트 사용할 때 고려해야 할...  (0) 2015.05.06
jQuery 이벤트 모델  (0) 2015.05.05
인터넷 익스플로러 이벤트 모델  (0) 2015.05.04
DOM 레벨2 이벤트 모델  (0) 2015.05.03
DOM 레벨0 이벤트 모델  (0) 2015.05.03
[번외] 자바스크립트 #2 - 함수  (0) 2015.04.25

DOM 레벨0 이벤트 모델의 단점은 엘리먼트의 특정 이벤트 타입에 한 이벤트 핸들러만 할당할 수 있다는 것

 

. 이벤트 할당하기

  DOM 레벨2에서는 특정 엘리먼트 메서드를 사용하여 이벤트 핸들러를 할당

  각 DOM 엘리먼트는 이벤트 핸들러를 덧붙일 수 있는 addEventListener()메서드를 정의

 

  addEventListener( eventType, listener, useCapture )

  eventType : DOM 레벨0 이벤트 모델의 이벤트명에서 'on' 접두어를 뺀 것.  click, keydown등

  listener : 핸들러로 할당할 함수의 참조나 인라인 함수

  useCapture : event 캡처 단계에서 사용할지의 Boolean값.

                     true - 캡처 단계 핸들러로 실행, false - 버블 단계 핸들러로 실행

 

  ※ 기존 event 핸들러를 가진 엘리먼트에 addEventListener()로 새로운 event 핸들러를 추가한 경우라도 W3C 표준은 두 핸들러의 실행순서를 (추가한 순서대로 실행되도록) 보장하지 않는다.

     엘리먼트에 할당된 핸들러의 실행순서는 변경될 수 있다.

 

 

. 이벤트 전파

  DOM 레벨2 이벤트 모델에서 이벤트가 호출되면

  이벤트를 DOM트리의 루트에서 대상 엘리먼트로 전파하고,  ← 캡처 단계

  다시 대상 엘리먼트에서 DOM트리의 루트로 전파한다.  ← 버블 단계

 

 

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

jQuery 이벤트 모델  (0) 2015.05.05
인터넷 익스플로러 이벤트 모델  (0) 2015.05.04
DOM 레벨2 이벤트 모델  (0) 2015.05.03
DOM 레벨0 이벤트 모델  (0) 2015.05.03
[번외] 자바스크립트 #2 - 함수  (0) 2015.04.25
[번외] 자바스크립트 #1 - 객체  (0) 2015.04.24

. 브라우저 이벤트 모델 이해하기

  브라우저의 이벤트 처리표준이 생기기 전 네스케이프 내비게이터(Netscape Navigator) 브라우저에 이벤트 핸들링 모델을 도입한 것을 DOM 레벨0 이벤트 모델

 

참고 - DOM레벨은 W3C DOM명세를 구현의 요구 수준을 지칭하는데 사용한다.

         사실 DOM레벨0 이라는 것은 없다.  다만 DOM 레벨1 이전에 구현한 것들을 비공식적으로 지칭한다.

 

W3C는 2000년 11월 DOM 레벨2를 발표

파이어폭스나 카미노(Camino)와 같은 모질라 기반 브라우저, 사파리, 오페라(Opera)와 같은 최신 표준을 준수하는 브라우저들이 이 모델을 지원한다.  인터넷 익스플로러(Internet Explorer)는 자체 표준이 있으며 자신만의 인터페이스를 사용하긴 하나 DOM 레벨2 이벤트 모델의 기능을 일부는 지원한다.

이렇게 인터페이스가 서로 달라 각각의 인터페이스에 맞춰 작업을 해야하는 번거로움이 발생하게 된다.

 

 

. DOM 레벨0 이벤트 모델

  이벤트 핸들러는 DOM 엘리먼트의 프로퍼티에 함수 인스턴스의 참조를 할당하여 선언

  click 이벤트는 onClick프로퍼티에 함수를 할당하고,

  mouseover이벤트는 onMouseOver프로퍼티에 함수를 할당하여 이벤트를 처리한다.

 

  onclick = "say('!!!');"

  이를 통해 say()함수가 엘리먼트의 클릭 이벤트 핸들로로 되었다고 생각할 수 있다.  하지만, 그렇지 않다.  마크업 어트리뷰트에서 핸들러를 선언하면 어트리뷰트 값을 함수 구현으로 사용하는 익명 함수가 생성된다.  실제로는 이렇다.

  xxxElement.onclick = function(event) { say('!!!'); }

  새롭게 생성된 함수의 구현으로 어트리뷰트 값을 사용하는 방식과 event 매개변수를 사용할 수 있는 구조로 새로운 함수가 생성되었다.

 

 

. Event 인스턴스

  대부분의 브라우저에서 이벤트 핸들러가 실행될 때 Event 클래스의 인스턴스가 첫번째 매개변수로 전달

  인터넷 익스플로러는 window의 event프로퍼티에 Event 인스턴스를 저장하는 방법을 사용

 

  if( !event ) event = window.event;

  이러한 객체 탐지 기법을 사용하여 event 매개변수가 정의되지 않았거나 null인지 여부를 확인

  이 문장을 실행한 이후에는 event 매개변수를 얻는 방식과 상관없이 event를 참조할 수 있다.

 

  인터넷 익스플로러는 W3C표준이 아닌 자신만의 방법으로 Event 클래스도 정의

  이러한 이유로 객체 탐지 기법을 계속 사용

 

  이벤트가 발생한 엘리먼트를 참조할 때

  var target = (event.target) ? event.target : event.srcElement;  ← 인터넷 익스플로러 때문

 

 

. 이벤트 버블링 (bubbling)

  이벤트가 발생한 엘리먼트에 핸들러가 할당되었는지 확인하고, 할당되었다면 핸들러를 호출

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

 

. 이벤트 전파의 영향과 그 의미

  DOM트리의 이벤트 버블링을 막고 싶을 때

  표준 호환 브라우저에서는 stopPropagation() 호출

  인터넷 익스플로러에서는 Event인스턴스의 cancelBubble프로퍼티 = true;

 

(핸들러 처리후에 자동으로 실행되는)기본 동작을 막으려면 핸들러의 반환값으로 false를 설정

<form name="myForm" onsubmit="return false;" ...

비동기 요청으로 폼을 전송하는 Ajax에서 자주 사용

 

DOM 레벨0 이벤트 모델에서는

이벤트 핸들러와 연관된 거의 모든 단계에서 어떤 동작을 수행할지 파악하는 데 브라우저 탐지 기법을 사용

 

 

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

인터넷 익스플로러 이벤트 모델  (0) 2015.05.04
DOM 레벨2 이벤트 모델  (0) 2015.05.03
DOM 레벨0 이벤트 모델  (0) 2015.05.03
[번외] 자바스크립트 #2 - 함수  (0) 2015.04.25
[번외] 자바스크립트 #1 - 객체  (0) 2015.04.24
폼 엘리먼트 값 다루기  (0) 2015.04.24

자바스크립트에서 함수는 객체로 간주

다음과 같이 이용될 수 있다.

. 변수에 할당

. 객체의 프로퍼티에 할당

. 매개변수로 전달

. 함수의 결과값으로 반환

. 리터럴을 이용해서 생성

 

요롷게 코딩을 하지만

function doSomethingWonderful() {

  alert('!!!');

}

 

function 키워드는 자동으로 Function 인스턴스를 생성하고

가짜 함수 '이름'을 사용해서 생성한 window 프로퍼티에 할당한다.

 

doSomethingWonderful = function() {

  alert('!!!');

}

실제로는 요롷게 처리되고 있다.

 

function hello() { alert('hi'); } 또는

hello = function() { alert('hi'); } 또는

window.hello = function() { alert('hi'); }

 

 

function hello() { alert('hi'); }

setTimeout( hello, 5000 );

함수가 페이지의 여기저기에서 사용될 게 아니라면

매개변수로 전달할 Function 인스턴스를 굳이 생성하지 않아도 된다.

요롷게

setTimeout( function() { alert('hi'); }, 5000 );

 

 

. 함수에서의 this

  일반적으로는 함수를 소유한 객체를 가르키지만

  - 함수가 (객체에 포함되지 않은 채) 최상위 레벨에서 바로 호출되면,

     this가 가르키는 함수컨텍스트는 window 인스턴스이다.

  - Function의 call() 메서드에 첫 번째 매개변수로 전달된 어떤 객체라도 함수콘텍스트로 설정된다.

  - Function의 apply() 메서드도 call()과 마찬가지지만,

    두 메서드는 추가 매개변수가 함수로 전달될 때만 차이를 가진다.  어떤?

 

  function whoAmI() { return this.xxx; }

  alert( whoAmI() );  ← 이때, this는 window

  alert( o1.identifyMe() );  ← 이때, this는 o1, o1.identifyMe = whoAmI; 처리 후

  alert( whoAmI.call(o2) );  ← 이때, this는 o2

  alert( whoAmI.apply(o3) );  ← 이때, this는 o3

 

  "함수 F를 호출할 때, 함수 콘텍스트로 객체 O가 제공되면, F는 O의 메서드 역할을 한다."

  alert( o1.identifyMe.call(o3) );

 

 

. 클로저(closure)

  함수를 실행하는 데 필요한 지역변수와 결합된 Function 인스턴스

  function이 만들어질 때, function 안에서 사용된 지역변수는

  지역변수/function 선언등의 처리 Block이 실행되 버린 후에라도

  function이 수행되고 있다면

  이미 소멸되어 버렸을 것 같은 지역변수라도

  수행되고 있는 function에서 값을 정상적으로 참조할 수 있다.

  (메모리에서 해제되지 않는다.) ← 순환 참조일 경우 메모리 누수의 원인이 되기도 한다.

 

  $( function(){  ← DOM이 로드된 후 실행되는 준비핸들러
     var local = 1;
     window.setInterval( function(){
        $('#display')
        .append('<div>At '+new Date()+' local='+local+'</div>');
        local++;
     }, 3000 );
  } );
  localfunction()위에서 선언되어 function() 안에서 실행되는 데는 문제가 없어보이지만

  function()를 모두 실행한 이후에는 소멸될 것 같지만

  3초의 Interval마다 실행되도록 정의한 function()이 실행되는 동안에는

  local이 계속 살아있게 되는 것이다.

 

  이렇듯, 자바스크립트에서 클로저는 별도의 특별한 문법을 쓰지 않고도 암묵적으로 생긴다.

 

  비동기 콜백을 활용하는 jQuery 커맨드를 이용할 때 클로저가 절대적으로 필요하고

  특히 Ajax요청이나 이벤트 처리에서 중요하다.

 

 

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

DOM 레벨2 이벤트 모델  (0) 2015.05.03
DOM 레벨0 이벤트 모델  (0) 2015.05.03
[번외] 자바스크립트 #2 - 함수  (0) 2015.04.25
[번외] 자바스크립트 #1 - 객체  (0) 2015.04.24
폼 엘리먼트 값 다루기  (0) 2015.04.24
엘리먼트 콘텐츠 설정하기  (0) 2015.04.23

자바스크립트의 Object는 아무런 데이터도 없으며, 별다른 의미도 없기 때문에

원하는 데이터를 가지는 객체로 사용할 수(만들어갈 수) 있다.

 

. 객체 만들기

  var ride = new Object();

 

. 객체의 프로퍼티 설정? 사용!

  var ride = new Object();

  ride.make = 'Yamaha';

  ride.model = 'V-Star Silverado 1100';

  ride.year = 2015;

  ride.prchased = new Date(2015,3,12);

 

  프로퍼티는 할당하기 전에 선언하지 않아도 된다.

  값을 할당하는 것만으로 이용할 수 있다.

 

  실수로 프로퍼티명을 잘못 입력하면(오타를 만들면) 작성한 프로그램에 버그가 생기게 된다.

  Syntax오류가 아닌 정상적인 문장이므로 오류는 아니니 컴파일러는 실수를 알려주지 않는다.

  자바스크립트 디버거를 사용하면 좋을 듯하다.

 

 

자바스크립트의 Object 인스턴스(객체)는

이름과 값으로 구성된 프로퍼티의 컬렉션

프로퍼티의 이름은 문자열이고, 값은 자바스크립트 객체이다.

 

 

var owner = new Object();

owner.name = '스파이크 스피겔';

owner.occupation = '현상금 사냥꾼';

ride.owner = owner;

 

. 중첩된 프로퍼티에 접근하려면

  var ownerName = ride.owner.owner;

 

 

. 범용 프로퍼티 참조 연산자

  object[propertyNameExpression]

  ride['make'] ← ride.make 또는

  ride['m'+'a'+'k'+'e'] 또는

  var p = 'make';  ride[p];

  ride["a property name that s rather odd!"] ← 공백, 부호로 이루어진 프로퍼티

 

  중첩된 프로퍼티의 접근 형식은

  ride[owner][name]

 

 

. 객체 리터럴 표기법 = JSON(JavaScript Object Notation) = http://www.json.org/

  var ride = {

     make: 'Yamaha',

     model: 'V-Star Silverado 1100',

     year: 2015,

     prchased: new Date(2015,3,12),

     owner: {

        name: '스파이크 스피겔',

        occupation: '현상금 사냥꾼'

     }

  };

 

  객체는 중괄호 쌍으로 표시

  프로퍼티는 중괄호 안에서 쉼표로 구분하여 나열

  각 프로퍼티는 이름과 값이 콜론으로 구분되어 표시

 

  JSON으로 날짜 값을 표현할 방법이 없다.

  자바스크립트가 날짜 리터럴을 지원하지 않기 때문에 Date생성자를 이용

  날짜를 주고 받을 수 있는 형식은 ISO8601(http://ko.wikipedia.org/wiki/ISO_8601)이나

  Date.getTime()으로 반환된 밀리초 숫자 값을 이용

 

 

. 배열 선언

  var someValues = [2,3,5,6,7,8,9,1];

 

 

최상위 레벨에서 선언된 모든 참조는 내부적으로 window 인스턴스에 프로퍼티로 만들어진다.

var foo = bar; 또는

window.foo = bar; 또는

foo = bar;

 

 

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

DOM 레벨0 이벤트 모델  (0) 2015.05.03
[번외] 자바스크립트 #2 - 함수  (0) 2015.04.25
[번외] 자바스크립트 #1 - 객체  (0) 2015.04.24
폼 엘리먼트 값 다루기  (0) 2015.04.24
엘리먼트 콘텐츠 설정하기  (0) 2015.04.23
엘리먼트 스타일 변경하기  (0) 2015.04.23

. val()

  일치하는 집합에 있는 첫 번째 엘리먼트의 value 프로퍼티를 반환

  다중선택이 가능한(multiple 어트리뷰트가 true인) <select>엘리먼트는 배열을 return

  ※ 체크박스, 라디오 버튼이 선택되었는지에 관계없이 value 어트리뷰트의 값을 return한다.

      아무것도 선택되지 않았다면 undefined를 return

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

 

. val(value)

  매개변수로 전달된 값을 일치하는 모든 폼 엘리먼트의 value 프로퍼티로 설정

 

. val(values=Array)

  전달된 values 배열의 값과 일치하는 확장 집합에 있는 체크박스, 라디오 버튼을 선택하고,

  <select>엘리먼트의 옵션을 선택

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

 

 

. html()

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

  엘리먼트의 innerHTML 프로퍼티 값과 동일

 

. html(text)

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

 

. text()

  확장 엘리먼트의 모든 텍스트 콘텐츠를 결합하여 return

 

. text(content)

  모든 확장 엘리먼트의 텍스트 콘텐츠를 전달된 값으로 설정

  content에 '<' 또는 '>'를 포함한다면, HTML 엔티티로 대체된다.

  ※ '<'는 '&lt;'로 '>'는 '&gt;'로 대체

  ※ http://www.w3schools.com/HTML/html_entities.asp

 

 

. append(content=String|Element|Object)

  일치하는 모든 엘리먼트의 콘텐츠에 전달된 HTML코드나 엘리먼트를 덧붙인다.

  $('p').append('<b>TEXT<b>');

  $('p.appendToMe').append( $("a.appendMe") );

 

  var toAppend = $("a.appendMe")[0];

  $("p.appendToMe").append(toAppend);

  ~~~~~~~~~~~~~

  엘리먼트가 하나만 선택되면 이동하고, 여러개가 선택되면 복사된다.

  엘리먼트 하나만 다른 위치로 이동시키거나 복사하려면, appendTo()를 사용하는 편이 간단

 

 

. appendTo(target=String|Element)

  확장 집합의 모든 엘리먼트를 target의 끝으로 이동시킨다.

  셀렉터가 2개 이상 엘리먼트에 일치하면, 복사/추가된다.

 

※ a.append(b)    는 a 엘리멘트에 b 엘리먼트를 덧붙이고

    a.appendTo(b)는 a 엘리먼트를 b 엘리먼트에 덧붙인다.

 

 

. prepend(), prependTo()

  원본 엘리먼트를 대상 엘리먼트 앞에 삽입

 

. before(), insertBefore()

  엘리먼트를 대상의 첫 번째 자식으로 삽입하는 대신

  대상의 바로 앞 형제로 삽입

 

. after(), insertAfter()

  엘리먼트를 대상의 마지막 자식으로 삽입하는 대신에

  대상의 바로 뒤 형제로 삽입

  $('<p>hi</p>').insertAfter('p img');

 

 

. wrap(wrapper=String|Element)

  일치하는 집합의 엘리먼트를 전달된 HTML태그나 엘리먼트의 복사본으로 감싼다.

  여러 엘리먼트가 있다면, 각 엘리먼트에 개별적으로 동작한다.

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

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

 

. wrapAll(wrapper=String|Element)

  일치하는 집합 내에 있는 모든 엘리먼트를 전달된 HTML태그나 엘리먼트의 복사본으로 감싼다.

  일치하는 집합을 하나의 단위로 취급

 

. wrapInner(wrapper=String|Element)

  일치하는 집합에서 엘리먼트의 텍스트 노드를 포함한 콘텐츠를 전달된 HTML태그나 엘리먼트의 복사본으로 감싼다.

 

 

. remove()

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

  삭제된 확장 집합을 return한다.  ← 여전히 참조할 수 있다.

 

  ※ remove()와 after()를 사용하여 Replace를 수행한다.

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

      $.fn(replaceWith = function(html) {

         return this.after(html).remove();

      };

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

 

. empty()

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

 

 

. clone(copyHandlers=true/false=이벤트 핸들러의 복사여부)

  확장 집합에 있는 엘리먼트를 복사하여, 새로운 확장 집합을 반환

  엘리먼트와 자식 모두 복사된다.

  $('img').clone().appendTo('filedset.photo');

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

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

 

 

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

[번외] 자바스크립트 #1 - 객체  (0) 2015.04.24
폼 엘리먼트 값 다루기  (0) 2015.04.24
엘리먼트 콘텐츠 설정하기  (0) 2015.04.23
엘리먼트 스타일 변경하기  (0) 2015.04.23
프로퍼티와 어트리뷰트 조작하기  (0) 2015.04.23
확장 집합 다루기  (0) 2015.04.22

. addClass(names)

  매개변수로 전달된 하나 이상 되는 클래스명을 확장 집합의 모든 엘리먼트에 추가

  여러 클래스명을 추가할 때는 공백으로 구분

 

. removeClass(names)

  매개변수로 전달된 하나 이상의 클래스명을 확장 집합에 있는 모든 엘리먼트에서 제거

 

. toggleClass(name)

  매개변수로 전달된 클래스명이 엘리먼트에 존재하지 않으면 추가하고,

  존재한다면 제거

  각 엘리먼트 개별로 처리되므로 추가되기도 제거되기도 한다.

  function swap() {

     $('tr').toggleClass('striped');

  }

  <table onmouseover="swap();" onmouseout="swap();">

 

 

. css(name, value=String|Number|Function)

  일치하는 각 엘리먼트에 name 매개변수의 CSS 스타일 프로퍼티를 value 매개변수로 설정

  $("div.expandable").css("width",function() {

     return $(this).width() + 20 + "px";

  } );

 

. css(properties)

 

 

. css(name)

  확장 집합의 첫 번째 엘리먼트에서 name으로 명시한 CSS 프로퍼티의 계산 값을 가져온다.

  return 값은 숫자라도 문자열이다.

 

. width(value), height(value)

  일치하는 집합에 속한 모든 엘리먼트의 너비나 높이를 설정

  value는 pixel값

  $("div.myElements").css("width","500px"); 또는

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

 

. width(), height()

 

 

. hasClass(name)

  일치하는 집합의 엘리먼트에 전달된 클래스 이름이 있는지 확인

  이름이 있으면 true, 아니면 false

  $("p:first").hasClass("surpriseMe"); 또는

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

 

  클래스명의 배열을 얻으며, 엘리먼트에 클래스명이 없으면 빈 배열을 반환하는 코드

  $.fn.getClassNames = function() {

     if( name = this.attr("className") ) {

        return name.split(" ");

     }

     else {

        return [];

     }

  };

 

 

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

폼 엘리먼트 값 다루기  (0) 2015.04.24
엘리먼트 콘텐츠 설정하기  (0) 2015.04.23
엘리먼트 스타일 변경하기  (0) 2015.04.23
프로퍼티와 어트리뷰트 조작하기  (0) 2015.04.23
확장 집합 다루기  (0) 2015.04.22
HTML 생성하기  (0) 2015.04.22

+ Recent posts