3.jQuery Manipulation

jQuery [Manipulation]

[General Attribute]

● .attr( attributeName) : 선택된 element의 속성(attribute)의 값을 리턴한다.

 

● .attr( attributeName, value)  : 선택된 element의 속성(attribute)의 값을 설정한다.

 

● .attr( map) :    $( "#greatphoto" ).attr({
     alt: "Beijing Brush Seller",
     title: "photo by Kelly Clark"
     });
//<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" title="photo by Kelly Clark">

 

● .attr( attributename, function(index, attr))
: $("#greatPhoto").attr('title', function(){
 result this.alt + " - photo by kelly Clark"
   });
// <img id="greatphoto" src="brush-seller.jpg" alt="brush seller" title="brush seller - photo by Kelly Clark">

 

● .removeAttr()   : 선택된 element의 속성 (attribute)을 삭제한다.
- $(this).next().removeAttr("disabled");

● .val()  : 선택된 element의 value값을 리턴한다.
  var singleValues = $("#single").val();  //단일값
  var multipleValues = $("#multiple").val() || [] //복수값

 

● .val(value)  : 선택된 element의 value 값을 할당한다.

  $("#multiple").val(["multi1","multi2"]);

 

● .val( function(index, value)
 $("input:text.items").val(function(index,value){
  return value + " " + this.className;
 });
 

 [DOM Insertion, Inside]

● .append() :  선택된 element 의 content 맨 끝에 인자로 넘어온 내용을 추가한다.

// element를 추가
 $(".inner")append("<p>Test</p>");

//  $("h2")에 해당하는 요소를 붙이면서 원래의  $("h2") element 는 사라짐.(cut > paste)
 $(".container).append($("h2"));

 

● .appendTo(target) : 선택된 element를 target에 해당하는 Element의 content의 끝에 추가한다.
       (선택된 element가 기존에 존재하는 것이면 (cut > paste)형태)
// inner 클래스에 해당하는 Element의 content 마지막에 '<p>Test</p>'를 추가한다.
 $('<p>Test</p>').appendTo('inner');
//container 클래스에 해당하는 Element의 content 마지막에 H2요소에 해당하는 element 추가
 $('H2').appendTo($('.container'));

 

● .prepend()   : 선택된 element의 content 가장 앞에, 인자로 넘어온  내용을 추가한다. ( <!=>append)
//  .inner 앞에 <p>Test</p> 추가한다.
  $(".inner").prepend('<p>Test</p>);

 

● .prependTo(target)  : 선택된 element를 target에 해당하는 element의 content의 가장 앞에 추가한다 (<!=> appendTo)
// inner 클래스에 해당하는 Element의 content  가장 앞에 '<p>Test</p>'를 추가한다.
 $('<p>Test</p>').prependTo('inner');
//container 클래스에 해당하는 Element의 content  가장 앞에 H2요소에 해당하는 element 추가
 $('H2').prependTo($('.container'));
 

● .html()   :  선택된 Element의 html을 리턴한다.
 - $("div.demo-container').html();

● .html( htmlString) : 선택된 element의 content 내용을 변경한다.
● .html( function(index, oldhtml){})

 

● .text()   :  선택된 element의 contend중 (html 태그정보를 제외한 ) text에 해당하는 값만 리턴한다.
 - $('div.container').text()    (== "hello goodbye hello")

● .text( textString)  : 선택된 element의 content에 textString인자를 입력한다. 단 '<p>Test</p>' 와 같은
    태그가  존재하면 &lt;p&gt; Test &lt;/p&gt; (이스케이프 시퀀스)처럼 입력한다.

 
[DOM Insertion, OutSide]

● .after()   : 선택된 element의 같은 레벨(형제 노드)의 바로다음 element로 추가한다.
 .after( content)
 .after( function(index))
 예) $('.inner').after('<p>Test</p>');

 

● .before() : 선택된 element의 같은 레벨(형제 노드)의 바로이전 element로 추가한다.
     (*content가 selector라면 잘라붙이기가 된다.(move))
 
● .insertAfter()   : target에 해당하는 element의 같은 레벨(형제노드)의 바로 다음에 $(selector) 를 추가한다.(appendTo 와 유사)
 예) $('.<p>Test</p>).insertAfter('.inner');

 

● .insertBefore()   : target에 해당하는 element의 같은 레벨(형제노드)의 바로 이전에 $(selector) 를 추가한다.(prependTo 와 유사)
 예) $('.<p>Test</p>).insertAfter('.inner');

 

[DOM removal]

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

 

● .empty()  : 선택된 element 의 하위 Content를 삭제한다.
 예) 1. <div class="hello"> test </div>   
      2. $(".hello").empty(); 
   = 3. <div class="hello" />

 

● .remove()  : 선택된 element 를 삭제한다.
 $(".hello").remove(); // hello 클래스가 있는 element 삭제
 $("div").remove(".hello") // div요소에서 .hello 클래스가 있는 element를 삭제

 

[DOM Replacement]

● .repalceAll( target)   : target에 선택도니 element를 찾아 $() 형태로 바꾼다.
 (* replaceWith() 함수와 selector 냐 target 이냐의 차이만 있다.)
 예) $("<h2> New heading</h2>").replaceAll(".inner");  // .inner 클래스에 해당하는 element를 "<h2> New heading</h2>" 로 변경
 
● .repalceWith()   :  선택된 element를 newContent로 바꾼다.
   .replaceWith( function)
예)
 $(".second").replaceWith("<h2>New heading</h2>");

 <div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">and</div> -->  <h2>New heading</h2> 변경
  <div class="inner third">GoodBye</div>
 </div>

 
 [DOM Insertion, Around]

 ● .wrap()   : 선택된 element를 부모 element(wrappingElement)의 자식 element로 포함시킨다.

