Juqery 학습 5 문서 처리 줄 바꿈, 바꾸기, 삭제, Copy_jquery

Wrap(html)
일치하는 모든 요소를 ​​다른 요소의 구조화된 마크업으로 래핑합니다.
이러한 종류의 래핑은 원본 문서의 의미 품질을 손상시키지 않고 문서에 구조화된 추가 마크업을 삽입하는 데 가장 유용합니다.
이 함수의 원리는 제공된 첫 번째 요소(제공된 HTML 마크업 코드에 의해 동적으로 생성됨)를 확인하고 해당 코드 구조에서 최상위 상위 요소를 찾는 것입니다. 이 상위 요소는 래퍼 요소입니다.

HTML 마크업 코드의 요소에 텍스트가 포함된 경우에는 이 기능을 사용할 수 없습니다. 따라서 텍스트를 추가하고 싶다면 패키지가 완성된 후에 추가해야 합니다.

------------------------------- ------ -----------------------

모두 포장
이 래핑 프로세스는 문서의 원래 의미 특성을 손상시키지 않고 문서에 추가 구조를 삽입하는 데 가장 유용합니다.
이는 제공된 첫 번째 요소를 통해 작동합니다. 제공된 HTML에서 즉시 생성되고 해당 구조 내에서 가장 깊은 상위 요소를 찾습니다.

이는 텍스트가 포함된 요소에서는 작동하지 않습니다. 래핑이 완료된 후 필요한 텍스트를 추가해야 합니다.
반환 값
jQuery

매개변수
html(String): 요소를 동적으로 생성하고 대상 요소를 래핑하는 데 사용되는 HTML 태그 코드 문자열입니다.

예
새로 생성된 div의 모든 단락 래핑

HTML 코드:

단락 테스트

jQuery 코드:

