'manipulation'에 해당되는 글 1건

  1. 2010.06.28 [jquery] Manipulation (조작)
2010. 6. 28. 19:57
[Class Attribute]
■ .addClass()
  => 선택된 element에 css 클래스를 추가
   
  .addClass( className ) version 1.0
   (예) $('p').addClass('myClass yourClass');

  .addClass( function(index, class) ) version 1.4
   - index 번째(0번부터), class : element의 현재 설정되어있는 class명
   (예) $('ul li:last').addClass(function() { return 'item-' + $(this).index(); });

■ .hasClass()
   => 선택된 element의 class가 className 할당 되어있는지 유무를 확인 (return value= true / false)

  .hasClass( className ) version 1.2
   (예) $('#mydiv').hasClass('bar')

■ .removeClass()
  => 선택된 element에 css 클래스를 제거

  .removeClass( [ className ] ) version 1.0
   (예) $('p').removeClass('myClass noClass').addClass('yourClass');

  .removeClass( function(index, class) ) version 1.4
   - index 번째(0번부터), class : 이전 클래스명
   (예) $('li:last').removeClass(function() { return $(this).prev().attr('class'); });

■ .toggleClass()
  => 선택된 Element의 css 클래스를 반복적으로 설정된 css 클래스를 설정/해제한다.

  .toggleClass( className ) version 1.0
   (예) 
     1) <div class="tumble">Some text.</div> 
     2) $('div.tumble').toggleClass('bounce'); 호출
     3) <div class="tumble bounce">Some text.</div> // // bounce가 적용
     4) $('div.tumble').toggleClass('bounce'); 호출
     1) <div class="tumble">Some text.</div> // bounce가 해제
   

  .toggleClass( className, switch ) version 1.3
   - [switch]는 boolean값으로 조건값 true이면 토글형태로 동작한다.
   (예) $('#foo').toggleClass(className, addOrRemove);
        == 
        if (addOrRemove) {
 $('#foo').addClass(className);
        }
else {
 $('#foo').removeClass(className);
}

  .toggleClass( function(index, class), [ switch ] ) version 1.4
   (예)
     $('div.foo').toggleClass(function() {
       if ($(this).parent().is('.bar')) {
        return 'happy';
       } else {
        return 'sad';
       }
     });


[Copying]
■ .clone( [ withDataAndEvents ] )
   선택된 element의 element정보를 동일하게 복사

   .toggleClass()
    - Element만 동일하게 복사하고 이벤트 핸들러는 복사안함

   .toggleClass(true)
    - 만약에 click 등의 이벤트 핸들러가 연결된 Element라면 이벤트 핸들러도 같이 복사


[DOM Insertion, Around]
■ .wrap()
   선택된 element를 부모 element(wrappingElement)의 자식 element로 포함시킨다.

   .wrap( wrappingElement ) version 1.0
    (예) 
       1) <div class="container">
            <div class="inner">Hello</div>
            <div class="inner">Goodbye</div>
          </div>
       2) $('.inner').wrap('<div class="new" />'); 호출
       3) <div class="container">
            <div class="new">
              <div class="inner">Hello</div>
            </div>
            <div class="new">
              <div class="inner">Goodbye</div>
            </div>
          </div>

    (예) $("p").wrap(document.createElement("div"));

   .wrap( wrappingFunction ) == .wrap( function() {} ) version 1.4
    (예) $('.inner').wrap(function() { return '<div class="' + $(this).text() + '" />'; });

■ .unwrap()
   선택된 element의 부모 element를 제거한다.

   .unwrap() version 1.4
    (예) $("p").unwrap();
    (예) http://api.jquery.com/unwrap/

■ .wrapAll( )
   선택된 element 모두를 하나의 부모element(wrappingElement)의 자식 element로 포함한다.

   .wrapAll( wrappingElement ) version 1.2
    (예) 
      1) <div class="container">
           <div class="inner">Hello</div>
           <div class="inner">Goodbye</div>
         </div>
      2) $('.inner').wrapAll('<div class="new" />'); 호출
      3) <div class="container">
           <div class="new">
             <div class="inner">Hello</div>
             <div class="inner">Goodbye</div>
           </div>
         </div>

