: devNote

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라면 이벤트 핸들로도 같이 복사.

jQuery [CSS]

[CLASS]
● .addClass( className )  : 선택된 element의 클래스 추가
- $("p").addClass('myClass yourClass');

● .addClass( function(index, class{ })   // (index : 0 부터  ,lass :  element 의 현재 설정되어있는 class명)

- $("ul li:last).addClass(function(){

return 'item' + $(this).index();

});

  
● removeClass([ className])  : 선택된 element의 className에 해당하는 class를 삭제.( 예> 단,복수 삭제 가능)
- $("p").removeClass('myClass noClass').addClass('yourClass');

● .removeClass(function(index,class))

- $("li:last").removeClass(function(){return $(this).prev().attr('class'); });

● .css( propertyName) :  선택된 element의 propertyName에 해당하는 css정보를 리턴한다.

● .css(propertyName, value) : 선택된 element의 propertyName에 css정보를 설정한다.
● .css(propertyName, function(index, value)) 
● .css(map) //map 형태로 입력함 {key:value}
- $("span").css({"width":"100px", "height":"50px"});  // 복수 설정

● .hasClass( className)  : 선택된 element의 class가 className에 할당되어있는지 확인.

( return value = true,false)

● .toggleClass( className) : 선택된 element의 className을 (className)에따라  설정/해제 한다.
   1.<div class="tumble"> someText..... </div>

   2.$("div.tumble").toggleClass("bounce"); - 호출

   3.<div class="tumble bounce"> someText..... </div>  -적용

   4.$("div.tumble").toggleClass("bounce"); - 해제

   5(1).<div class="tumble"> someText..... </div>

 ● .toggleClass( className, switch) : switch는 boolean 값으로 조건값이 true이면 토글형태로 동작한다. 

     $("#foo").toggleClass(className, addOrRemove);  ==  (예1)

     if(addOrRemove){    // (예1)

$("#foo").addClass(className);      

      } else {

$("#foo").removeClass(className);

}

● .toggleClass( function(index, class), [switch])

예)

$("div.foo").toggleClass(function(){

if($(this).parent().is("bar")){

return "happy";  

} else {

return "sad";

}

});

[WIDTH&HEIGHT]

● .width() : 선택된 첫번째 element의 가로 길이값을 가져온다.
● .height() : 선택된 첫번째 element의 세로 길이값을 가져온다.
 *.css('width') 와 . width() 차이점은 단위없이 리턴한다. (예:100px -> 100)

● .innerWidth()   :  선택된 첫번째 element의 border길이를 제외한 padding길이를 포함한 가로길이 값을 가져온다.
● .innerHeight()   :  선택된 첫번째 element의 border길이를 제외한 padding길이를 포함한 세로길이 값을 가져온다.
● .outerWidth()   :  선택된 첫번째 element의 padding,border,optionally margin길이를 포함한 가로길이값을 가져온다.
● .outerHeight()   :  선택된 첫번째 element의 padding,border,optionally margin길이를 포함한 세로길이값을 가져온다.

● .width( value)  :  선택된 element 의 가로 길이값을 설정한다. (100px, 50%, auto 처럼 단위를 설정하지 않는다.)
● .width( function(index, width))
● .height( value) :  선택된 element 의 세로 길이값을 설정한다. (100px, 50%, auto 처럼 단위를 설정하지 않는다.)
   .height( function(index, height))

[OFFSET]

● offset()  : document을 기준으로 선택된 첫번째 element의 현재 좌표(오프셋)를 리턴한다.
- $("selector").offset().left , $("selector").offset().top

● offset( coordinates)  :  선택된 element의 현재 좌표(오프셋)를 변경한다.
- $("p:last").offset({top: 10, left: 30});

● .offset(function(index,coords))

● position()  :  부모 element로 부터 현재 좌표.
- $("selector").position.left, - $("selector").position.top

● .scrollTop()  :  선택된 element의 스크롤바 수직위치를 리턴한다.
● .scrollTop( value)  : 선택된 element의 스크롤바 수직위치를 설정한다. (value=integer)