$("p").wrap("

");
결과:

단락 테스트

------------------------------------------------ -- ------------------------------------------------ -- -------------------
Wrap( elem)
일치하는 모든 요소를 ​​다른 요소의 구조화된 마크업으로 래핑합니다.

------------------------------- ------ -----------------------

모두 포장
반환값
jQuery

매개변수
elem(요소): 대상 요소를 래핑하는 데 사용되는 DOM 요소

예
ID는 "content"입니다. div는 각 단락을 래핑합니다.

HTML 코드:

Test Paragraph.

jQuery 코드:

$("p").wrap(document.getElementById('content'));
결과:

단락 테스트

-------------------------------------------- ------ ------------------ ------ ------------------ ------
wrapAll(html)
일치하는 모든 요소를 ​​단일 요소로 래핑합니다.
이것은 일치하는 각 요소를 한 번 래핑하는 '.wrap()'과 다릅니다.
이러한 종류의 래핑은 원본 문서의 의미 품질을 손상시키지 않고 문서에 구조화된 추가 마크업을 삽입하는 데 가장 유용합니다.

이 함수의 원리는 제공된 첫 번째 요소를 확인하고 코드 구조에서 최상위 상위 요소를 찾는 것입니다. 이 상위 요소는 래핑 요소입니다.

------------------------------- ------ -----------------------

모두 포장 일치하는 세트의 요소를 단일 래퍼 요소로 만듭니다.
이것은 일치하는 세트의 각 요소가 요소로 래핑되는 '.wrap()'과 다릅니다.
이 래핑 프로세스는 삽입에 가장 유용합니다.

이는 제공된 첫 번째 요소(제공된 HTML에서 즉석에서 생성됨)를 거쳐 가장 깊은 조상을 찾는 방식으로 문서에 추가 구조를 추가합니다. 구조 내의 요소 -
반환 값
jQuery

매개변수
html(문자열): 요소를 동적으로 생성하는 데 사용되는 TML 마크업 코드 문자열입니다. 대상 요소 래핑

예
생성된 div로 모든 단락 래핑

HTML 코드:

Hello

cruel

World

jQuery 코드:

$("p").wrapAll("

")
결과:

안녕

잔인한

세상

---------------------------------- --- ---------------------------------- --- -------------------
wrapAll(elem)
일치하는 모든 요소를 ​​단일 요소로 래핑
이는 일치하는 각 요소를 한 번 래핑하는 '.wrap()'과 다릅니다.

------------------------------- ------ -----------------------

모두 포장
일치하는 세트의 각 요소가 요소로 래핑되는 '.wrap()'과 다릅니다.
반환 값
jQuery

매개변수
elem(요소): 대상 요소를 래핑하는 데 사용되는 DOM 요소

예
생성된 div로 모든 단락 래핑

HTML 코드:

안녕하세요

잔인한

World

jQuery 코드:

$("p").wrapAll(document.createElement(" div") );
결과:

안녕

잔인한

세계

---------------------------------- --- ---------------------------------- --- -------------------
wrapInner(html)
일치하는 각 요소의 하위 콘텐츠(텍스트 노드 포함)를 HTML 구조로 래핑합니다.
이 함수의 원리는 제공된 첫 번째 요소를 확인하는 것입니다(HTML 마크업 코드에서 제공됨). 동적으로 생성됨) 코드 구조에서 최상위 상위 요소를 찾습니다. 이 상위 요소는 패키징 요소입니다.

------------------------------- ------ -----------------------

포장 HTML 구조를 사용하는 일치하는 각 요소(텍스트 노드 포함)의 내부 하위 콘텐츠
이 래핑 프로세스는 문서의 원래 의미 특성을 손상시키지 않고 문서에 추가 구조를 삽입하는 데 가장 유용합니다. 제공된 첫 번째 요소(제공된 HTML에서 즉석에서 생성됨)는 해당 구조 내에서 가장 깊은 상위 요소를 찾습니다.
반환 값
jQuery
가 이 요소입니다.
매개변수
html(문자열): 요소를 동적으로 생성하고 대상 요소를 래핑하는 데 사용되는 HTML 태그 코드 문자열

예
모든 단락의 각 하위 콘텐츠를 굵게 표시

HTML 코드:

안녕하세요

잔인한

World

jQuery 코드:

$("p").wrapInner ("");
결과:

안녕하세요

잔인합니다

세계

-------------------------------------- ------ ------------------ ------ ------------------ ------ ------
wrapInner(elem)
각 일치 요소의 하위 콘텐츠(텍스트 노드 포함)를 DOM 요소로 래핑

---- ----- ------------------- ----- --------

일치하는 각 요소(텍스트 노드 포함)의 내부 하위 콘텐츠를 DOM 요소로 래핑합니다. .
반환 값
jQuery

매개변수
elem(요소): 대상 요소를 래핑하는 데 사용되는 DOM 요소

예
전체 내에서 각 하위 콘텐츠를 굵게 표시합니다. 단락

HTML 코드:

안녕하세요

잔인한

세계

jQuery 코드:

$ ("p ").wrapInner(document.createElement("b"));
결과:

안녕하세요

잔인한

세계

--------------- --- ---------------------------------- --- ---------------------------------- --- -------------
replaceWith(content)
일치하는 모든 요소를 ​​지정된 HTML 또는 DOM 요소로 바꿉니다.

------------------------------- ------ -----------------------

모두 교체 지정된 HTML 또는 DOM 요소와 일치하는 요소
반환 값
jQuery

매개변수
콘텐츠(String, Element, jQuery): 일치하는 요소를 대체하는 데 사용되는 콘텐츠

예
모든 단락 기호를 굵은 글씨로 바꿉니다.

HTML 코드:

안녕하세요

잔인한

World

jQuery 코드:

$( "p").replaceWith("단락. ")
결과:

단락. 단락. . ------------------------------- -- ------------------------------------------------ -- ------------------------------------------------ -- -- replaceAll(selector)
selector와 일치하는 모든 요소를 ​​일치하는 요소로 바꿉니다.

------------------------------- ------ -----------------------

대체
반환값
jQuery

매개변수
선택기(selector): 대체할 요소를 찾는데 사용됩니다

예시
모두 넣기 단락 태그를 굵은 태그로 교체

HTML 코드:


Hello

cruel

World

jQuery 코드:

$("
단락.
").replaceAll("p") 결과:

단락.
단락. 단락. ------------------------------- --- ---------------------------------- --- ---------------------------------- --- ---------- empty() 일치하는 요소 세트의 모든 하위 노드를 삭제합니다.

------------------------------- ------ -----------------------

모두 삭제
반환 값
jQuery

예
모든 단락 하위 요소(텍스트 노드 포함) 삭제

HTML 코드:


안녕하세요,
사람

그리고 사람 jQuery 코드:

$("p").empty();
결과:




---------------------------------- --- ---------------------------------- --- -------------------
remove([expr])
DOM에서 일치하는 모든 요소를 ​​제거합니다.
이 방법은 jQuery 객체에서 일치하는 요소를 제거하지 않으므로 나중에 이러한 일치 요소를 재사용할 수 있습니다.

------------------------------- ------ ----------

모두 제거
이것은 jQuery 객체에서 제거되지 않으며, 일치하는 요소를 추가로 사용할 수 있습니다.
반환 값
jQuery

매개변수
expr(문자열): (선택 사항) 요소 필터링을 위한 jQuery 표현식

예
DOM에서 모든 단락 제거

HTML 코드:

안녕하세요

잘 지내세요

jQuery 코드:

$("p").remove()
결과:

어떻게

------------------------------- -- -------------------

Put hello from the DOM 클래스 단락 삭제

HTML 코드:

안녕하세요

잘 지내세요

jQuery 코드:

$( "p").remove(".hello");
결과:

잘 지내세요

---- -------- ---------------- -------- ---------------- -------- ------
클론()
클론 DOM 요소를 일치시키고 이러한 복제본 사본을 선택합니다.
이 기능은 DOM 문서의 요소 복사본을 다른 위치에 추가하려는 경우에 유용합니다.

------------------------------- ------ ----------

클론 일치 DOM 요소를 선택하고 복제본을 선택합니다.
이는 요소의 복사본을 DOM의 다른 위치로 이동하는 데 유용합니다.
반환 값
jQuery

예
모든 b 요소를 복제합니다. 복제된 복사본을 선택하고 모든 단락 앞에 추가합니다.

HTML 코드:

안녕하세요

, 잘 지내세요?

jQuery 코드:

$("b" ).clone().prependTo("p");
결과:

안녕하세요

안녕하세요, 잘 지내세요?

------------------------------------------------ ------------------------------------- ---------------------
clone(true)
요소와 모든 해당 이벤트 핸들러를 선택하고 복제된 복사본을 선택합니다.
이 함수는 요소의 복사본을 DOM 문서의 다른 위치에 추가하려는 경우 매우 유용합니다.

------------------------------- ------ ----------

클론 일치 DOM 요소 및 해당 이벤트 핸들러를 선택하고 복제본을 선택합니다.
이는 요소 및 해당 이벤트의 복사본을
반환 값
jQuery
로 이동하는 데 유용합니다.
매개변수
true(부울): 요소의 모든 이벤트 핸들러를 복사하려면

예
자체를 복사할 수 있는 버튼을 생성하고 해당 복사본은 동일한 기능을 갖습니다.

HTML 코드:

Clone Me!
jQuery 코드:

$("button").click(function(){
$(this).clone(true).insertAfter(this)
});