jQuery_jquery에서 DOM 트리 작업의 요소를 복사하는 방법-JS 튜토리얼-php.cn

본 글의 예시에서는 jQuery의 DOM 트리 연산에서 요소를 복사하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

요소 복사

앞서 언급한 작업에는 새로 생성된 요소 삽입, 문서의 한 위치에서 다른 위치로 요소 이동, 기존 요소를 새 요소로 래핑 등이 포함됩니다. 그러나 때로는 요소를 복사하는 작업도 사용됩니다. 예를 들어 페이지 상단에 표시되는 탐색 메뉴를 복사하여 바닥글에 배치할 수 있습니다. 실제로 요소를 복사하여 페이지의 시각적 효과를 향상시킬 수 있는 경우 언제든지 코드를 재사용할 수 있는 좋은 기회입니다. 결국, 코드를 한 번 작성하고 jQuery가 복사하도록 할 수 있는데 왜 코드를 두 번 다시 작성하고 오류 가능성을 두 배로 늘리겠습니까?

요소를 복사할 때 나중에 사용할 수 있도록 일치하는 요소 컬렉션의 복사본을 생성할 수 있는 jQuery의 .clone() 메서드를 사용해야 합니다. $()를 사용하여 요소를 생성하는 이전과 마찬가지로 이러한 요소는 복사된 요소에 삽입 방법을 적용할 때까지 문서에 나타나지 않습니다.

예를 들어, 다음 코드 줄은

의 첫 번째 단락 사본을 생성합니다.

코드 복사 코드는 다음과 같습니다.

$('div.chapter p:eq(0)'). 클론() ;

하지만 단순히 복사본을 만드는 것만으로는 페이지의 내용을 변경할 수 없습니다. 복사한 내용을 웹페이지에 표시하고 싶다면 insert 메소드를 이용하여

앞에 배치하시면 됩니다.

코드 복사 코드는 다음과 같습니다.

$('div.chapter p:eq(0)'). clone() .insertBefore('div.chapter');

이렇게 하면 같은 문단이 두 번 나옵니다. .clone()과 삽입 방법의 관계는 복사하여 붙여넣기와 같다는 것을 알 수 있다.

이벤트와 함께 복사

기본적으로 .clone() 메서드는 일치하는 요소나 그 하위 요소에 바인딩된 이벤트를 복사하지 않습니다. 그러나 이 메소드에 부울 매개변수를 전달할 수 있습니다. 이 매개변수를 true로 설정하면 이벤트를 함께 복사할 수 있습니다. 즉, .clone(true)입니다. 이러한 방식으로 각 복사 후에 이벤트를 수동으로 다시 바인딩하는 문제를 피할 수 있습니다.

카피를 통해 인용문 만들기 인쇄본과 마찬가지로 많은 웹사이트에서는 인용문을 사용하여 텍스트의 작은 부분을 강조하고 독자의 시선을 끌고 있습니다. 소위 강조 인용은 본문에서 텍스트의 일부를 추출한 다음 이 텍스트에 특별한 그래픽 스타일을 적용하는 것입니다. 이 장식 효과는 .clone() 메서드를 통해 쉽게 달성할 수 있습니다. 먼저 예시 텍스트의 세 번째 단락을 살펴보겠습니다.

남자 아이가 자신의 아이보다 한 쪽이 더 많은자연의 법칙입니다 아버지, 그래서 각 세대는 (원칙적으로) 발전과 고귀함의 수준에서 한 단계 올라갑니다. 따라서 정사각형의 아들은 오각형, 육각형의 아들입니다.

이 단락은 WX 요소로 시작하고 그 안의 클래스는 복사할 준비가 되어 있음을 확인했습니다. 복사한 * 텍스트를 다른 위치에 붙여넣을 때 원본 텍스트와 구별될 수 있도록 스타일 속성도 수정해야 합니다.
이 스타일을 구현하려면

코드 복사 코드는 다음과 같습니다.

.pulled {

위치: 절대; 너비: 120px; 오른쪽: -180px;

글꼴: 기울임꼴 1.2em "Times New Roman", Times, serif; 배경: #e5e5e5; 테두리: 1px 테두리 반경: 8px;

상자 그림자: 1px 1px 8px rgba(0, 0, 0, 0.6);

}

이렇게 하면 밝은 회색 배경, 일부 패딩 및 인용문에 다른 글꼴이 추가됩니다. 더 중요한 것은 DOM에서 (절대적으로 또는 상대적으로) 위치하는 가장 가까운 조상 요소보다 위쪽으로 20px, 오른쪽으로 20px에 절대적으로 위치한다는 것입니다. 위치 지정이 적용되는 상위 요소에 요소가 없는 경우(정적 제외), 끌어오기 인용문은 문서의 요소를 기준으로 배치됩니다. 이렇게 하려면 jQuery 코드에서 복사된 인용문의 상위 요소에 위치:상대적 스타일이 적용되어 있는지 확인하세요.

CSS 위치 계산

인용문 상자의 위쪽 가장자리 위치는 상대적으로 직관적이지만 왼쪽이 위치가 지정된 상위 요소에서 오른쪽으로 20픽셀이라는 점을 고려하면 이해하기 쉽지 않을 수 있습니다. 이 숫자를 얻으려면 먼저 끌어오기 상자의 전체 너비를 계산해야 합니다. 이는 너비 속성에 왼쪽 및 오른쪽 패딩을 더한 값, 즉 145px 5px 10px입니다. 결과는 160px입니다. 인용문에 대한 right 속성을 설정할 때 값 0은 인용문의 오른쪽을 상위 요소의 오른쪽과 정렬합니다. 따라서 왼쪽을 부모 요소의 오른쪽으로 20px로 만들려면 전체 너비(-180px)보다 20px 더 반대 방향으로 이동해야 합니다.

이제 jQuery 코드로 돌아가서 스타일을 적용하는 방법을 살펴보겠습니다. 먼저 모든 요소와 일치하는 선택기 표현식으로 시작한 다음 선택한 요소에 position:relative 스타일을 적용합니다. 다음 코드를 참조하세요.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function() {

$('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative');

});

});

여기서 성능과 가독성을 향상시키기 위해 여러 번 사용해야 하는 선택기 표현식도 $parentParagraph 변수에 저장합니다.

다음 단계는 준비된 CSS 스타일을 활용하기 위해 하이라이트 인용문 자체를 만드는 것입니다. 이때 먼저 각 요소를 복사한 다음 가져온 클래스를 가져온 복사본에 추가하고 마지막으로 이 복사본을 상위 단락의 시작 부분에 삽입합니다. 다음 코드를 참조하세요.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function() {

$('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative'); var $ clonedCopy = $(this).clone();

$cloned복사

.addClass('풀')

.prependTo($parentParagraph);

});

});

여기에서는 나중에 사용할 수 있도록 새 변수 $clonedCopy를 정의합니다.

복사된 요소에는 절대 위치가 설정되어 있으므로 단락 내에서의 위치는 중요하지 않습니다. CSS 규칙의 설정에 따라 단락 내부에 있는 한 단락의 위쪽과 오른쪽을 기준으로 위치가 지정됩니다. 현재 강조표시된 따옴표가 삽입된 단락은 다음과 같습니다.