JQuery 튜 토리 얼 --- DOM 조작 (2)

 JQuery  ---DOM  ( )

 1. clone () jQuery 대상 복사
 
 
예:

<p id="test">after</p><a href="http://p5s8.ddvip.com/index.php#" onClick="jq()">jQuery</a>

 
jQuery 코드 및 기능:

function jq(){
　　$("#test").clone().appendTo($("a"));
}

 
$("\ # test") 를 복사 하여 < a > 에 삽입 한 후 실행 후 해당 합 니 다.

<p id="test">after</p>

<a href="http://p5s8.ddvip.com/index.php#" onClick="jq()">jQuery</a>

<p id="test">after</p>

 2. empty () 일치 하 는 대상 의 모든 하위 노드 삭제
  예:

<div id="test">
　<span>span</span>
　<p>after</p>
</div>
<a href="http://p5s8.ddvip.com/index.php#" onClick="jq()">jQuery</a>

 jQuery 코드 및 기능:

function jq(){
　　$("#test").empty();
}

 실행 후 다음 과 같 음:

<div id="test"></div>
<a href="http://p5s8.ddvip.com/index.php#" onClick="jq()">jQuery</a>

 3. insert After (expr) 는 일치 하 는 모든 요 소 를 다른 요소 집합 뒤에 삽입 합 니 다.
     insertBefore(expr)  일치 하 는 모든 요 소 를 다른, 지정 한 요소 집합 앞 에 삽입 합 니 다.
    실제로 이 방법 을 사용 하 는 것 은 일반적인 $(A). after (B) 를 뒤 바 꾸 는 것 입 니 다. 즉, B 를 A 뒤에 삽입 하 는 것 이 아니 라 A 를 B 뒤에 삽입 하 는 것 입 니 다.
    예: $("\ # foo"). after ("p") 와 같 습 니 다.
   

<p>I would like to say: </p><div   id="foo">Hello</div>

 jQuery 코드 및 기능:

$("p").insertAfter("#foo"); 

 결과:

<div id="foo">Hello</div><p>I would like to   say: </p>

 4. remove () 일치 하 는 대상 삭제
   주의 구분:
    empty (): 일치 하 는 대상 의 하위 노드 를 이동 합 니 다.
    remove (): 일치 하 는 대상 이동
    wrap (htm): html 코드 에 일치 하 는 대상 을 포함 합 니 다.
예:
 

<p>TestParagraph.</p>
<a href="http://p5s8.ddvip.com/index.php#" onClick="jq()">jQuery</a>

 
jQuery 코드 및 기능:

function jq(){
　　　$("p").wrap("<div class='wrap'></div>");
}

 
실행 후

<div class='wrap'><p>TestParagraph.</p></div>

 
 5. wrap (elem) 는 일치 하 는 대상 을 주어진 대상 에 포함 합 니 다.
 예:

<p>TestParagraph.</p>
<div id="content"></div>
<a href="http://p5s8.ddvip.com/index.php#" onClick="jq()">jQuery</a>

 jQuery 코드 및 기능:

function jq(){
　　　$("p").wrap(document.getElementById('content'));
}

 
실행 후 다음 과 같 음:

<div id="content"><p>TestParagraph.</p></div>

 
6. add (expr) 는 원래 대상 을 바탕 으로 지정 한 표현 식 에 맞 는 jquery 대상 을 추가 합 니 다.
예:

<p>Hello</p>
<p><span>HelloAgain</span></p>
<a href="http://p5s8.ddvip.com/index.php#" onClick="jq()">jQuery</a>

 jQuery 코드 및 기능:
 

function jq(){
　　varf=$("p").add("span");
　　for(var i=0;i<$(f).size();i++){
　　alert($(f).eq(i).html());}
}

 
$("p") 를 실행 하면 < p > 와 일치 하 는 대상 을 얻 을 수 있 습 니 다. 두 개 있 습 니 다. add ("span") 는 ("p") 를 바탕 으로 < span > 과 일치 하 는 대상 을 추가 합 니 다. 모든 것 은 3 개 입 니 다. 위의 함수 실행 결 과 를 보면 $("p"). add ("span") 는 3 개 대상 의 집합 입 니 다. 각각 [p > Hello < / p >, [p > < span > Hello Again < / span >, [span > Hello Again > < / sp >] 입 니 다.
 
 7. add (el) 는 일치 하 는 대상 을 바탕 으로 지정 한 dom 요 소 를 추가 합 니 다.
예:

<p>Hello</p><p><span>HelloAgain</span></p>

  jQuery 코드 및 기능:

function jq(){
　　varf=$("p").add([document.getElementById("a"),document.getElementById("b")])
　　for(var i=0;i<$(f).size();i++){
　　　　　　alert($(f).eq(i).html());}
}

 
els 는 하나의 배열 입 니 다. 여기 [] 는 빠 뜨리 면 안 됩 니 다.