● .scrollLeft()  :  선택된 element의 스크롤바 수평위치를 리턴한다.
● .scrollLeft( value)  : 선택된 element의 스크롤바 수평위치를 설정한다. (value=integer)

jQuery Core[BASIC]

//태그명 직접입력 선택
$("div").    
// 클래스명으로 선택
$(".class").   
 //ID 명으로 선택
$("#id").   
// 모든 Element 선택 하여 CSS적용
$("*").css("border","1px")  
//다중 셀렉터  , 기준으로 해당요소들 모두 선택
$("div,span,p.myClass")    

[BASIC Filter]
//애니메이션 되고있는 Element 선택
$(":animated")    
//3번째 DIV요소 의미 ((index) 와 같은요소)
$("div:eq(2)")   

//DIV요소중 3번째 이후 부터 ((index) 보다 큰(이후) 요소)
$("div:gt(2)")   
// DIV 요소중 3번째 이전 ((index) 보다 작은(이전) 요소)
$("div:lt(2)")    
//  input 요소중 짝수 요소 선택
$("input:even")    
//  input 요소중 홀수 요소 선택
$("input:odd")    
// 체크 되지 않은 Input 요소를 css 백그라운드 색상 수정.
$("input:not(:checked)").css("background-color","blue");    
/h1,h2,h3 과 같은 요소 선택
$(":header")    
// 첫번째 DIV 선택  :first     : last // 마지막 DIV 선택
$("div:first) == $("div:eq(0)") == $("div:lt(1)")    

[Child Filter]
// 선택 요소중 첫번째 자식 요소 선택  (*nth-child의 (인덱스)는 1부터 시작)
$(" :first-child") == $(" :nth-child(1)") 
// tr 이 복수개일 경우 그중 자식 요소중 td의 첫번째 요소들이 선택된다.   last-child   // 마지막 자식 요소
$("tr td:first-child")    
// 부모 요소의 자식 (index..)번째의 요소 , index 는 1부터 시작.
$(" :nth-child(index/even/odd/equation)")   
// ul요소의 2번째 li요소들 선택
$("ul li:nth-child(2)")    
//ul요소의 짝수번째 li 요소들 선택
$("ul li:even")   
//ul요소의 홀수번째 li 요소들 선택
$("ul li:odd")    
//3*0, 3*1, 3*2, ...  (요소들을 선택)
$("ul li:nth-child(3n)")    
// 부모의 자식요소가 딱 한개만 존재하는(only) 요소 선택
$(" :only-child")  
// div > button  자식이 하나 있는 요소만 선택 text,css 변경
예) $("div button:only-child").text("bye~!").css("border"."2px red solid");  

[Hierarchy]

$("parent > child")                // 부모 요소의 자식 요소 선택 

예)$("DIV > SPAN")   - <div><span>Hello </span></div> : div 선택

$("ancestor descendant")      // 조상 하위의 모든 자손에 해당하는 요소 선택. 

예)$("form input")  - 폼 하위 input 모든 요소 선택

$("prev + next")                    // prev 요소 다음에 나오는 형제 요소 선택.

예) $("label + input).css("color","blue").val("Labeled!");

$("prev ~ siblings")              // prev 요소 다음에 나오는 '모든' 형제 요소 선택.

예) $("#prev ~ div").css("border","3px groove blue");

[Filter]

// text 를 포함한 요소 선택
$(" :contains(text)")
$("div:contains('hello')")    //ex. <div> hello, nice to meet you~~ </div>선택
// 비어있는 요소 선택.
$(" :empty")
$("td:empty").text("Was Empty!")
// selector 에 해당하는 요소를 자식요소로포함하는 요소 선택.
$(" :has(selector)")
$("div:has(p)")     // <div>HELLO in a paraGraph</div>

[Visibility Filter]

jQuery(" :hidden")  //$(" :hidden")     <!=>   jQuery(" :visible")

선택 요소

1.display:none             // visibility:hidden, opacity: 0 는 보이는것으로 간주됨.

2.type="hidden"

3.width:0;height:0

4.부모 요소가 hidden 인것.

$(" :button")        // <input type="button" />