jQuery 공부중 v.1

※ 주의!!

개인적인 공부를 위해 정리를 해놓은것이므로  다른분들도 충분히 테스트 후에 사용

하세요~잘못된 내용에 대한 가르침은 환영입니다~

 

 

 

 

1. html()

$("div").html("<b>Wow!</b> Such excitement...");

이거하믄 IE7에서는 "Wow!" 밖에 안나온다.(IE6도 그러네 ㅎ)

FF3에서는 다 나온다.

span이라도 붙여줘야하나?ㅡㅡㅋ

 

2. text()

<script>
  $(document).ready(function(){
   
    var str = $("p:first").text();
    $("p:last").html(str);

  });
  </script>
  <style>
  p { color:blue; margin:8px; }
  b { color:red; }
  </style>
  <p><b>Test</b> Paragraph.</p>
  <p></p>

 

html tag없이 단순 텍스트만 받는군...

 

3. append(content)

$("p").append("hello");

p 엘리먼트에 추가

 

4. appendTo(content)

$("p").appendTo("#ok");

id가 "ok"인 엘리먼트에 "p"의 내용을 더한다.

파라미터는 말이 content이지 실제로는 target인듯...

 

5. prepend(content), prependTo(content)

append, appendTo와 같은방식이지만...content가 맨앞에 붙음.

 

※ 기이한 현상(?)

$("p").append("<b>Hello </b>");
$("span").appendTo("#ok");
$("p").prepend("<b>Hello </b>");
$("span").prependTo("#ok")

 

--> append,prepend는 타겟엘리먼트가 같아도 그냥 앞,뒤로 붙는다.

--> 그러나 appendTo,prependTo는 마지막코드만 수행한다.

--> 왜그러지? 초기화시키는 코드가 들어있나?ㅡㅡㅋ

--> ㅡㅡㅋ 그 복잡한 코드를 봐야하나?

 

 

6. after,before는 append,prepend랑 비슷하게 쓰는듯...

7. insertAfter, insertBefore는 각각 before, after과 동일하다.

    즉, insertAfter는 after의 반대, insertBefore는 before의 반대.

 

8. wrap,wrapall은 말그대로 감싸는것. wrapInner도 말그대로 타겟엘리먼트의 안쪽을 감

    싸는것.

 

9. replaceWith(content)

$("p").replaceWith("<b>Paragraph. </b>");

타겟엘리먼트(여기선 p태그들...)를

content(<b>Paragraph. </b>)로 바꾼다.

replaceAll(selector)는 replaceWith의 다른형태.

-> $("<b>Paragraph. </b>").replaceAll("p");

 

10. empty() 와 remove()의 차이를 모르겠다. 둘다 똑같은듯...ㅡㅡㅋ

 

11. clone()

      엘리먼트 복사

     clone(true)

      해당 엘리먼트의 이벤트까지 복사를 해버린다.

 

 

참고사이트 : http://docs.jquery.com/Manipulation