예)
 <div class="container">
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
 </div>

$( ".inner" ).wrap( "<div class='new'> </div>" );

 <div class="container">
   <div class="new">
     <div class="inner">Hello</div>
   </div>
   <div class="new">
     <div class="inner">Goodbye</div>
   </div>
 </div>

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

 <div class="container">
   <div class="Hello">
     <div class="inner">Hello</div>
   </div>
   <div class="Goodbye">
     <div class="inner">Goodbye</div>
   </div>
 </div>

 

● unwrap()  : 선택된 element 의 부모 element를 제거한다.
예)
 var pTags = $( "p" );
 $( "button" ).click(function() {
           if ( pTags.parent().is( "div" ) ) {
      pTags.unwrap();
    } else {
      pTags.wrap( "<div></div>" ); 
    }
  });

 

● wrapAll()  : 선택된 element 모두를 하나의 부모  element
                     (wrappingElement)의 자식 element로 포함한다.
     
 <div class="container">
 <div class="inner">Hello</div>
 <div class="inner">Goodbye</div>
 </div>

 $( ".inner" ).wrapAll( "<div class='new' />");     

 <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로 포함.
       (자식될 요소의 인자를 부모될 요소에 넣어주고 가져온 인자를 자식에 넣어줌.)
예1)
 <div class="container">
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
 </div>

 $( ".inner" ).wrapInner( "<div class='new'></div>");

 <div class="container">
   <div class="inner">
    <div class="new">Hello</div>
  </div>
    <div class="inner">
      <div class="new">Goodbye</div>
    </div>
 </div>

예2)
 $( ".inner" ).wrapInner(function() {
   return "<div class='" + this.nodeValue + "'></div>";
 });

 <div class="container">
   <div class="inner">
     <div class="Hello">Hello</div>
   </div>
   <div class="inner">
     <div class="Goodbye">Goodbye</div>
   </div>
 </div>

 [Copying]
● .clone()  : 선택된 요소 집합을 깊은 복사(deep copy:선택된 요소들의 모든 자식요소들과 텍스트 노드 포함)할 수 있는 기능을 합니다.
                   끼워넣기 위한 함수의 용도로 사용될 때, .clone() 함수는 페이지 상에 요소들을 복사하여 넣기에는 아주 편한 방법입니다

예)  appendTo 와 비교

 <div class="container">
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
 </div>

 $('.hello').appendTo('.goodbye');   // 와 같이 스크립트를 작성하면 DOM 구조는 아래와 같이 바뀝니다. (* Move)

 <div class="container">
   <div class="goodbye">
     Goodbye
     <div class="hello">Hello</div>
   </div>
 </div>

 $('.hello').clone().appendTo('.goodbye');   // 와 같이 스크립트를 작성하면 DOM 구조는 아래와 같이 바뀝니다. (*Copy)

 <div class="container">
   <div class="hello">Hello</div>
   <div class="goodbye">
     Goodbye
     <div class="hello">Hello</div>
   </div>
 </div>

 

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

 ● toggleClass(true) : 이벤트 핸들러가 연결된 element라면 이벤트 핸들로도 같이 복사.