■ .wrapInner()
   선택된 element의 content가 인자로 넘어온 element의 content로 포함되고 그 element는 선택된 element의 자식element로 포함

   - .wrapInner( wrappingElement ) version 1.2
    (예) 
      1) <div class="container">
           <div class="inner">Hello</div>
           <div class="inner">Goodbye</div>
         </div>
      2) $('.inner').wrapInner('<div class="new" />'); 호출
      3) <div class="container">
           <div class="inner">
             <div class="new">Hello</div>
           </div>
           <div class="inner">
             <div class="new">Goodbye</div>
           </div>
         </div>

   - .wrapInner( wrappingFunction ) version 1.4
    (예) 
      1) <div class="container">
           <div class="inner">Hello</div>
           <div class="inner">Goodbye</div>
         </div>
      2) $('.inner').wrapInner(function() { return '<div class="' + this.nodeValue + '" />'; }); 호출
      3) <div class="container">
           <div class="inner">
             <div class="Hello">Hello</div>
           </div>
           <div class="inner">
             <div class="Goodbye">Goodbye</div>
           </div>
         </div>

[DOM Insertion, Inside]
■ .append()
   선택된 Element의 Content의 맨끝에 인자로넘어온 내용을 추가한다.

   .append( content ) version 1.0
    (예) $('.inner').append('<p>Test</p>'); // element를 추가
    (예2) $('.container').append($('h2')); // $('h2')에 해당하는 요소를 추가하면서 원래의 h2 Element는 사라진다.(즉, 잘라내기->붙이기)

   .append( function(index, html) ) version 1.4
    - index : 0번째 부터 시작, html : 선택된 Element의 이전 Content
    (예) $('.inner').append(function(index, html) { return '(' + index + ')'; }); // element를 추가

■ .appendTo()
   선택된 element를 target에 해당하는 Element의 Content의 끝에 추가한다.(선택된 element가 기존에 존재하는 것이면 잘라내기->붙이기 형태가 된다.)

   .appendTo( target ) version 1.0
    (예) $('<p>Test</p>').appendTo('.inner'); // inner 클래스에 해당하는 Element의 content 마지막에 '<p>Test</p>'를 추가한다.
    (예2) $('h2').appendTo($('.container')); // container 클래스에 해당하는 Element의 content 마지막에 h2요소에 해당하는 Element를 추가하고 원래의 h2 Element는 사라진다.(즉, 잘라내기->붙이기)

■ .html()
   [getter]
     선택된 Element의 html을 리턴한다.

     .html() version 1.0
      (예) $('div.demo-container').html();

   [setter]
     선택된 Element의 Content 내용을 변경한다.
     .html( htmlString ) version 1.0
     .html( function(index, oldhtml) {} ) version 1.4

■ .prepend()
   선택된 Element의 Content의 가장 앞에 인자로넘어온 내용을 추가한다.

   .prepend( content ) version 1.0
    (예) $('.inner').prepend('<p>Test</p>'); // .inner css 클래스에 해당하는 element의 content 가장 앞에 '<p>Test</p>'를 추가한다.

   .prepend( function(index, html) ) version 1.4


■ .prependTo()
   선택된 element를 target에 해당하는 Element의 Content의 가장 앞에 추가한다.(.appendTo()와 반대)

   .prependTo( target ) version 1.0
    (예) $('<p>Test</p>').prependTo('.inner'); // inner 클래스에 해당하는 Element의 content 가장 앞에 '<p>Test</p>'를 추가한다.
    (예2) $('h2').prependTo($('.container')); // container 클래스에 해당하는 Element의 content 가장 앞에 h2요소에 해당하는 Element를 추가하고 원래의 h2 Element는 사라진다.(즉, 잘라내기->붙이기)

■ .text()
   [getter]
     선택된 element의 content중 (html 태그정보를 제외한) text에 해당하는 값만 리턴한다.
     .text() version 1.0
      (예) 
        1) <div class="demo-container">
             <div class="demo-box">Demonstration Box</div>
             <ul>
               <li>list item 1</li>
               <li>list <strong>item</strong> 2</li>
             </ul>
           </div>
2) $('div.demo-container').text() == "Demonstration Box list item 1 list item 2"

   [setter]
     선택된 element의 content에 textString인자를 입력한다. 단 '<p>TEST</p>'와 같은 태그가 존재하면 &lt;p&gt;TEST&lt;/p&gt; 처럼 입력된다.
     .text( textString ) version 1.0
     .text( function(index, text) {} ) version 1.4

[DOM Insertion, Outside]

■ .after()
   선택된 element의 같은 레벨(형제노드)의 바로 다음 Element로 추가한다.

   .after( content ) version 1.0
   .after( function(index) ) version 1.4
    (예) $('.inner').after('<p>Test</p>');

■ .before()
   선택된 element의 같은 레벨(형제노드)의 바로 이전 Element로 추가한다.(contnent가 selector라면 잘라붙이기가 된다.)
   
   .before( content ) version 1.0
    (예) $('.inner').before('<p>Test</p>');

   .before( function(index) ) version 1.4

■ .insertAfter()
   - target 에 해당하는 element의 같은 레벨(형제노드)의 바로 다음에 $(selector)를 추가한다. (.appendTo()와 비슷)
   - .insertAfter( target ) version 1.0
   - (예) $('<p>Test</p>').insertAfter('.inner');

■ .insertBefore()
   - target 에 해당하는 element의 같은 레벨(형제노드)의 바로 이전에 $(selector)를 추가한다. (.prependTo()와 비슷)
   - .insertBefore( target ) version 1.0
   - (예) $('<p>Test</p>').insertBefore('.inner');


[DOM Removal]
■ .detach( [ selector ] )
   선택된 요소를 제거한다. (.remove()와 기능적으로 거의 동일하지만 선택된 요소의 이벤트 핸들러 정보등은 제거되지 않는다.)

   .detach( [ selector ] ) version 1.4
    (예) http://api.jquery.com/detach/

■ .empty()
   선택된 element의 하위 Content를 삭제한다.

    (예) <div class="hello">test</div> --> $('.hello').empty(); --> <div class="hello"/>

■ .remove()
   선택된 element를 삭제한다.

   .remove( [ selector ] ) version 1.0
     - 인자로 selector가 들어갈 경우 선택된 요소의 또다른 조건이라고 생각하면 된다.
     (예) $('.hello').remove(); // .hello 클래스가 있는 element를 삭제
     (예) $('div').remove('.hello'); // div 요소에서 .hello 클래스가 있는 element를 삭제


[DOM Replacement]

■ .replaceAll( target )
   target에 선택된 element를 찾아 $() 형태로 바꾼다. (.replaceWith() 함수와 selecor이냐 target이냐의 차이만 있다.)
   
   .replaceAll( target ) version 1.2
    (예) $('<h2>New heading</h2>').replaceAll('.inner'); // .inner 클래스에 해당하는 element를 '<h2>New heading</h2>' 으로 바꾼다.

■ .replaceWith()
   선택된 element를 newContent로 바꾼다.
   
   .replaceWith( newContent ) version 1.2
    (예)
      1) <div class="container">
           <div class="inner first">Hello</div>
           <div class="inner second">And</div>
           <div class="inner third">Goodbye</div>
         </div>
      2) $('.second').replaceWith('<h2>New heading</h2>'); 호출
      3) <div class="container">
           <div class="inner first">Hello</div>
           <h2>New heading</h2>
           <div class="inner third">Goodbye</div>
         </div>

   .replaceWith( function ) version 1.4


[General Attributes]

■ .attr()
   [getter]
    선택된 element의 속성(attribute)의 값을 리턴한다.
    .attr( attributeName ) version 1.0    

   [setter]
     선택된 element의 속성(attribute)의 값(value)을 설정한다.

     .attr( attributeName, value ) version 1.0

     .attr( map ) version 1.0
      (예) $('#greatphoto').attr( {alt: 'Beijing Brush Seller', title: 'photo by Kelly Clark'} ); // 인자를 json형태로

     .attr( attributeName, function(index, attr) ) version 1.1
      (예) $('#greatphoto').attr('title', function() { return this.alt + ' - photo by Kelly Clark' } );

■ .removeAttr()
   선택된 element의 속성(attribute)을 삭제한다.
   .removeAttr( attributeName ) version 1.0
    (예) $(this).next().removeAttr("disabled");

■ .val()
   [getter]
    선택된 element의 value값을 리턴한다.
    
    .val() version 1.0
    form element(input, select 태그등)에서 사용된다.
     (예)
         function displayVals() {
  var singleValues = $("#single").val(); // 단일값
  var multipleValues = $("#multiple").val() || []; // 복수값
  $("p").html("<b>Single:</b> " + singleValues + " <b>Multiple:</b> " +  multipleValues.join(", "));
}


   [setter]
   - 선택된 element의 value값을 할당한다.
   - .val( value ) version 1.0
   - (예) $("#multiple").val(["Multiple2", "Multiple3"]);

   - .val( function(index, value) ) version 1.4
   - (예) $('input:text.items').val(function(index, value) { return value + ' ' + this.className; } );

[Style Properties]
 jQuery CSS에서 참조
Posted by CoolDragon